Flutter – Wakelock

The Wakelock package in Flutter is used to keep the screen awake while using it. It can be adjusted according to the requirements (how long to stay awake). These are very simple things that enhance the quality of the app and increases the user-friendliness of the same.

In this article, we will explore the process of keeping the mobile screen awake while not using the application. To do, so we will build a simple application with two buttons namely:

  • enable wakelock: It will prevent the phone screen to lock itself irrespective of how long it stays that way.
  • disable wakelock: It will disable the wakelock functionality of the application.

Now let’s build the application. To do so follow the below steps:

  • Add the dependency to the pubspec.yaml file
  • Import the dependency to the main.dart file
  • Create a Statefulwidget to give a simple structure to the application
  • Add OutlineButton to the body of the application
  • Assign actions to the buttons

Now let’s discuss the steps in detail.

Adding the Dependency:

Inside the dependencies attribute of the pubspec.yaml file, add the wakelock dependency as shown below:



dependency

Importing the Dependency:

To import the wakelock dependency to the main.dart file, use the following:

import 'package:wakelock/wakelock.dart';

Creating an application structure:

The StatefulWidget can be used to give a simple structure to the application as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

class WakelockExampleApp extends StatefulWidget {
  @override
  _WakelockExampleAppState createState() => _WakelockExampleAppState();
}
  
class _WakelockExampleAppState extends State<WakelockExampleApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
}

chevron_right


Adding Buttons:

One of the ways to add buttons in an application is to use the inbuilt OutlineButton widget in flutter. These are simple to implement and as discussed earlier, we will add two buttons to the body of the application namely: enable wakelock and disable wakelock as shown below:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
           children: <Widget>[
             const Spacer(
               flex: 3,
             ),
             OutlineButton(
               onPressed: () {
                 setState(() {
                   Wakelock.enable();
                 });
               },
               child: const Text('enable wakelock'),
             ),
             const Spacer(),
             OutlineButton(
               onPressed: () {
                 setState(() {
                   Wakelock.disable();
                 });
               },
               child: const Text('disable wakelock'),
             ),

chevron_right


Assigning Actions to Buttons:

Here we will be using a simple FutureBuilder to assign actions to the buttons. The first button (ie, enable wakelock) as the name suggests will keep the screen awake and the later (ie, disable wakelock) will disable the wakelock functionality. That can be done using the following:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

FutureBuilder(
                future: Wakelock.enabled,
                builder: (context, AsyncSnapshot<bool> snapshot) {
                  if (!snapshot.hasData) {
                    return Container();
                  }
  
                  return Text('The wakelock is currently '
                      '${snapshot.data ? 'enabled' : 'disabled'}.');
                },
              ),
              const Spacer(
                flex: 3,
              ),

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
import 'package:wakelock/wakelock.dart';
  
void main() {
  runApp(WakelockExampleApp());
}
  
class WakelockExampleApp extends StatefulWidget {
  @override
  _WakelockExampleAppState createState() => _WakelockExampleAppState();
}
  
class _WakelockExampleAppState extends State<WakelockExampleApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              const Spacer(
                flex: 3,
              ),
              OutlineButton(
                onPressed: () {
                  setState(() {
                    Wakelock.enable();
                  });
                },
                child: const Text('enable wakelock'),
              ),
              const Spacer(),
              OutlineButton(
                onPressed: () {
                  setState(() {
                    Wakelock.disable();
                  });
                },
                child: const Text('disable wakelock'),
              ),
              const Spacer(
                flex: 2,
              ),
              FutureBuilder(
                future: Wakelock.enabled,
                builder: (context, AsyncSnapshot<bool> snapshot) {
                  if (!snapshot.hasData) {
                    return Container();
                  }
  
                  return Text('The wakelock is currently '
                      '${snapshot.data ? 'enabled' : 'disabled'}.');
                },
              ),
              const Spacer(
                flex: 3,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

chevron_right


Output:

wakelock UI

Since the output is not possible to show in any form unless tried by yourself, use the above source code and try it for yourself. The above output shows only the basic UI of the application we have built.




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.