Comment aborderiez-vous l'ajout d'un écran de démarrage aux applications Flutter? Il doit se charger et s'afficher avant tout autre contenu. Actuellement, il y a un bref éclair de couleur avant le chargement du widget Scaffold (home: X).

Je veux apporter un peu plus de lumière sur la manière réelle de créer un écran Splash dans Flutter.

J'ai suivi un peu la trace ici et j'ai vu que les choses ne sont pas si mauvaises à propos du Splash Screen dans Flutter.

Peut-être que la plupart des développeurs (comme moi) pensent qu'il n'y a pas d'écran Splash par défaut dans Flutter et qu'ils doivent faire quelque chose à ce sujet. Il y a un écran de démarrage, mais il est sur fond blanc et personne ne peut comprendre qu'il existe déjà un écran de démarrage pour iOS et Android par défaut.

La seule chose que le développeur doit faire est de mettre l'image de marque au bon endroit et l'écran de démarrage commencera à fonctionner comme ça.

Voici comment procéder étape par étape:

D'abord sur Android (car c'est ma plateforme préférée :))

1. Recherchez le dossier "android" dans votre projet Flutter.

2. Accédez au dossier app -> src -> main -> res et placez toutes les variantes de votre image de marque dans les dossiers correspondants. Par exemple:

• l'image de densité 1 doit être placée dans mipmap-mdpi,
• l'image de densité 1.5 doit être placée dans mipmap-hdpi,
• l'image de densité 2 doit être placée dans mipmap-xdpi,
• l'image de densité 3 doit être placée dans mipmap-xxdpi,
• l'image de densité 4 doit être placée dans mipmap-xxxdpi,

Par défaut dans le dossier android, il n'y a pas drawable-mdpi, drawable-hdpi, etc., mais nous pouvons les créer si nous le voulons. Pour cette raison, les images doivent être placées dans les dossiers mipmap. De plus, le code XML par défaut de l'écran de démarrage (sous Android) utilisera @mipmap, au lieu de @drawable resource (vous pouvez le changer si vous le souhaitez).

3. La dernière étape sur Android consiste à décommenter une partie du code XML dans le fichier drawable / launch_background.xml. Accédez à app -> src -> main -> res-> drawable et ouvrez launch_background.xml. Dans ce fichier, vous verrez pourquoi l'arrière-plan de l'écran Slash est blanc. Pour appliquer l'image de marque que nous avons placée à l'étape 2, nous devons décommenter une partie du code XML dans votre fichier launch_background.xml. Après le changement, le code devrait ressembler à:

    <!--<item android:drawable="@android:color/white" />-->
   
    <item>
   
        <bitmap
            android:gravity="center"
            android:src="@mipmap/your_image_name" />
   
    </item>

Veuillez faire attention que nous commentons le code XML pour l'arrière-plan blanc et décommentons le code sur l'image mipmap. Si quelqu'un est intéressé, le fichier launch_background.xml est utilisé dans le fichier styles.xml.

Deuxième sur iOS:

1. Recherchez le dossier «ios» dans votre projet Flutter.

2. Accédez à Runner -> Assets.xcassets -> LaunchImage.imageset. Il devrait y avoir LaunchImage.png, [email protected], etc. Vous devez maintenant remplacer ces images par vos variantes d'image de marque. Par exemple:

• l'image de densité 1 doit remplacer LaunchImage.png,
• l'image de densité 2 doit remplacer [email protected],
• l'image de densité 3 doit remplacer [email protected],
• l'image avec une densité 4 doit remplacer [email protected],

Si je ne me trompe pas, [email protected] n'existe pas par défaut, mais vous pouvez facilement en créer un. Si [email protected] n'existe pas, vous devez également le déclarer dans le fichier Contents.json, qui se trouve dans le même répertoire que les images. Après la modification, mon fichier Contents.json ressemble à ceci:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Cela devrait être tout ce dont vous avez besoin, la prochaine fois que vous exécuterez votre application, sur Android ou iOS, vous devriez avoir le bon écran de démarrage avec l'image de marque que vous avez ajoutée.

Merci

Si vous flutter createcréez votre projet, vous pouvez suivre les étapes à l' adresse https://flutter.io/assets-and-images/#updating-the-launch-screen .

Flutter offre en fait un moyen plus simple d'ajouter Splash Screen à notre application. Nous devons d'abord concevoir une page de base lorsque nous concevons d'autres écrans d'application. Vous devez en faire un StatefulWidget car l'état de celui-ci changera dans quelques secondes.

import 'dart:async';
import 'package:flutter/material.dart';
import 'home.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 3),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => HomeScreen())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/splash.png'),
      ),
    );
  }
}

Logique Dans initState () , appelez un Timer () avec la durée, comme vous le souhaitez, je l'ai fait 3 secondes, une fois fait pousser le navigateur sur l'écran d'accueil de notre application.

