Aleteo – Wakelock

El paquete Wakelock en Flutter se usa para mantener la pantalla activa mientras se usa. Se puede ajustar según los requisitos (cuánto tiempo permanecer despierto). Estas son cosas muy simples que mejoran la calidad de la aplicación y aumentan la facilidad de uso de la misma.

En este artículo, exploraremos el proceso de mantener activa la pantalla del móvil mientras no se usa la aplicación. Para hacerlo, construiremos una aplicación simple con dos botones, a saber:

• habilitar wakelock: evitará que la pantalla del teléfono se bloquee independientemente de cuánto tiempo permanezca así.
• deshabilitar wakelock: deshabilitará la funcionalidad de wakelock de la aplicación.

Ahora construyamos la aplicación. Para hacerlo, siga los siguientes pasos:

• Agregue la dependencia al archivo pubspec.yaml
• Importe la dependencia al archivo main.dart
• Cree un Statefulwidget para darle una estructura simple a la aplicación
• Añadir OutlineButton al cuerpo de la aplicación
• Asignar acciones a los botones

Ahora analicemos los pasos en detalle.

Agregar la dependencia:

Dentro del atributo de dependencias del archivo pubspec.yaml, agregue la dependencia de wakelock como se muestra a continuación:

Importación de la dependencia:

Para importar la dependencia de wakelock al archivo main.dart , use lo siguiente:

import 'package:wakelock/wakelock.dart';

Creación de una estructura de aplicación:

El StatefulWidget se puede usar para dar una estructura simple a la aplicación como se muestra a continuación:

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,
        ),
}

Agregar botones:

Una de las formas de agregar botones en una aplicación es usar el widget OutlineButton incorporado en flutter. Estos son simples de implementar y, como se discutió anteriormente, agregaremos dos botones al cuerpo de la aplicación, a saber: habilitar wakelock y deshabilitar wakelock como se muestra a continuación:

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'),
             ),

Asignación de acciones a los botones:

Aquí usaremos un FutureBuilder simple para asignar acciones a los botones. El primer botón (es decir, habilitar wakelock) como sugiere el nombre mantendrá la pantalla activa y el último (es decir, deshabilitar wakelock) deshabilitará la funcionalidad de wakelock. Eso se puede hacer usando lo siguiente:

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,
              ),

Código fuente completo:

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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Producción:

Dado que no es posible mostrar la salida de ninguna forma a menos que lo pruebe usted mismo, use el código fuente anterior y pruébelo usted mismo. El resultado anterior muestra solo la interfaz de usuario básica de la aplicación que hemos creado.