Première application Flutter

1 - Téléchargent et installation de la plate-forme Flutter SDK

Afin de pouvoir développer des applications multiplateforme avec Flutter, vous
devez installer et configurer cette dernière. Pour cela veuillez consulter le site
officiel de Flutter: Install Flutter

Étape 1 : Configuration requise

Avant d'installer Flutter, il est important de vérifier si votre système répond à la

configuration minimale requise. Voici la configuration requise pour installer Flutter :

• Systèmes d'exploitation : Windows 7 ou ultérieur, macOS 10.12 ou ultérieur, ou

Linux (64 bits)
• Espace disque : 400 Mo (sans IDE ni éditeur)
• Outils : Git, un terminal de ligne de commande et votre éditeur de texte préféré.

Étape 2 : Télécharger le SDK Flutter

L'étape suivante consiste à télécharger le SDK Flutter pour votre système d'exploitation.
Vous pouvez télécharger le SDK Flutter depuis le site officiel de Flutter. Voici les liens
de téléchargement pour les différents systèmes d'exploitation :

• Windows : https://flutter.dev/docs/get-started/install/windows
• macOS : https://flutter.dev/docs/get-started/install/macos
• Linux : https://flutter.dev/docs/get-started/install/linux

Une fois que vous avez téléchargé le SDK Flutter, extrayez l'archive dans un dossier de
votre choix. Par exemple, si vous utilisez Windows, vous pouvez extraire l'archive dans
le dossier C:\src\flutter.

Étape 3 : Configuration de l'environnement

L'étape suivante consiste à configurer votre environnement. Cela implique d'ajouter le

dossier Flutter SDK au PATH de votre système. Voici comment procéder sur les
différents systèmes d'exploitation :
Windows :

1. Ouvrez le menu Démarrer et recherchez "Variables d'environnement"

2. Cliquez sur "Editer les variables d'environnement du système"
3. Cliquez sur le bouton "Variables d'environnement".
4. Sous "Variables système", sélectionnez la variable "Chemin" et cliquez sur
"Modifier".
5. Cliquez sur "Nouveau" et entrez le chemin d'accès au dossier Flutter SDK (par
exemple, C:\src\flutter\bin)
6. Cliquez sur "OK" pour enregistrer les modifications

Étape 4 : Vérifier votre installation

Pour vérifier que vous avez correctement installé Flutter, ouvrez une fenêtre de
terminal et tapez la commande suivante :

Copier le code

flutter doctor

Cette commande vérifie que votre système ne contient pas de dépendances nécessaires
à l'exécution de Flutter. Si tout est installé correctement, vous devriez voir un message
disant "Toutes les dépendances de Flutter sont installées et vous êtes prêt à partir !". En
cas de problème, la commande flutter doctor vous indiquera comment le résoudre.

Étape 5 : Installer un IDE

Enfin, vous devez installer un environnement de développement intégré (IDE) pour

développer des applications Flutter. Plusieurs options sont disponibles,
notamment Android Studio, Visual Studio Code et IntelliJ IDEA. Nous recommandons
d'utiliser Visual Studio Code car il fournit une excellente extension Flutter qui facilite
le développement.

Pour installer Visual Studio Code, il suffit de le télécharger depuis le site officiel et de
suivre les instructions d'installation.

Conclusion
L'installation de Flutter est un processus simple qui implique le téléchargement du
SDK Flutter, la configuration de votre environnement, la vérification de votre
installation et l'installation de Flutter.

2 - Création d'une application Flutter avec Android Studio

Dans ce chapitre, nous allons voir comment créer une application Flutter simple
afin de pouvoir comprendre la structure d'une application Flutter dans Android
Studio:

Étape 1: Lancer Android Studio

Étape 2: Créez un projet Flutter. Pour cela, cliquez sur File → New → New Flutter
Project

Sélectionnez ensuite le type de l'application:

Sélectionnez ensuite l'emplacement de la plate forme Flutter SDK,
le nom et l'emplacement de votre projet, et cliquez ensuite sur le bouton Next et puis
sur Finish
Voici finalement la structure de votre premier projet Flutter:

