En el desarrollo de aplicaciones móviles con Flutter, la gestión de estados es crucial para mantener una aplicación fluida y responsiva. Una de las soluciones más populares para esto es el paquete Provider. En este artículo, exploraremos cómo utilizar Provider para manejar estados de manera eficiente en Flutter, con ejemplos prácticos de sumatoria y resta de dos números.
¿Qué es Provider?
Provider es un paquete de Flutter que facilita la gestión de estados y la inyección de dependencias en la aplicación. Es simple, eficiente y sigue las mejores prácticas recomendadas por los desarrolladores de Flutter.
Configuración inicial
Para comenzar a usar Provider, primero debemos agregar el paquete a nuestro archivo pubspec.yaml:
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
Luego, ejecutamos flutter pub get para instalar las dependencias.
Ejemplo práctico: Sumatoria y Resta de dos números
A continuación, implementaremos un sencillo ejemplo para demostrar cómo gestionar el estado de la sumatoria y resta de dos números utilizando Provider.
1. Creación del modelo
Primero, creamos un modelo que contendrá la lógica para la sumatoria y resta.
import 'package:flutter/material.dart';
class CalculatorProvider extends ChangeNotifier {
int _result = 0;
int get result => _result;
void add(int a, int b) {
_result = a + b;
notifyListeners();
}
void subtract(int a, int b) {
_result = a - b;
notifyListeners();
}
}
2. Configuración de Provider en el árbol de widgets
Envolvemos nuestro widget principal con un ChangeNotifierProvider para proporcionar acceso al modelo CalculatorModel.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'provider.dart';
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CalculatorProvider()),
],
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CalculatorScreen(),
);
}
}
3. Creación de la interfaz de usuario
Ahora, creamos una pantalla que permita al usuario ingresar dos números y ver los resultados de la sumatoria y resta.
class CalculatorScreen extends StatelessWidget {
final TextEditingController _controllerA = TextEditingController();
final TextEditingController _controllerB = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Calculadora'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _controllerA,
decoration: InputDecoration(labelText: 'Numero A'),
keyboardType: TextInputType.number,
),
TextField(
controller: _controllerB,
decoration: InputDecoration(labelText: 'Numero B'),
keyboardType: TextInputType.number,
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () {
int a = int.parse(_controllerA.text);
int b = int.parse(_controllerB.text);
context.read<CalculatorProvider>().add(a, b);
},
child: Text('Sumar'),
),
ElevatedButton(
onPressed: () {
int a = int.parse(_controllerA.text);
int b = int.parse(_controllerB.text);
context.read<CalculatorProvider>().subtract(a, b);
},
child: Text('Restar'),
),
],
),
SizedBox(height: 20),
Text('Resultado: ${context.watch<CalculatorProvider>().result}'),
],
),
),
);
}
}
Conclusión
El uso de Provider para gestionar estados en Flutter ofrece una forma eficiente y escalable de manejar la lógica de la aplicación. Con ejemplos simples como la sumatoria y resta de dos números, hemos demostrado cómo implementar y utilizar Provider en un proyecto de Flutter. Esta técnica puede ampliarse para manejar estados más complejos, mejorando la mantenibilidad y la organización del código en aplicaciones más grandes.
¡Espero que este artículo te haya sido útil! no dudes en compartirlo.
Visita mi sitio web para más información: albertoguaman.com