Remarque: l'application ne doit afficher l'écran de démarrage qu'une seule fois, l'utilisateur ne doit pas y revenir en appuyant sur le bouton de retour. Pour cela, nous utilisons Navigator.pushReplacement () , il se déplacera vers un nouvel écran et supprimera l'écran précédent de la pile d'historique de navigation.

Pour une meilleure compréhension, visitez Flutter: Concevez votre propre écran de démarrage

Il n'y a pas encore un bon exemple de cela, mais vous pouvez le faire vous-même en utilisant les outils natifs de chaque plateforme:

iOS: https://docs.nativescript.org/publishing/creating-launch-screens-ios

Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

Abonnez-vous au numéro 8147 pour obtenir des mises à jour sur des exemples de code pour les écrans de démarrage. Si le scintillement noir entre l'écran de démarrage et l'application sur iOS vous dérange, abonnez-vous au numéro 8127 pour les mises à jour.

Edit: Depuis le 31 août 2017, une prise en charge améliorée des écrans de démarrage est désormais disponible dans le nouveau modèle de projet. Voir # 11505 .

Pour Android, accédez à android> app> src> main> res> drawable> launcher_background.xml

Décommentez maintenant ceci et remplacez @ mipmap / launch_image , par l'emplacement de votre image.

<item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

Vous pouvez changer la couleur de votre écran ici -

<item android:drawable="@android:color/white" />

Le moyen le plus simple d'ajouter un écran de démarrage dans Flutter est à mon avis ce package: https://pub.dev/packages/flutter_native_splash

Guide d'installation (par l'auteur du package):

1. Configuration de l'écran de démarrage

Ajoutez vos paramètres au fichier pubspec.yaml de votre projet ou créez un fichier dans le dossier racine de votre projet nommé flutter_native_splash.yaml avec vos paramètres.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"

l'image doit être un fichier png.

Vous pouvez également utiliser # en couleur. color: "# 42a5f5" Vous pouvez également définir android ou ios sur false si vous ne souhaitez pas créer un écran de démarrage pour une plate-forme spécifique.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false

Dans le cas où votre image devrait utiliser tout l'écran disponible (largeur et hauteur), vous pouvez utiliser la propriété fill.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  fill: true

Remarque: la propriété fill n'est pas encore implémentée pour les écrans de démarrage iOS.

Si vous souhaitez désactiver l'écran de démarrage en plein écran sur Android, vous pouvez utiliser la propriété android_disable_fullscreen.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true

2. Exécutez le package

Après avoir ajouté vos paramètres, exécutez le package avec

flutter pub pub run flutter_native_splash:create Lorsque le package a fini d'exécuter votre écran de démarrage est prêt.

Vous devriez essayer le code ci-dessous, a fonctionné pour moi

import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';

class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {


void handleTimeout() {
  Navigator.of(context).pushReplacement(new MaterialPageRoute(
    builder: (BuildContext context) => new MyHomePage()));
}

startTimeout() async {
  var duration = const Duration(seconds: 3);
  return new Timer(duration, handleTimeout);
}

@override
void initState() {
  // TODO: implement initState
  super.initState();

  _iconAnimationController = new AnimationController(
      vsync: this, duration: new Duration(milliseconds: 2000));

  _iconAnimation = new CurvedAnimation(
      parent: _iconAnimationController, curve: Curves.easeIn);
  _iconAnimation.addListener(() => this.setState(() {}));

  _iconAnimationController.forward();

  startTimeout();
}

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Scaffold(
      body: new Center(
        child: new Image(
        image: new AssetImage("images/logo.png"),
        width: _iconAnimation.value * 100,
        height: _iconAnimation.value * 100,
      )),
    ),
  );
}
}

les personnes qui obtiennent l'erreur comme l'image introuvable après l'application de la réponse vérifiée, assurez-vous d'ajouter @ mipmap / ic_launcher au lieu de @ mipmap / ic_launcher.png

@Collin Jackson et @Sniper ont raison. Vous pouvez suivre ces étapes pour configurer les images de lancement dans Android et iOS respectivement. Ensuite, dans votre MyApp (), dans votre initState (), vous pouvez utiliser Future.delayed pour configurer une minuterie ou appeler n'importe quelle api. Jusqu'à ce que la réponse soit renvoyée du futur, vos icônes de lancement seront affichées, puis au fur et à mesure que la réponse viendra, vous pouvez vous déplacer vers l'écran vers lequel vous souhaitez accéder après l'écran de démarrage. Vous pouvez voir ce lien: Flutter Splash Screen

