100
30 avril 2019

Astuces pour Flutter : Partie 1

banniere astuces pour flutter partie 1

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
astuces-pour-flutter-partie-1-ic-launcher

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 !

VOUS EN VOULEZ ENCORE ?

CHANGER D'UNIVERS !