Ajout d'un écran d'accueil aux applications Flutter

Question

Quelle approche adopteriez-vous pour ajouter un écran d'accueil aux applications Flutter ? Il doit être chargé et affiché avant tout autre contenu. Actuellement, il y a un bref flash de couleur avant le chargement du widget Scaffold(home:X).

Answer 1

Je veux apporter un peu plus de lumière sur la façon actuelle de faire un Splash screen dans Flutter.

J'ai suivi un peu la trace ici et j'ai vu que les choses ne sont pas si mal en ce qui concerne le Splash Screen dans Flutter.

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

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

Voici comment vous pouvez le faire, étape par étape :

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

1. Trouvez le dossier "Android" dans votre projet Flutter.

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

• l'image avec la densité 1 doit être placée dans mipmap-mdpi,
• l'image avec une densité de 1,5 doit être placée dans mipmap-hdpi,
• l'image avec la densité 2 doit être placée dans mipmap-xhdpi,
• l'image avec la densité 3 doit être placée dans mipmap-xxhdpi,
• l'image avec la densité 4 doit être placée dans mipmap-xxxhdpi,

Par défaut, dans le dossier Android, il n'y a pas de drawable-mdpi, drawable-hdpi, etc., mais nous pouvons les créer si nous le souhaitons. De ce fait, les images doivent être placées dans les dossiers mipmap. De plus, le code XML par défaut concernant le Splash screen (dans Android) va utiliser @mipmap, au lieu de @drawable resource (vous pouvez le changer si vous le souhaitez).

3. La dernière étape sur Android est de décommenter une partie du code XML dans le fichier drawable/launch_background.xml. Allez dans 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 la modification, le code devrait ressembler à ceci :

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

Veuillez noter que nous commentons le code XML pour le fond blanc et décommentons le code pour 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. Trouvez le dossier "ios" dans votre projet Flutter.

2. Allez dans Runner -> Assets.xcassets -> LaunchImage.imageset. Il devrait y avoir LaunchImage.png, LaunchImage@2x.png, etc. Vous devez maintenant remplacer ces images par les variantes de votre image de marque. Par exemple :

• l'image avec la densité 1 doit remplacer LaunchImage.png,
• l'image avec la densité 2 doit primer sur LaunchImage@2x.png,
• l'image avec la densité 3 doit primer sur LaunchImage@3x.png,
• l'image avec la densité 4 doit primer sur 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 le déclarer dans le fichier Contents.json également, 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 lancerez votre application, sur Android ou iOS, vous devriez avoir le bon Splash Screen avec l'image de marque que vous avez ajoutée.

Merci

Answer 2

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

Answer 3

Il n'y a pas encore de 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/tooling/publishing/creating-launch-screens-ios

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

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

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

Answer 4

Pour Android, allez sur Android > app > src > main > res > drawable > launcher_background.xml

Maintenant, décommentez ceci et remplacez @mipmap/launch_image avec 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" />

Answer 5

Vous devriez essayer le code ci-dessous, il 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,
      )),
    ),
  );
}
}