L'ajout d'une page comme ci-dessous et le routage peuvent aider

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.redAccent),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 50.0,
                        child: Icon(
                          Icons.shopping_cart,
                          color: Colors.greenAccent,
                          size: 50.0,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 10.0),
                      ),
                      Text(
                        Flutkart.name,
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Padding(
                      padding: EdgeInsets.only(top: 20.0),
                    ),
                    Text(
                      Flutkart.store,
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                          color: Colors.white),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

Si vous souhaitez poursuivre, voir: https://www.youtube.com/watch?v=FNBuo-7zg2Q

Plusieurs façons de le faire, mais la plus simple que j'utilise est:

Pour les icônes de lancement, j'utilise la bibliothèque de flutter Flutter Launcher Icon

Pour l'écran de démarrage personnalisé démarrage je crée différentes résolutions d'écran, puis j'ajoute les images de démarrage dans le dossier mipmap selon la résolution pour Android.

La dernière partie ajuste le launch_background.xml dans le dossier drawable dans le dossier res d'Android.

Changez simplement votre code pour qu'il ressemble à ci-dessous:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- <item android:drawable="@android:color/white" />
    <item android:drawable="@drawable/<splashfilename>" />     --> -->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
    </item>
</layer-list>

Peu de développeurs que j'ai vu ajouter le splash comme dessinable, j'ai essayé ceci mais d'une manière ou d'une autre, la construction échoue dans Flutter 1.0.0 et Dart SDK 2.0+. Par conséquent, je préfère ajouter le splash dans la section bitmap.

La création d'un écran de démarrage iOS est plutôt plus simple.

Dans le dossier Runner sous iOS, mettez simplement à jour les fichiers LaunchImage.png avec vos images d'écran Splash personnalisées avec les mêmes noms que LaunchImage.png @ 2x, @ 3x, @ 4x.

Juste un ajout, je pense que c'est bien d'avoir une image 4x aussi dans le LaunchImage.imageset. Mettez simplement à jour votre code dans Content.json avec les lignes suivantes, en dessous de l'échelle 3x pour ajouter une option d'échelle 4x:

{
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "4x"
    }

rendre votre application matérielle comme celle-ci

=> Ajouter une dépendance

=> import import 'package: splashscreen / splashscreen.dart';

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:tic_tac_toe/HomePage.dart';
void main(){
  runApp(
    MaterialApp(
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: new MyApp(),
    )
  );
}

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 26.0,
        color: Colors.purple,
       ),
      ),
      image: Image.asset("images/pic9.png"),
      backgroundColor: Colors.white,
      photoSize: 150.0,
    );
  }
}

La sortie finale de l'écran comme celle-ci, vous pouvez changer la seconde en fonction de vos besoins, le cercle sera rond circulaire

C'est le meilleur moyen d'ajouter un écran de démarrage dynamique dans Flutter.

MAIN.DART

import 'package:flutter/material.dart';
import 'constant.dart';

void main() => runApp(MaterialApp(
      title: 'GridView Demo',
      home: SplashScreen(),
      theme: ThemeData(
        primarySwatch: Colors.red,
        accentColor: Color(0xFF761322),
      ),
      routes: <String, WidgetBuilder>{
        SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
        HOME_SCREEN: (BuildContext context) => BasicTable(),
        //GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
      },
    ));

SPLASHSCREEN.DART

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.dart';


class SplashScreen extends StatefulWidget {
  @override
  SplashScreenState createState() => new SplashScreenState();
}

class SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async {
    var _duration = new Duration(seconds: 3);
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  }

@override
dispose() {
  animationController.dispose();  
  super.dispose();
}

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 2),
    );
    animation =
        new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() {}));
    animationController.forward();

    setState(() {
      _visible = !_visible;
    });
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(bottom: 30.0),
                child: new Image.asset(
                  'assets/images/powered_by.png',
                  height: 25.0,
                  fit: BoxFit.scaleDown,
                ),
              )
            ],
          ),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

CONSTANTS.DART

String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';

HOMESCREEN.DART

import 'package:flutter/material.dart';

class BasicTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Table Widget")),
      body: Center(child: Text("Table Widget")),
    );
  }
}

Le code de Jaldhi Bhatt ne fonctionne pas pour moi.

Flutter lance une opération ' Navigator demandée avec un contexte qui n'inclut pas de Navigator .'

J'ai corrigé le code enveloppant le composant consommateur Navigator à l'intérieur d'un autre composant qui initialise le contexte Navigator à l'aide de routes, comme mentionné dans cet article.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';

class SplashView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Builder(
          builder: (context) => new _SplashContent(),
        ),
        routes: <String, WidgetBuilder>{
          '/main': (BuildContext context) => new MainView()}
    );
  }
}

class _SplashContent extends StatefulWidget{

  @override
  _SplashContentState createState() => new _SplashContentState();
}

