0

Tengo un app en la cual construyo una lista dinámica que viene de una petición a sqlite.

El método es de tipo stream<List<ScanModel>> getAllScans y lo llamo en un streamBuilder en mi home page, todo bien ahi.

El problema radica en que tengo un floatingActionButton que inserta datos a la bd newScan, yo lo que necesito es que cuando inserto ese nuevo scan quiero que la lista que estoy mostrando con mi streamBuilder se muestre el item que acabo de insertar sin la necesidad de hacer hot reload o hot restar o salirme de la pagina

Llevo hora investigando los streams viendo videos pero es algo complicado si me ayudan y me dan un empujón se los agradecería.

Este es el código del streamBuilder en homePage

return StreamBuilder(
                stream: DbProvider.db.getAllScans,
                builder: (context,AsyncSnapshot<List<ScanModel>> snapshot){

                  if(!snapshot.hasData){
                    
                    return Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: const [
                         CircularProgressIndicator.adaptive(),
                         SizedBox(height: 20,),
                         Text('Waiting for data...')
                      ],
                    );
                  }
                  
                  if(snapshot.hasData){
                    return AllScans(
                      scans: snapshot.data!,
                    );
                  }
                  else if(snapshot.hasError){
                    return const Center(child: Text('Something wrong!! :('));
                  }else{
                    return const Center(child: CircularProgressIndicator.adaptive(),);
                  }
                },
              );

Este es el floatingActionButton

return FloatingActionButton(
      splashColor: Colors.transparent,
      backgroundColor: Colors.lightGreen.shade300,
      child: const Icon(Icons.filter_center_focus,color: AppThemes.backgroundAppColor,),
      onPressed: () async {
      // aqui hago la insercion a la bd...
        await DbProvider.db.newScan(ScanModel(id: null , type: 'bla bla bla', value: 'COMO ESTASSSS.com'));

      }
    );

Código de getAllScans y el de insertar newScan

// Insert new scan
    Future<void> newScan(ScanModel scanModel) async {
      try {
        final insatance =  await db.database;
        await insatance.insert(scansTable, scanModel.toMap());
      } on Exception{
        debugPrint('❌ Something wrong to insert a new scan...');
      }
    }
    // get all scans
    Stream <List<ScanModel>> getAllScans() async*{
      try{
        final insatance =  await db.database;
        List<Map<String,dynamic>> scans = await insatance.query(scansTable);
        final List<ScanModel> result = scans.map((scan) => ScanModel.fromMap(scan)).toList();
        yield result;
      
      }on Exception{
        debugPrint('❌ Something wrong to get all scans...');
        //return[];
      }
    }
3
  • Puedes agregar el codigo de DbProvider.db.getAllScans y DbProvider.db.newScan(ScanModel Commented el 8 dic. 2022 a las 20:49
  • Ya agregue los metodos que me pediste diego, espero puedas aydarme, gracias por tu tiempo!
    – victorsdd
    Commented el 8 dic. 2022 a las 21:55
  • hmmm ya veo, es que al momento de insertar no se está notificando al stream por lo tanto no recibes nueva data, yo usaría otro approach. por cierto, si te animas a unirte, estamos en discord -> youtube.com/channel/UCFKZxStYsOVrzdN_FCZ0NGg/join compartiendo dudas / consultas Commented el 8 dic. 2022 a las 22:15

1 respuesta 1

1

Una forma de refrescar el estado es con StreamController + Streams, hice un ejemplo sencillo para que puedas ver como se lee información de un Stream y como se puede escuchar/notificar para refrescar el contenido.

introducir la descripción de la imagen aquí

El botón "más" por defecto añade un Color aleatorio.

Código:

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final bloc = MyBloc();

  @override
  void initState() {
    bloc.getAllColors();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<List<Color>?>(
        stream: bloc.myStream,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
          final data = snapshot.data!;
          return ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                return Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Container(
                    height: 200,
                    color: data[index],
                    child: FittedBox(
                      child: Text(
                        index.toString(),
                      ),
                    ),
                  ),
                );
              });
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.add),
        onPressed: () {
          final randomIndex = Random().nextInt(Colors.primaries.length);
          final randomColor = Colors.primaries[randomIndex];
          bloc.insertColor(randomColor);
        },
      ),
    );
  }
}

class MyBloc {
  final _controller = StreamController<List<Color>>.broadcast();
  Stream<List<Color>> get myStream => _controller.stream;
  List<Color>? _colors;

  void insertColor(Color color) {
    // Aquí puedes insertar en tu bd y a la vez notificar al StreamController
    _colors ??= <Color>[];
    _colors!.add(color);
    _controller.add(_colors!);
  }

  Future<void> getAllColors() async {
    // Simulamos un delay pequeño de prueba
    await Future.delayed(const Duration(seconds: 2));

    // Retornamos colores de ejemplo pero aquí podrías obtenerlo de tu base de datos
    _colors = <Color>[Colors.red, Colors.blue, Colors.black12];
    // Notificamos al StreamController
    _controller.add(_colors!);
  }
}

Ahora solo te queda aplicarlo al código que tienes, para que puedas notificar cada vez que agregas un ScanModel.

Te dejo un video completo en español sobre como poder gestionar el estado usando Streams https://www.youtube.com/watch?v=E3uw1q3eWAg

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.