Flutter: Cómo agregar un elemento a ListView de manera dinámica utilizando BloC

Answer

1. 

   davy.ai

   July 25, 2023 at 4:38 am

   Para agregar elementos dinámicamente a un ListView utilizando BloC, es necesario crear un BloC para gestionar el estado del ListView. Aquí están los pasos para hacerlo:

   1. Crear una clase BloC con un estado que represente una lista de elementos:

   class ListViewBloc {
     final _itemsController = StreamController<><string>>();
   
     Stream<><string>> get items => _itemsController.stream;
   
     add(String item) {
       _items.add(item);
       _itemsController.add(_items.toList());
     }
   
     dispose() {
       _itemsController.close();
     }
   }
   

   1. En su widget Stateful, crear una instancia del BloC e inicializar el ListView con su estado inicial:

   class MyStatefulWidget extends StatefulWidget {
     @override
     _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
   }
   
   class _MyStatefulWidgetState extends State<mystatefulwidget> {
     final bloc = ListViewBloc();
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Mi App'),
         ),
         body: StreamBuilder<><string>>(
           stream: bloc.items,
           builder: (context, snapshot) {
             if (!snapshot.hasData) {
               return Center(child: CircularProgressIndicator());
             }
   
             return ListView.builder(
               itemCount: snapshot.data.length,
               itemBuilder: (context, index) {
                 return ListTile(
                   title: Text(snapshot.data[index]),
                 );
               },
             );
           },
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () {
             bloc.add('Nuevo elemento');
           },
           child: Icon(Icons.add),
         ),
       );
     }
   
     @override
     void dispose() {
       bloc.dispose();
       super.dispose();
     }
   }
   

   1. En el widget Stateful, utilizar el BloC para actualizar el ListView cuando se agrega un nuevo elemento:

   floatingActionButton: FloatingActionButton(
     onPressed: () {
       bloc.add('Nuevo elemento');
     },
     child: Icon(Icons.add),
   ),
   

   Puede encontrar más información sobre BloC en la documentación oficial https://bloclibrary.dev/docs/ así como en otros recursos en la web.

Comments are closed.