CODEWITHSUNDEEP
flutterdartsplash-screen
Jungwon
Jungwon

Reputation: 996

Flutter How to show splash screen only while loading flutter data

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.

Upvotes: 3

Views: 9570

Answers (3)

jon
jon

Reputation: 3600

The package flutter_native_splash does exactly what you are asking for. Make a call to FlutterNativeSplash.preserve() before your runApp() to keep the splash on screen, then FlutterNativeSplash.remove(); when your download completes:

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

// when your download is completed, remove the splash screen:
    FlutterNativeSplash.remove();

Full disclosure: I maintain this package.

Upvotes: 7

Faruk
Faruk

Reputation: 5821

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(),
    ];
  }
}

Upvotes: 6

Roman Jaquez
Roman Jaquez

Reputation: 2779

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
});

Upvotes: 1

Related Questions