Mise en place d'un splash screen avec Flutter

Flutter
1

Hello tout le monde et bonne année :slight_smile:

Je viens de me remettre sur le développement Flutter et je coince déjà sur un mini sujet :@

J’aimerais mettre un splash screen en démarrage de mon appli et pour l’instant j’arrive juste à afficher un écran blanc sans mon logo.
J’ai vu qu’il existait une bibliothèque qui permettait de créer un splash screen avec des fonctionnalités un peu plus avancées.

Est-ce que quelqu’un a déjà réussi à implémenter cette fonctionnalité ? De quelle manière ?

Je vous mets mon code si jamais quelqu’un voit où est mon erreur …

Merci d’avance pour votre aide !

Fichier styles.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <!-- Passage de la splashScreen en fullScreen -->
        <!-- <item name="android:windowFullscreen">true</item> -->
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

Fichier launch_background.xml

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

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/bolet_poi_icon" />
    </item>
</layer-list>
2

Salut @Tazooou, merci bonne année à toi aussi!

Pour la configuration du splash screen sur iOS et Android je te conseille effectivement d’utiliser le package flutter_native_splash (Flutter Favorite👍).

Voici une configuration basique à mettre dans pubspec.yaml :

flutter_native_splash:
  color: "#FFFFFF"
  image: assets/app_icon.png
  android_12:
    image: assets/app_icon.png'

Une fois la configuration effectuée, il suffit d’exécuter la commande suivante dans le terminal en étant dans le dossier de ton projet Flutter :

dart run flutter_native_splash:create

Une des possibilités intéressante de ce package est de pouvoir maintenir l’affichage du splash screen le temps de charger les données nécessaires au démarrage de l’app.
Pour cela il faut ajouter la ligne FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding) dans le main comme ceci:

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() async {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
// Chargement des données nécessaires au lancement de l'app
  await loadDataBeforeRunningApp();
  runApp(const MyApp());
}

Ensuite dans le initState() de ton StatefulWidget principal de ton app tu peux relâcher le splash screen comme ceci:

class MyApp extends StatefulWidget {
  const MyApp({Key? key, required this.routerDelegate}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    FlutterNativeSplash.remove();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    ...
  }
}

J’espère que cette réponse t’aidera.

Bonne journée

3

Merci Quentin ! Tu me confirmes ce que j’avais en tête. J’essaie de mettre ça en place dans la journée :slight_smile:

4

Et splash !!! Merci @Quentin :wink:
Pour l’instant c’est KO sur iOS mais j’ai vu que c’était plus capricieux. Je vais regarder les recommandations de la documentation.

Screenshot_20240124-163713
Screenshot_20240124-1637131080×2280 61.7 KB

1 « J'aime »
5

Par contre j’ai un souci sur le fullscreen. J’ai bien activé le paramètre mais la barre reste noire.
Tu as testé le paramètre ? Eu le soucis ?

flutter_native_splash:
  # color: "#FFA500"
  background_image: images/screen_splash_background.png
  image: images/screen_splash_icon.png
  android_12:
    image: images/screen_splash_icon.png
  fullscreen: true

Screenshot_20240124-173213
Screenshot_20240124-1732131080×2280 51.2 KB

6

Bonjour,
Je te partage ma config du package flutter_native_splash, ça marche bien pour moi.
flutter_native_splash:
android: true
ios: true
fullscreen: true
color: « #262626 »
color_dark: « #262626 »
image: « assets/splash_logo.png »
image_dark: « assets/splash_logo.png »
android_12:
icon_background_color: « #262626 »
icon_background_color_dark: « #262626 »
image: « assets/splash_logo.png »
image_dark: « assets/splash_logo.png »

7

Hello tout le monde,

J’ai tenté les deux trois manip évoquées au cours du coatching mais rien n’y fait …
Le paramètre fullscreen est bien dédié à la barre de notification et non pas à la barre de navigation.
Pour iOS, la barre de notification est bien recouverte mais pour Android elle reste noire.
@Mamcor, tu as réussi à avoir ta barre de navigation recouverte sur Android ou uniquement sur iOS ?

8

Bonjour @Tazooou,
Selon le modèle de téléphone Android tu peux avoir cette bar ou non. Tu peux la personnaliser en utilisant:
const mySystemTheme= SystemUiOverlayStyle.light
.copyWith(systemNavigationBarColor: Colors.red);
SystemChrome.setSystemUiOverlayStyle(mySystemTheme);
Dans le main() après WidgetsFlutterBinding.ensureInitialized();
Jettes un coup d’oeil dans la documentation flutter pour plus d’infos.

9

Bonjour,

En utilisant ce code dans le main.dart, toutes les pages de son application vont être impactées je pense.
Pourquoi ne pas faire ton propre splash screen afin de pouvoir utiliser ce genre de code (dans le « initState » uniquement sur la page en question? Tu auras plus vite fait en plus je pense.

10

Hello tout le monde,

J’ai résolu mon problème. Le package ne propose pas l’option mais tu peux définir ta couleur de fond de la barre de navigation dans le fichier style.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             the Flutter engine draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:navigationBarColor">"#F6571B"</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.

         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

La couleur de la barre de navigation redevient noire post splash screen.

Et voici le résultat :

Screenshot_20240203-103636
Screenshot_20240203-1036361080×2280 48.4 KB

3 « J'aime »