class _SplashContentState extends State<_SplashContent>
    with SingleTickerProviderStateMixin {

  var _iconAnimationController;
  var _iconAnimation;

  startTimeout() async {
    var duration = const Duration(seconds: 3);
    return new Timer(duration, handleTimeout);
  }

  void handleTimeout() {
    Navigator.pushReplacementNamed(context, "/main");
  }

  @override
  void initState() {
    super.initState();

    _iconAnimationController = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 2000));

    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeIn);
    _iconAnimation.addListener(() => this.setState(() {}));

    _iconAnimationController.forward();

    startTimeout();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Image(
          image: new AssetImage("images/logo.png"),
          width: _iconAnimation.value * 100,
          height: _iconAnimation.value * 100,
        )
    );
  }
}

Si vous souhaitez un écran de démarrage secondaire (après le natif), voici un exemple simple qui fonctionne:

class SplashPage extends StatelessWidget {
  SplashPage(BuildContext context) {
    Future.delayed(const Duration(seconds: 3), () {
      // Navigate here to next screen
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Splash screen here');
  }
}

Flutter vous offre la possibilité d'avoir un écran de démarrage par défaut, mais il existe de nombreux plugins qui peuvent faire le travail. Si vous ne souhaitez pas utiliser de plugin pour la tâche et que vous craignez que l'ajout d'un nouveau plugin puisse affecter la taille de votre application. Ensuite, vous pouvez le faire comme ça.

Pour Android

Ouvrez launch_background.xml puis vous pouvez mettre l'image de l'écran de démarrage ou la couleur de dégradé que vous souhaitez. C'est la première chose que voit votre utilisateur lorsqu'il ouvre votre application.

Pour IOS

Ouvrez votre application en utilisant Xcode, cliquez sur Runner> Assest.xcassets> LaunchImage, vous pouvez ajouter l'image ici. Si vous souhaitez modifier la position que l'image de l'écran de lancement doit prendre ou ressembler à celle-ci, vous pouvez la modifier sur LaunchScreen.storyboard.

Voici les étapes de configuration de l'écran de démarrage sur les plates-formes IOS et Android pour votre application Flutter.

Plateforme IOS

Toutes les applications soumises à l'App Store d'Apple doivent utiliser un storyboard Xcode pour fournir l'écran de lancement de l'application. Faisons cela en 3 étapes: -

Étape 1 : Ouvrez ios / Runner.xcworkspace à partir de la racine de votre répertoire d'applications.

Étape 2 : Sélectionnez Runner / Assets.xcassets dans le navigateur de projet et faites glisser vos images de lancement de toutes tailles (2x, 3x, etc.). Vous pouvez également générer différentes tailles d'images à partir de https://appicon.co/#image-sets

Étape 3 : Vous pouvez voir que le fichier LaunchScreen.storyboard affiche l'image fournie, ici vous pouvez également changer la position de l'image en faisant simplement glisser l'image. Pour plus d'informations, veuillez consulter la documentation officielle https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Plateforme Android

Sous Android, un écran de lancement s'affiche pendant l'initialisation de votre application Android. Définissons cet écran de lancement en 3 étapes: -

Étape 1 : Ouvrez le fichier android / app / src / main / res / drawable / launch_background.xml.

Étape 2 : À la ligne numéro 4, vous pouvez sélectionner la couleur souhaitée: -

<item android:drawable="@android:color/white" />

Étape 3 : À la ligne numéro 10, vous pouvez changer l'image: -

android:src="@mipmap/launch_image"

C'est tout, vous avez terminé! Bon codage :)

Pour l'
application Android -> src -> main -> res -> drawble-> launch_background.xml et décommentez le bloc commenté comme ceci

<item>
  <bitmap
      android:gravity="center"
      android:src="@mipmap/launch_image" /></item>

y a-t-il une erreur après un codage comme celui-ci
Utilisez la synchronisation avec le système dans le studio Android ou invalidez le cache et réinitialisez.Cela a résolu mon problème En mode de débogage de flutter, prenez un certain temps pour l'écran de démarrage. Après la construction, il se réduira comme Android natif

Flutter.dev donne déjà la meilleure réponse, ce n'est pas un bogue ni un problème, juste config. Prenez le temps de lire et tout sera résolu. Très bonne journée à tous.

https://flutter.dev/docs/development/ui/advanced/splash-screen

Vous pouvez le créer de deux manières

1. Accédez au package natif et à une page initiale. comme dans le package Android natif, créez un dessin
2. Créez un écran de fléchettes à afficher pendant un certain temps

J'ai trouvé une explication complète pour supprimer l'écran blanc et afficher l' écran de démarrage ici

SplashScreen(
          seconds: 3,
          navigateAfterSeconds: new MyApp(),
          // title: new Text(
          //   'Welcome In SplashScreen',
          //   style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          // ),
          image: new Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png'),
          backgroundColor: Colors.white,
          styleTextUnderTheLoader: new TextStyle(),
          photoSize: 150.0,
          loaderColor: Colors.black),
    ),
  );