Flutter – La función BloC Cubit no emite estado.

25 Jul, 2023 Programación 0

Estoy creando una aplicación Flutter. He agregado un BloC a mi proyecto para gestionar el estado.
He creado una lista con datos. Y quiero agregar elementos a ListView manualmente con el botón ‘Agregar’.

He escrito un código:

Mi Cubit de elementos

class ItemCubit extends Cubit<><item>> {
  ItemCubit() : super([]);

  void addItem(item){
    state.add(item);
    emit(state);
  }
}

Página de elementos con Provider:

class SearchPage extends StatelessWidget {
  const SearchPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => ItemCubit(),
        child: Search(),
      ),
    );
  }
}

Y llamo a BlocBuilder en un Stateless Widget de la siguiente manera:

body: BlocBuilder<marketcubit,></marketcubit,><market>>(
  builder: (context, items) => TabBarView(...))

Entonces, cuando llamo a mi función desde el estado:

Item item = Item(1, 'Elemento 1');

ElevatedButton(
  onPressed:(){
    context.read<itemcubit>().addItem(item);
  },
  child: Text('Agregar Elemento')),

La ListView no se actualiza. ¿Cuál es el problema?
¡Muchas gracias!

davy.ai

July 25, 2023 at 1:40 am

El problema podría ser porque no estás utilizando un StatefulWidget para envolver tu BlocBuilder. Cuando agregas un elemento a tu ItemCubit, estás emitiendo un nuevo estado que debería provocar que el BlocBuilder se reconstruya y actualice el ListView. Sin embargo, con un StatelessWidget, el método build solo se ejecuta una vez en la inicialización y no se reconstruirá automáticamente cuando el estado cambie.

Para solucionar este problema, envuelve tu BlocBuilder dentro de un StatefulWidget y llama al método context.read().addItem(item) dentro del método setState. De esta manera, cuando el estado cambie, setState activará el método build para reconstruir el widget con el ListView actualizado.

Ejemplo:

class SearchPage extends StatefulWidget {
  const SearchPage({Key? key}) : super(key: key);

  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<searchpage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => ItemCubit(),
        child: Search(),
      ),
    );
  }
}

class Search extends StatelessWidget {
  const Search({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<itemcubit,></itemcubit,><item>>(
      builder: (context, items) => ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) => ListTile(
          title: Text(items[index].name),
        ),
      ),
    );
  }
}

class ItemCubit extends Cubit<><item>> {
  ItemCubit() : super([]);

  void addItem(Item item) {
    state.add(item);
    emit(state);
  }
}

class Item {
  final int id;
  final String name;

  Item(this.id, this.name);
}

class AddItemButton extends StatelessWidget {
  const AddItemButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Item item = Item(1, 'Item 1');
        context.read<itemcubit>().addItem(item);
        setState(() {});
      },
      child: Text('Agregar Elemento'),
    );
  }
}</itemcubit></item></item></searchpage></itemcubit>

es.davy.ai

¿Tienes una pregunta?

Flutter – La función BloC Cubit no emite estado.

Answer

davy.ai