Flutter – Gestión de estado

En un marco reactivo como Flutter , puedes pensar en tu interfaz de usuario como el valor de retorno de la función. La función aquí se considera como su estado. Entonces, en palabras simples, lo que un usuario ve en la aplicación es un estado, y hace clic en el botón, ve otra pantalla de interfaz de usuario. Así que ahora esa pantalla es un estado. Entonces, una aplicación se compone de muchos estados, es decir, UI. Y sus estados son gestionados por Navegación y ruta.

Muchos de sus datos pueden ser autónomos dentro de un solo widget conocido como estado local . Y un estado que debe compartirse en todo el árbol de widgets se llama Estado global .

El estado de una aplicación es todo lo que existe en la memoria cuando la aplicación se está ejecutando. Todos los activos, el estado de la animación, la información sobre la interfaz de usuario y las texturas. Todos estos datos están incluidos en estos. El marco gestiona la mayoría de los estados para el usuario. El estado que gestionamos nosotros mismos se puede separar en estado Efímero y estado de Aplicación.

Estado efímero:

El estado efímero es el estado en el que puede contenerlo perfectamente en un solo widget. No hay necesidad de serializarlo y no cambia de manera compleja. En palabras más sencillas, no hay necesidad de usar Gestión de estado en esto. Simplemente use StatefulWidget aquí. 

class MainPage extends StatefulWidget {
  @override
  _MainPage createState() => _MainPage();
}
  
class _MainPage extends State<MainPage> {
  int _index = 0;
  
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _index,
      onTap: (newIndex) {
        setState(() {
          _index = newIndex;
        });
      },
      // ... items ...
    );
  }
}

En el código anterior, _index es un estado efímero. Se mantiene en el campo _index de la clase _Mainpage . La variable solo cambia dentro del widget _MainPage , e incluso si el usuario reinicia la aplicación, no le importa que _index se restablezca a cero.

Una vez creado, las otras IU de la aplicación no pueden acceder a este widget. Generalmente usamos este estado cuando la aplicación es pequeña o para la página actual o las páginas de progreso actuales en la aplicación.

Estado de la aplicación:

Los estados que el usuario desea compartir en muchas partes de la aplicación se denominan estado de la aplicación o estado compartido . Usamos este estado en aplicaciones complejas o grandes. 

Por ejemplo:-

• Preferencias del usuario
• información de inicio de sesión
• El carrito en una aplicación de comercio electrónico
• Notificaciones de las aplicaciones

No hay compulsión en el uso de estos estados. Ambos estados son válidos y dependen de cuál quiera usar el usuario. Si el widget de la aplicación se va a utilizar dentro de una única interfaz de usuario, el usuario puede optar por el estado Efímero y el usuario puede utilizar el estado de la aplicación.  

Hay muchas formas de abordar la gestión estatal:

• Proveedor
• establecerestado
• Widget heredado y modelo heredado
• Redux y Fish-Redux
• BLOC/Rx
• Consíguelo
• MobX
• Aglutinante
• ObtenerX
• Riverpod

Consideremos un ejemplo simple de una aplicación: –

1. Cuando se abre la aplicación, el usuario ve 3 botones.
2. Cada botón lleva al usuario a una pantalla diferente.
3. Y después de pasar a la otra pantalla, el usuario también puede volver a la pantalla anterior.

Navegación y enrutamiento:

En cualquier aplicación, la navegación de una pantalla a otra es fundamental. La forma en que se maneja la navegación se llama enrutamiento. Flutter proporciona una clase de enrutamiento elemental: MaterialPageRoute y dos métodos: Navigator.push y Navigator.pop.

MaterialPageRoute

MaterialPageRoute es un widget que se usa para representar su interfaz de usuario reemplazando toda la pantalla con una animación específica de la plataforma. La siguiente es la sintaxis de este widget: –

MaterialPageRoute(builder: (context)=>Widget())

Vamos a crear una nueva aplicación para una mejor comprensión de este concepto.

Cree una nueva aplicación Flutter en Android Studio, test_app, o puede nombrar la aplicación según su elección.

La primera pantalla que puede ver es main.dart

import 'package:flutter/material.dart';
import 'mainscreen.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MainScreen(),
    );
  }
}

Aquí hemos creado un StatlessWidget porque no queríamos hacer una aplicación dinámica. Si desea crear una aplicación dinámica, utilice StatefullWidget. Hemos agregado el tema, que hace que el color principal de la aplicación sea azul. El color azul es el color predeterminado de flutter, pero le daremos un color verde aquí. Puede dar el color que quiera dar. Y hemos configurado la casa como MainScreen(). Esto significa que la primera pantalla que será visible para el usuario abrirá la interfaz de usuario de la PANTALLA PRINCIPAL.

Este es el código de mainscreen.dart

import 'package:flutter/material.dart';
import 'secondscreen.dart';
  
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeksforgeeks SCREEN 1"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('SCREEN 2'),
          onPressed: (){
            Navigator.push(context,
            MaterialPageRoute(builder: (context)=>SecondScreen()));
          },
        ),
      ),
    );
  }
}

Este código creó la primera pantalla de nuestra aplicación cuyo título le hemos dado como Geeksforgeeks SCREEN 1. Y en el medio, habíamos agregado un RaisedButton que al hacer clic nos llevará a SCREEN 2. La línea ” MaterialPageRoute(builder: (context)= >SecondScreen())” es la línea principal que le dice a nuestra aplicación que se mueva a la pantalla 2 cuando se presiona el botón. Ahora cree un nuevo archivo dart llamado secondscreen.dart . Crear este archivo nos ayudará a importarlo en mainscreen.dart.

Este es el código de secondscreen.dart

import 'package:flutter/material.dart';
  
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeksforgeeks SCREEN 2"),
  
      ),
    );
  }
}

Este es un archivo sencillo. En este archivo, solo hemos agregado la barra de título que le indica que ahora está en la segunda pantalla. El aleteo en sí agrega el botón de icono de retroceso. No hay necesidad de codificar eso. Ejecute esta aplicación y presione el botón en el Centro. Te llevará a la pantalla 2.

Producción: