1

Tengo un FutureBuilder que tiene un estructura básica.

FutureBuilder(
      future: api.sincronizacion(),
      builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
         ...
      })

El problema que presento es que por alguna extraña razón ejecuta mínimo 2 veces el método sincronizacion(), esto ocasiona que me genere errores con algunos otros métodos como inserciones a la base de datos con un mismo id que al ser PRIMARY KEY genera una excepción.

Una de las excepciones que se recibe.

SqfliteDatabaseException (DatabaseException(UNIQUE constraint failed: versions._id (code 1555 SQLITE_CONSTRAINT_PRIMARYKEY[1555])) sql 'INSERT INTO versions (_id, estabilidad, versionMayor, versionMenor, revision) VALUES (?, ?, ?, ?, ?)' args [5dc08909cad9c242119da306, beta, 1, 0, 12]})

Otra de las excepciones que se llega a presentar

Exception has occurred. SqfliteDatabaseException (DatabaseException(database_closed 1))


Ejemplo Sencillo

Este ejemplo simula la ejecución de manera sencilla de lo cual yo creo que es el problema con el Future utilizando una variable number para contar la cantidad de veces que entra al método sin reiniciar la instancia.

Al final de la carga en data regresa 3,2 y en una ocasión 4 lo cual solo debería ser 1 por que se espera solo 1 llamada al método _getData que incrementa number

main.dart

void main() => runApp(MyMaterialApp());

class MyMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('Ejecutando MyMaterialApp');
    return MaterialApp(
      home: SplashLoad(),
    );
  }
}

class SplashLoad extends StatefulWidget {

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

class _SplashLoadState extends State<SplashLoad> {
  final apiSimulation = new ApiSimulation();

