Ajout d'un écran de démarrage aux applications Flutter


143

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 ne sais pas si c'est la bonne façon d'ajouter un écran de démarrage en définissant une minuterie personnalisée, je n'aime pas garder les processeurs inactifs, pourquoi ne pas effectuer certaines tâches d'entretien ménager comme vérifier les fichiers ou répertoires requis ou synchroniser certains journaux, ou sauvegarder certains fichiers dans le arrière-plan et faites la marque sur le devant dans le temps moyen.Après les 3-4 secondes, c'est beaucoup de temps pour un processeur.
maheshmnj

1
Ce lien explique comment faire: flutter.dev/docs/development/ui/splash-screen
live-love

Réponses:


251

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).

  1. 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, LaunchImage@2x.png, 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 LaunchImage@2x.png,
  • l'image de densité 3 doit remplacer LaunchImage@3x.png,
  • l'image avec une densité 4 doit remplacer LaunchImage@4x.png,

Si je ne me trompe pas, LaunchImage@4x.png n'existe pas par défaut, mais vous pouvez facilement en créer un. Si LaunchImage@4x.png 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" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "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


4
J'ai eu une erreur Cannot resolve symbol '@mipmap/ic_launcher'dans Android Studio 3.1.1 (même après la reconstruction du cache), cependant, l'application compilée et exécutée sans erreur, et le graphique du lanceur s'affiche.
IanB

1
J'ai le même problème, cependant, je ne peux pas l'exécuter car au moment de l'exécution, il se bloque et me dit que l'image est manquante. mais il ne peut pas résoudre mipmap pour une raison quelconque. Quelqu'un a-t-il une idée de pourquoi?
carlosx2

1
Salut les gars, je ne sais pas pourquoi vous avez ce problème, mais pour moi, cela ressemble à un problème de synchronisation de projet (il n'y a aucune autre raison de ne pas trouver la ressource si elle est là). Je ne sais pas comment le résoudre car je n'ai jamais eu ce problème, mais essayez de synchroniser le projet, nettoyer, reconstruire, etc. quoi que ce soit possible dans votre IDEA. Essayez également d'utiliser la ressource dans le dossier dessinable et remplacez l'annotation mipmap par une annotation dessinable. Je devine juste maintenant :)
Stoycho Andreev

1
Curieux de savoir pourquoi vous ajoutez l'image 4x. XCode semble n'attendre que 3x, y a-t-il une raison pour laquelle vous ajoutez le 4x?
sbilstein

3
La documentation officielle a cela couvert.
rmalviya le


22

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


7
L'écran de démarrage blanc par défaut s'affichera toujours pendant plus de 1 secondes avant que celui-ci personnalisé ne s'affiche. Vous devez remplacer les projets xcode et android générés pour l'éliminer.
d3vtoolsmith

Oui. L'écran spalsh par défaut dans iOS et Android apparaîtra toujours, cet écran de démarrage flottant s'ajoute à cela.
Mahesh Peri

Le fait est que cet exemple n'est pas fiable ... Que faire si votre application se charge pendant plus de 3 secondes pour des raisons telles que la connectivité réseau?
emanuel sanga le

Pour une personnalisation supplémentaire, je soutiens davantage cette réponse. Je souhaite d'abord effectuer une requête HTTP tout en affichant un écran de démarrage. Cette approche était beaucoup plus facile
Idris Stack

16

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 .


Y a-t-il un exemple comment ajouter réellement un écran de démarrage. Lorsque je démarre le nouveau modèle, je ne vois pas d'écran de démarrage
Ride dim

@RideSun s'il vous plaît voir ma réponse
Stoycho Andreev

1
Comment puis-je prolonger la durée de vie de l'écran de démarrage? dois-je changer du code dans l'activité?
zero.zero.seven

Mais j'ai besoin de plus, par exemple lorsque pendant le démarrage, puis la création / l'importation de la base de données locale, puis uniquement le
début du

14

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" />

cela a fonctionné pour moi ... mais la partie iOS ... ne joue pas si bien
IrishGringo


Je l'ai compris ... apparemment, l'image iOS était mauvaise. iOS et ANDROID fonctionnent parfaitement maintenant. fausse alarme
IrishGringo

@SmrutiRanjanRana quelle est la taille idéale pour cette image?
Mattias

1
Cette réponse serait beaucoup plus utile s'il y avait un exemple de l'emplacement de l'image. Sinon, l'utilisateur doit deviner comment ajouter le chemin.
Robin Manoli

13

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

entrez la description de l'image ici

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.


8

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

pouvez-vous s'il vous plaît poster le code complet (un code que nous pouvons exécuter indépendamment sans avoir besoin de définir nos variables) ou un lien github?
biniam

8

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


Votre IDE vous le dira une fois que vous passez votre curseur sur l'erreur
Ojonugwa Jude Ochalifu

7

@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


1
S'il vous plaît, lorsque vous créez un lien vers une autre page en dehors de SO, postez ici la partie de réponse du contenu pour éviter les liens morts.
rak007

4

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


4

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" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

4

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

entrez la description de l'image ici


Ajouter des dépendances => dynamic_theme: ^ 1.0.1
Champ 96k

Il n'y a pas d'importation pour SplashScreen
Tuss

oui exactement ça, il y a un certain nombre de façons de faire cela, mais dans la réponse, je vais vous dire comment vous pouvez ajouter un écran de démarrage à l'aide de ce package pub.dev/packages/dynamic_theme
Champ 96k

4

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

3

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

2
Pouvez-vous aussi ajouter quelques explications? Un bloc de code simple à lui seul n'est pas si informatif
CertainPerformance

3

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

3

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. entrez la description de l'image ici

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.

entrez la description de l'image ici


3

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

entrez la description de l'image ici

É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/

entrez la description de l'image ici

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"

entrez la description de l'image ici

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


0

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



0

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


-2
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),
    ),
  );
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.