En este artículo, veremos cómo recuperar el nivel de la batería y su estado usando flutter. Para obtener el nivel de la batería (porcentaje) y su estado, usamos un paquete llamado batería más paquete.
Términos importantes:
- Nivel de batería : vemos cuánto porcentaje de batería queda en el móvil.
- Estado de la batería : vemos si el estado de la batería se está cargando, descargando o está llena.
Implementación:
Ahora veremos prácticamente cómo obtener el nivel de la batería y verificar el estado de la batería:
Paso 1: agregue dependencias a su archivo pubspec.yaml
Dart
dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.2 battery_plus:
Paso 2: ahora, una vez que hayamos agregado las dependencias a nuestro proyecto flutter, debemos importar la clase battery_plus.dart.
Dart
import 'dart:async'; import 'package:flutter/material.dart'; import 'package:battery_plus/battery_plus.dart';
Paso 3: Para usar la clase battery_plus necesitamos crear una instancia de la clase Battery. Habíamos creado una variable llamada porcentaje y hemos mantenido su valor inicial en 0 .
Paso 4: ahora hemos creado el método getBatteryPercentage() para verificar el porcentaje de batería. En ese método, habíamos inicializado un nivel variable que almacena el valor actual del porcentaje de batería. Entonces le habíamos asignado el valor a la variable porcentaje. El nivel variable devuelve un tipo futuro , por lo que usamos async y await . Ahora habíamos creado un estado de inicio y dentro del estado de inicio habíamos llamado al método getBatteryPercentage() .
Dart
class _MyHomePageState extends State<MyHomePage> {
var battery = Battery();
int percentage = 0;
@override
void initState() {
super.initState();
// calling the method to display battery percentage
getBatteryPerentage();
}
// method created to display battery percent
void getBatteryPerentage() async {
final level = await battery.batteryLevel;
percentage = level;
setState(() {});
}
Paso 5: en el método de compilación, habíamos creado una Appbar en color verde con texto. Luego habíamos creado una columna y dentro de ella habíamos mostrado el porcentaje de batería.
Dart
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks', style: TextStyle(color: Colors.white),),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[
// Displaying battery percentage
Text('Battery Percentage: $percentage', style: const TextStyle(fontSize: 24),)
],
),
),
);
}
Producción:
Paso 6: para obtener la última actualización de nuestro porcentaje de batería una y otra vez. Hemos utilizado Timer . Este temporizador mostrará el último estado de la batería cada 5 segundos. Podemos aumentar el temporizador o disminuirlo según nuestra necesidad
Dart
class _MyHomePageState extends State<MyHomePage> {
var battery = Battery();
int percentage = 0;
late Timer timer;
@override
void initState() {
super.initState();
// calling the method to get battery state
getBatteryState();
// We have used timer to get the current status of
// battery percentage after every 5 seconds
Timer.periodic(const Duration(seconds: 5), (timer) {
getBatteryPerentage();
});
}
// method created to display battery percent
void getBatteryPerentage() async {
final level = await battery.batteryLevel;
percentage = level;
setState(() {});
}
Paso 7: ahora para obtener el estado de nuestra batería, ya sea que la batería esté en modo de carga, modo de descarga o llena. Habíamos creado un estado de batería de tipo enum e inicialmente habíamos establecido el estado en completo. y a medida que nos adentramos en el estado de la batería para verificar sus propiedades, vemos que el estado de la batería es de clase enum y tiene definidos 4 tipos de características que nos ayudan a conocer el estado actual de nuestra batería.
Dart
class _MyHomePageState extends State<MyHomePage> {
var battery = Battery();
int percentage = 0;
late Timer timer;
// created a Batterystate of enum type
BatteryState batteryState = BatteryState.full;
late StreamSubscription streamSubscription;
Esta clase de estado de la batería contiene 4 tipos de características que nos ayudarán a conocer el estado de la batería.
Dart
// Indicates the current battery state.
enum BatteryState {
// The battery is completely full of energy.
full,
// The battery is currently storing energy.
charging,
// The battery is currently losing energy.
discharging,
// The state of the battery is unknown.
unknown
}
Paso 8: A continuación, creamos un método getBatteryState() . Este método se crea para comprobar el estado actual de nuestra batería y luego actualizar mostrárselo al usuario. Usamos aquí escuchar el método que almacenará el estado actual de nuestra batería y luego lo asignamos a batteryState .
Dart
// method to know the state of the battery
void getBatteryState() {
streamSubscription = battery.onBatteryStateChanged.listen((state) {
batteryState = state;
setState(() {});
});
}
Luego había llamado al método dentro de initState()
Dart
@override
void initState() {
super.initState();
// calling the method to get battery state
getBatteryState();
Timer.periodic(const Duration(seconds: 5), (timer) {
getBatteryPerentage();
});
}
Paso 9: en el paso final, creamos un widget personalizado llamado BatteryBuild() que acepta el estado de la batería. En este widget, agregamos diferentes estados de batería usando la caja del interruptor. Luego llamó al widget personalizado BatteryBuild() en el método de compilación
Dart
// Custom widget to add different states of battery
// ignore: non_constant_identifier_names
Widget BatteryBuild(BatteryState state) {
switch (state) {
case BatteryState.full:
// ignore: sized_box_for_whitespace
return Container(
width: 200,
height: 200,
// ignore: prefer_const_constructors
child: (Icon(
Icons.battery_full,
size: 200,
color: Colors.green,
)),
);
case BatteryState.charging:
// ignore: sized_box_for_whitespace
return Container(
width: 200,
height: 200,
// ignore: prefer_const_constructors
child: (Icon(
Icons.battery_charging_full,
size: 200,
color: Colors.blue,
)),
);
case BatteryState.discharging:
default:
// ignore: sized_box_for_whitespace
return Container(
width: 200,
height: 200,
// ignore: prefer_const_constructors
child: (Icon(
Icons.battery_alert,
size: 200,
color: Colors.red,
)),
);
}
}
Código fuente completo:
Dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:battery_plus/battery_plus.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
Key? key,
}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var battery = Battery();
int percentage = 0;
late Timer timer;
// created a Batterystate of enum type
BatteryState batteryState = BatteryState.full;
late StreamSubscription streamSubscription;
@override
void initState() {
super.initState();
// calling the method to get battery state
getBatteryState();
// calling the method to get battery percentage
Timer.periodic(const Duration(seconds: 5), (timer) {
getBatteryPerentage();
});
}
// method created to display battery percent
void getBatteryPerentage() async {
final level = await battery.batteryLevel;
percentage = level;
setState(() {});
}
// method to know the state of the battery
void getBatteryState() {
streamSubscription = battery.onBatteryStateChanged.listen((state) {
batteryState = state;
setState(() {});
});
}
// Custom widget to add different states of battery
// ignore: non_constant_identifier_names
Widget BatteryBuild(BatteryState state) {
switch (state) {
// first case is for battery full state
// then it will show green in color
case BatteryState.full:
// ignore: sized_box_for_whitespace
return Container(
width: 200,
height: 200,
// ignore: prefer_const_constructors
child: (Icon(
Icons.battery_full,
size: 200,
color: Colors.green,
)),
);
// Second case is when battery is charging
// then it will show blue in color
case BatteryState.charging:
// ignore: sized_box_for_whitespace
return Container(
width: 200,
height: 200,
// ignore: prefer_const_constructors
child: (Icon(
Icons.battery_charging_full,
size: 200,
color: Colors.blue,
)),
);
// third case is when the battery is
// discharged then it will show red in color
case BatteryState.discharging:
default:
// ignore: sized_box_for_whitespace
return Container(
width: 200,
height: 200,
// ignore: prefer_const_constructors
child: (Icon(
Icons.battery_alert,
size: 200,
color: Colors.red,
)),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('GeeksforGeeks',
style: TextStyle(color: Colors.white),),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children:[
// calling the custom widget
BatteryBuild(batteryState),
// Displaying battery percentage
Text('Battery Percentage: $percentage',
style: const TextStyle(fontSize: 24),)
],
),
),
);
}
}
Producción:
Explicación –
- En el paso 9 , creamos un widget personalizado donde codificamos que si la batería del móvil se está cargando, nos muestra la batería en color azul. Entonces, actualmente mi teléfono no está completamente cargado, es por eso que vimos la batería en color azul .
- Si nuestra batería hubiera estado al 100% entonces el color habría cambiado a verde
- Si nuestra batería hubiera estado al 0% entonces habría estado en color rojo. Para más aclaraciones ver la imagen de abajo .
Publicación traducida automáticamente
Artículo escrito por ayurishchandnacs18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA