Astuces pour Flutter : Partie 1
Voilà, vous avez déjà bien avancé votre application mobile iOS et Android grâce à Flutter. Toutes vos fonctionnalités sont en place et vous allez bientôt faire un build release apk et ipa. Il vous reste cependant quelques petits détails visuels à régler pour que votre application soit plus professionnelle, en insérant par exemple l’icone de votre projet dans le menu de votre téléphone, ou encore avec l’intégration d’une page de garde (splashscreen) au lancement.
Pour palier à ces deux petits problèmes, nous vous proposons dans cet article deux astuces pour Flutter. Découvrez comment répondre à ces deux besoins simplement.
Ic_launcher dans flutter
Pour changer facilement l’icone de votre application, je vous conseille d’utiliser le plugin tiers de fluttercommunity.
Dans un premier temps, importez le package dans votre fichier pubspec.yaml puis définissez le chemin de votre image dans flutter_icons.
1 2 3 4 5 6 | flutter_launcher_icons: ^0.7.0 flutter_icons: image_path: "images/ic_launcher.png" android: true ios: true |
Une fois tous les imports terminés, il ne vous reste plus qu’à exécuter un package get dans votre terminal et la commande pub run.
1 2 | flutter packages get flutter packages pub run flutter_launcher_icons:main |
Pour aller plus loin dans la personnalisation, vous pouvez regarder le github de fluttercommunity
Splashscreen dans flutter
On poursuit dans nos Astuces pour Flutter : Partie 1. Cette fois-ci, nous allons parler du splashscreen.
Le splashscreen est la page de lancement de votre application mobile. Mis en place par défaut sur iOS, il est très utile dans vos applications pour précharger des données au démarrage ou pour annoncer une courte introduction à votre application.
Sur Android, le splashscreen n’est pas utilisé par défaut, mais on peut facilement en ajouter un dans nos projets Flutter. Pour cela, il nous suffit de créer une vue avec un Timer (par exemple trois secondes) qui redirige sur la home de notre app soit au bout de trois secondes, soit à la fin du téléchargement d’éléments.
Voilà, le tour est joué !
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'dart:async'; void main() async { SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown, ]); SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith( statusBarColor: Color(0xFF2d4d5c) )); runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: "Titre de mon app", theme: new ThemeData( primaryColor: Color(0xFF2d4d5c), primaryColorDark: Color(0xFF2d4d5c), ), debugShowCheckedModeBanner: false, home: new SplashScreen(), ); } } class SplashScreen extends StatefulWidget { @override _SplashScreenState createState() => new _SplashScreenState(); } class _SplashScreenState extends State { startTime() async { var _duration = new Duration(seconds: 3); return new Timer(_duration, navigationPageHome); } void navigationPageHome() { Navigator.push(context,MaterialPageRoute(builder: (context) => HomeScreen()), ); } @override void initState() { super.initState(); startTime(); } @override Widget build(BuildContext context) { return new Scaffold( backgroundColor: Color(0xFF2d4d5c), body: new Center( child: new Image.asset( 'images/ic_logo_large.png', height: 250.0, ), ), ); } } |
Pour plus d’astuces dans Flutter, vous pouvez lire notre deuxième article astuces-pour-flutter-partie-2. Nous nous efforcerons de vous montrer d’autres astuces dans les temps à venir. En attendant, n’oubliez pas que la communauté de Flutter grandit très vite, et qu’il y aura toujours quelqu’un pour vous aider !
