While the app's splash screen is displayed, it needs to download files from the FTP server and process data. Implemented splash screen for flutter

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

  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      future: Future.delayed(Duration(seconds: 3)),
      builder: (BuildContext context, AsyncSnapshot snapshot){
        if(snapshot.connectionState == ConnectionState.waiting)
          return SplashUI();    ///Splash Screen
        else
          return MainUI();       ///Main Screen
      },
    );
  }
}

Now, with a delay of 3 seconds, the startup screen is displayed for 3 seconds, during which time the file is downloaded from FTP and data is processed. I want to keep the splash screen until the completion of data processing rather than the specified time.

Splash Screen

Widget _splashUI(Size size){
    return SafeArea(
      child: Center(
        child: Container(
          width: size.width * 0.5,
          height: size.height * 0.1,
          child: Image(
            fit: BoxFit.fill,
            image: AssetImage('assets/images/elf_logo.png'),
          ),
        ),
      ),
    );
  }

 Widget build(BuildContext context) {

 getFtpFile();
 dataProgress();

 return Platform.isAndroid ?
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: _splashUI(_size),
      ),
    ) :
    CupertinoApp(
      debugShowCheckedModeBanner: false,
      home: CupertinoPageScaffold(
        child: _splashUI(_size),
      ),
    );
 }

I want to know how to keep SplashScreen while processing data rather than handling SplashScreen with delayed. thank you.

CodePudding user response：

to keep SplashScreen while processing data rather than handling SplashScreen with delayed.

Why not change the delayed?

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

  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      future: _processingData(),
      builder: (BuildContext context, AsyncSnapshot snapshot){
        if(snapshot.connectionState == ConnectionState.waiting)
          return SplashUI();    ///Splash Screen
        else
          return MainUI();       ///Main Screen
      },
    );
  }

  Future<List> _processingData() {
    return Future.wait[
      _getFtpFile(),
      _dataProgress(),
    ];
  }
}

CodePudding user response：

You could do like other people have done in the past; you should make both of your methods getFTPFile and dataProgress return a Future, then you wait for both Futures using Future.wait, as in this answer https://stackoverflow.com/a/54465973/871364

Future.wait([
   getFTPFile(),
   dataProgress(),     
], () {
  // once all Futures have completed, navigate to another page here
});

CodePudding user response：

I am new to Flutter so this in no means a perfect answer, however I hope this segment of code from my personal project help. I think you may need to put a second check on your if statement for when the data is completely downloaded and switch your statement to check for "ConnectionState.done". Then remove the "else" and simply return your splash screen until the ConnectionState is done.

Align(
                      alignment: Alignment.centerRight,
                      child: FutureBuilder<SettingsModal>(
                        future: PreferencesService.getSettings(),
                        builder: (context, snapshot) {
                          if (snapshot.hasData && snapshot.connectionState == ConnectionState.done) {
                            return Text(
                              snapshot.data!.username,
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 20.0,
                              ),
                            );
                          }
                          return CircularProgressIndicator();
                        },
                      )),