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).
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).
Réponses:
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 :))
Recherchez le dossier "android" dans votre projet Flutter.
Accédez au dossier app -> src -> main -> res et placez toutes les variantes de votre image de marque dans les dossiers correspondants. Par exemple:
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).
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:
Recherchez le dossier «ios» dans votre projet Flutter.
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:
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
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.
Si vous flutter create
cré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
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
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" : "LaunchImage@4x.png",
"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
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),
),
);