L'application flutter est formée de différents composants:

1. Android:Code source généré automatiquement pour créer une application
Android
2. ios: Code source généré automatiquement pour créer une application ios
3. lib: Dossier principal contenant le code Dart écrit à l'aide du framework
Flutter
4. lib/main.dart: point d'entrée de l'application Flutter
5. test: dossier contenant le code Dart pour tester l'application Flutter
6. .gitignore: fichier de contrôle de version Git
7. .metadata: fichier généré automatiquement par les outils de flutter
8. .packages: généré automatiquement pour suivre les paquets de flutter
9. .iml: fichier de projet utilisé par l'IDE Android Studio
10. pubspec.yaml: fichier utilisé par Pub, gestionnaire de paquets Flutter
11. pubspec.lock: fichier généré automatiquement par le gestionnaire de
packages Flutter, Pub
12. README.md: fichier de description de projet écrit au format Markdown

3 - lancement de l'application
Maintenant pour lancer votre application Flutter, il suffit de sélectionner le menu
chrome web et cliquez sur le bouton Run ( petit triangle vert):
Et vous obtenez finalement la fenêtre de votre première application Flutter:

4 - Code de l'application
Le code tout entier de l'application se trouve au sein du fichier lib/main.dart
lib/main.dart
1 import 'package:flutter/material.dart'; //(1)
2
3 void main() => runApp(MyApp()); //(3)
4
5 class MyApp extends StatelessWidget { //(5)
6 // This widget is the root of your application.
7 @override // //(7)
8 Widget build(BuildContext context) { //(8)
9 return MaterialApp(
10 title: 'Hello World Demo Application',
11 theme: ThemeData(
12 primarySwatch: Colors.blue,
13 ),
14 home: MyHomePage(title: 'Ma page d\'accueil'),
15 );
16 }
17 }// (17)
18 class MyHomePage extends StatelessWidget { //(18)
19 MyHomePage({Key key, this.title}) : super(key: key); // (19)
20 final String title;
21
22 @override
23 Widget build(BuildContext context) {
24 return Scaffold(
25 appBar: AppBar(
26 title: Text(this.title),
27 ),
28 body: Center(
29 child:
30 Text(
31 'Ma première application Flutter !',
32 )
33 ),
34 );
35 }
36 } // (36)

Ligne (1) - importation du package Flutter, matarial. Il s'agit d'un package flottant
pour créer une interface utilisateur conformément aux directives de conception du
système.
Ligne (3) - C'est le point d'entrée de l'application Flutter. Appelle la
fonction runApp en lui transmettant un objet de la classe MyApp. Le but de la
fonction runApp est d'attacher le widget donné à l'écran.
Ligne 5-17 - Widget au sein du framework Flutter utilisé pour créer une interface
utilisateur. StatelessWidget est un widget, qui ne maintient aucun état du
widget. MyApp hérite de la classe StatelessWidget et remplace sa méthode de
génération via un héritage polymorphe. Le but de la méthode de génération est de
créer une partie de l'interface utilisateur de l'application. Ici, la méthode de
construction utilise MaterialApp, un widget pour créer l'interface utilisateur à la
racine de l'application. Il a trois propriétés: title, theme et home:
1. title : titre de l'application
2. theme thème de l'application. Ici, nous définissons le bleu comme couleur
globale de l'application à l'aide de la classe ThemeData et de sa
propriété, primarySwatch.
3. home est l'interface utilisateur interne de l'application crée à l'aide de la
classe MyHomePage
Ligne 19 - 36 : MyHomePage est identique à MyApp sauf qu'il renvoie
le widget Scaffold. Scaffold est un widget de niveau supérieur à côté du widget
MaterialApp utilisé pour créer une conception matérielle conforme à l'interface
utilisateur. Il a deux propriétés importantes:
1. appBar pour afficher l'en-tête de l'application
2. body pour afficher le contenu réel de l'application.