Flutter: estado local frente a estado de toda la aplicación

Estado local (a veces llamado estado de IU o estado efímero ): es un estado que se puede administrar en un solo widget. No hay necesidad de técnicas de gestión de estado (Bloc, redux, etc.) en este tipo de estado, bastaría con un Stateful Widget.

Ejemplos:

Página actual en una vista de página, pestaña actual en la barra de navegación.

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
  
class _MyAppState extends State<MyApp> {
  List<Widget> _spaces = <Widget>[
    Text('Home Page',
        style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
    Text('Search Page',
        style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
    Text('Account Page',
        style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold)),
  ];
    
  // local variable
  int _index = 0; 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Geeks For Geeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.backspace),
          title: Text("Geeks for Geeks"),
          centerTitle: true,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _index,
          onTap: (newIndex) {
            setState(() {
                
               // changing in widget
              _index = newIndex;
              print('$_index');
            });
          },
          items: [
            BottomNavigationBarItem(
              label: "Home",
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              label: "Search",
              icon: Icon(Icons.search),
            ),
            BottomNavigationBarItem(
              label: "Account",
              icon: Icon(Icons.person),
            ),
          ],
        ),
        body: Center(child: _spaces.elementAt(_index)),
      ),
    );
  }
}

Producción:

App-wide State : Estado que no es local y es accesible a través de nuestra aplicación, es lo que se conoce como App-wide state o Shared state.

Ejemplos: Notificaciones en una aplicación de redes sociales.

Estado del carrito de compras en una aplicación de comercio electrónico.

Paso 1: Primero agregue la dependencia del proveedor en el archivo pubspec.yaml en la carpeta lib.

dev_dependencies:
    provider: ^4.3.2

Hemos agregado la dependencia de Provider en nuestro pubspec . archivo yaml ubicado en la carpeta lib en dependencias como se muestra arriba:

Ahora haga clic en publicar, obtener o guardar el archivo para que se obtenga el paquete.

Paso 2: Usando el proveedor, notificamos los cambios y actualizamos el estado del contador:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
  
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}
  
class Counter with ChangeNotifier {
  int value = 0;
  
  void increment() {
    value += 1;
    notifyListeners();
  }
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Geeks For Geeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Icon(Icons.backspace),
        title: Text("Geeks for Geeks"),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Consumer<Counter>(
              builder: (context, counter, child) => Text(
                '${counter.value}',
                style: TextStyle(fontSize: 26),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          var counter = context.read<Counter>();
          counter.increment();
          // calling increment on tap
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Producción:

Para comprender mejor la diferencia entre un estado de aplicación y un estado efímero, observe el siguiente diagrama: