Flutter best way for splash / loading screen

Question

I have a flutter app connected to firebase (firestore).

When the user opens the app, I check if he's a user type 1 or user type 2. + load images from the web etc.

But it takes maybe a second to do all these things. What's the best way to make / implement a loading screen / splash screen that shows up until everything is loaded?

Thanks!

Answer 1

One of the way to do this is using FutureBuilder. The code snippet that I used in my application is given below

FutureBuilder(
    future: _getData(), // the function to get your data from firebase or firestore
    builder : (BuildContext context, AsyncSnapshot snap){
        if(snap.data == null){
            //return loading widget
        }
        else{
            //return the widget that you want to display after loading
        } 
    }
);

The AsyncSnapshot is returned by the function in "future" i.e. in this case _getData().

Answer 2

You can use Splashscreen plugin, which offers seconds to delay routing to the next page so you can perform your checks, it also has a navigateAfterSeconds which you can write your condition in.

Example:

SplashScreen(
  seconds: 3,
  navigateAfterSeconds: HomePage(),
  title: Text('Splash'),
  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0, color: Colors.blueGrey),),
  image: Image.asset('assets/images/icon2.png',),
  backgroundColor: Colors.white,
  styleTextUnderTheLoader: TextStyle(),
  photoSize: 100.0,
  loaderColor: Colors.blue,
  loadingText: Text('initializing...'),
)

Answer 3

My solution is to define a Widget that will display a loading animation and will do some backgroundwork at the same time.

The widget takes a widget that represents the "loading animation" and a function that will be executed in the background.

This is taken from https://github.com/Ephenodrom/EZ-Flutter.

You can find a documentation at https://ez-flutter.de/docs/transition

import 'package:flutter/material.dart';

///
/// Widget for displaying loading animation and doing background work at the same time.
///
class EzTransition extends StatefulWidget {
  EzTransition(this.child, this.toProcess, {this.backgroundColor});

  final Function() toProcess;
  final Widget child;
  final Color backgroundColor;

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

class _EzTransitionState extends State<EzTransition> {
  @override
  void initState() {
    super.initState();
    widget.toProcess();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: getBackgroundColor(),
      child: widget.child,
    );
  }

  Color getBackgroundColor() {
    return widget.backgroundColor == null
        ? Theme.of(context).backgroundColor
        : widget.backgroundColor;
  }
}

Answer 4

I believe the best option, as you don't know exactly how much time it will take is a FutureBuilder which will display a loading animation while you are loading