  @override
  Widget build(BuildContext context) {
    print('SplashScreen');
    return Scaffold(
      body: Container(
        child: Center(
          child: FutureBuilder(
            future: apiSimulation.sincronizacion(),
            // initialData: InitialData,
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
              if (snapshot.hasData) {
                return Text('Carga completa data:${snapshot.data}');
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

ApiSimulation

simula un poco lo que sería la llamada de unos 4 segundos para obtener datos de un servidor y agregarlos a una base de datos.

class ApiSimulation {
  int number = 0;
  Future<int> sincronizacion()async{
    print('INICIANDO SINCRONIZACIÓN');
    await Future.delayed(Duration(seconds: 2));
    final data = await _getData();
    return data;
  }

  Future<int> _getData() async{
    number++;
    print('ejecutando getData$number');
    await Future.delayed(Duration(seconds: 2));
    return number;
  }
}

Resultado en consola

I/flutter (32404): Ejecutando MyMaterialApp
I/flutter (32404): SplashScreen
I/flutter (32404): INICIANDO SINCRONIZACIÓN
I/flutter (32404): Ejecutando MyMaterialApp
I/flutter (32404): SplashScreen
I/flutter (32404): INICIANDO SINCRONIZACIÓN
I/flutter (32404): ejecutando getData1
I/flutter (32404): ejecutando getData2

Fin de ejemplo


He realizado múltiples pruebas

  • Seguir la ejecución del código linea por linea con la herramienta de VisualStudioCode
  • Cambiar la implementación del método de static Future<List> sincronizacion() async {... a Future<List> sincronizacion() async { por si acaso ayuda
  • Modificar mi main pensando que el como se llamaba a la interfaz ocasionara que se llame 2 veces y eso al mismo tiempo ejecutar nuevamente sincronizacion()
    • Anteriormente
      MaterialApp(
          localizationsDelegates: [CustomLocalizationDelegate()],
          routes: getApplicationRoutes(),
          home: MyApp(),
          ...
      
    • Después donde getApplicationRoutes() contiene MyApp() en la ruta '/'
      MaterialApp(
          localizationsDelegates: [CustomLocalizationDelegate()],
          routes: getApplicationRoutes(),
          initialRoute: '/',
          ...
      

Las siguientes clases y métodos son de mi proyecto que presenta el problema.

main

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final auth = Auth();
  final prefs = new PreferenciasApp(); //singleton
  await prefs.initPrefs();

  runApp(Provider(
    auth: auth,
    child: MaterialApp(
      localizationsDelegates: [CustomLocalizationDelegate()],
      routes: getApplicationRoutes(),
      initialRoute: '/',
      theme: ThemeData(...),
    ),
  ));
}

getApplicationRoutes() en archivo routes.dart

// imports
...

final main = MyApp();
final home = Home(selectBottom: 0,);
final registro = Registro();
final inicioSesion = InicioSesionPlussUltraPower();
final playlist = PlaylisPage();
final inicio = Inicio();
final detallePlay = DetallePlay();

Map<String, WidgetBuilder> getApplicationRoutes() {    
  return <String, WidgetBuilder>{
    "/"           : (BuildContext context) => main,
    "/Himnario"           : (BuildContext context) => home,
    "/Registro"           : (BuildContext context) => registro,
    "/Inicio de sesión"   : (BuildContext context) => inicioSesion,
    "/PlayList"           : (BuildContext context) => playlist,
    "/Inicio"             : (BuildContext context) => inicio,
    DetallePlay.routeName : (BuildContext context) => detallePlay,
  };
}

MyApp

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final prefs = new PreferenciasApp();
  final api = new ApiService();
  @override
  Widget build(BuildContext context) {
    print('Ejecutando myApp------------------------->>>>>');
    
    return FutureBuilder(
      future: api.sincronizacion(),
      builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
        if (snapshot.hasData) {
          final result = snapshot.data;

          if (result[0] == null) {
            return Container(...),
            );

          } else {
            text = result[0] ? 'Carga completa' : 'Error en la carga.';
            var page = prefs.idUser.isEmpty ? Inicio() : InicioSesion();
            return SplashScreen(
               seconds: 1,
               navigateAfterSeconds: page,
               ...
            );
          }
        } //snapshot.hasData

        return Container(...);
      },
    ); // FutureBuilder
  }
}

1 respuesta 1

3

3 cosas:

1- Convierte MyApp en StatefulWidget.

2- Extrae final prefs = new PreferenciasApp(); y final api = new ApiService(); afuera del método build y dentro del State que crearás.

3- Saca las variables que tienes dentro del método getApplicationRoutes.

Map<String, WidgetBuilder> getApplicationRoutes() {
  
  final main = MyApp();
  final home = Home(selectBottom: 0,);
  final registro = Registro();
  final inicioSesion = InicioSesionPlussUltraPower();
  final playlist = PlaylisPage();
  final inicio = Inicio();
  final detallePlay = DetallePlay();

Estas recreando el ApiService por lo que el FutureBuilder detecta que son diferentes instancias y métodos al que estás llamando.

UPDATE

Luego de una pequeña investigación, encontré que hay 2 errores, pero de Flutter.

1- Por algún motivo el widget root se está refrescando muchas veces, dejo el link reportado que fue cerrado sin motivo: https://github.com/flutter/flutter/issues/23063

2- El FutureBuilder está recreando el future, esto no debería pasar, si bien el punto 1 podría suceder, pero el FutureBuilder debería mantener el future que se ejecutó y no volver a ejecutarlo.

Solución

Extrae el Future en el initState, de la siguiente manera.


class _SplashLoadState extends State<SplashLoad> {
  final apiSimulation = new ApiSimulation();
  Future<int> _value;

  @override
  void initState() {
    _value = apiSimulation.sincronizacion();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('SplashScreen');
    return Scaffold(
      body: Container(
        child: Center(
          child: FutureBuilder<int>(
            future: _value,
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
              if (snapshot.hasData) {
                return Text('Carga completa data:${snapshot.data}');
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Aplícalo a tu proyecto y si funciona nos cuentas :).

3
  • 2
    Funciono perfectamente con el ejemplo al igual que con mi proyecto principal, Supongo que el problema del futureBuilder sera solucionado en próximas versiones o cambiara la forma en la que se debe utilizar.
    – Richard
    Commented el 24 jul. 2021 a las 6:31
  • 3
    @Richard podrian limpiar la tira de comentario, y dejar solo los que realmente aporten algo? gracias
    – gbianchi
    Commented el 24 jul. 2021 a las 17:36
  • @gbianchi los limpiaron todos :O
    – Alvaro Montoro
    Commented el 29 jul. 2021 a las 12:42

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.