Cours d’introduction à Flutter : le premier projet

À partager sans modération

Dans ce cours, nous allons créer notre premier projet avec Flutter . Pour ce premier projet, nous commencerons par une application simple, l’application “Counter” fournie par défaut lorsque l’on crée un nouveau projet Flutter.

Prérequis

• Un ordinateur supportant la virtualisation (pour bénéficier des émulateurs)
• Windows 10, 8 ou 7 ou macOS.
• Une connexion internet
• Un environnement Flutter installé sur votre machine (Windows, macOS)
• VSCode avec les extensions installées

Sommaire

1. Création du projet
2. Comment fonctionne le code
3. StatefulWidget ou StatelessWidget

Ressources

• Formation d’initiation à Flutter : créer votre première application mobile
• Formation Flutter Master : devenez un expert Flutter
• Forum de la communauté

1- Création du projet Flutter

Commençons par ouvrir Visual Studio Code. Vous arrivez sur la page d’accueil. Fermez la fenêtre Welcome.

Vous arrivez ensuite sur une fenêtre qui vous indique les différents raccourcis pour les différentes opérations qui nous intéressent (ouvrir un fichier etc.).

On va ensuite afficher la barre d’accès avec la combinaison de touches « cmd + Shift + P » sur macOS , « Ctrl + Shift + P » sur Windows.

Dans la barre de recherche tapez « Flutter new » et sélectionnez ensuite « Flutter : New Application Project ».

Sélectionnez ensuite un emplacement où l’enregistrer en lui donnant un nom.

Visual Studio Code va créer tout un lot de fichiers sans que vous ayez à cliquer ou taper quoi que ce soit.

Vous obtenez ainsi un projet comme ci-dessous :

Vous pouvez aussi lancer un nouveau projet sans utiliser Visual Studio Code.

Pour cela, il faut lancer le terminal de commande, se mettre à l’emplacement du futur projet Flutter puis de lancer la commande « flutter create » suivie du nom de votre projet comme dans l’exemple ci-dessous.

Cette commande va générer les lignes de code de votre projet. Ensuite il vous suffira d’aller chercher le projet crée à son emplacement et de l’ouvrir avec Android Studio ou VS Code.

Revenons à notre projet, avant de se lancer dans le code, on va installer quelques icônes. Cliquez sur le symbole encadré en blanc dans la barre de gauche puis dans la barre de recherche tapez « material icon theme ».

Installer “Material Icon Theme” vous permettra d’avoir une meilleure visibilité de vos dossiers.

Une fois l’installation terminée, on peut se remettre sur le fichier main.dart.

Les icônes du répertoire sont désormais différentes et colorées, beaucoup plus agréables à voir !

Sachez que vous pouvez accéder à toute commande seulement avec des raccourcis clavier, pour les connaître vous pouvez aller dans le menu “Code” > “Preferences” > “Keyboard Shortcuts”.

Ensuite, nous allons tester l’émulateur. Pour ce faire, tapez dans la barre de commande « Flutter » puis sélectionnez « Flutter : Select Device ».

Choisissez ensuite l’émulateur installé avec Android Studio, pour mon cas il s’agit du Nexus 5, pour votre cas cela sera un émulateur plus récent.

Vous devriez avoir une nouvelle fenêtre qui se lance, avec votre émulateur comme ci-dessous.

Si ce n’est pas le cas, vous pouvez demander de l’aide sur le forum.

L’émulateur s’est bien lancé, nous allons lancer notre application dessus et ainsi connecter VSCode.

Pour ce faire, il faut compiler l’application et l’envoyer sur le téléphone.

Pour lancer le debugging et la compilation appuyez sur F5 ou la combinaison des touches “Fn” + “F5” ou sinon aller dans le menu, cliquer sur Debug > Start Debugging.

Comme c’est la première fois qu’on lance l’application, ça va prendre plus de temps.

Une fois la compilation terminée, une fenêtre s’affiche pour vous demander si vous voulez ouvrir DartDevTools, cliquez sur « No thanks ».

L’application est maintenant lancée sur l’émulateur.

Une barre de commande est apparue, elle permet de gérer l’état de notre application.

L’application test fonctionne comme ceci : lorsque vous appuyez sur le bouton + en bas à droite du téléphone, cela génère une incrémentation (ajoute 1) du compteur on passe donc de 0 à 1 puis 2 etc.

Petit défi avant de continuer :

Changer le nom de l’application qui s’affiche en haut du téléphone : « Flutter Demo Home Page ».

Astuce : utilisez Ctrl + F ou Command + F pour rechercher des expressions dans les lignes de code.

Solution :

À partir de là, il suffit de taper un autre nom à la place et d’enregistrer le fichier (Ctrl + S ou Command + S) pour que l’application se remette à jour.

2 – Comment fonctionne le code

On va maintenant analyser la composition du fichier main.dart.

La 1ère ligne :

import 'package:flutter/material.dart';

Elle est indispensable à tout projet car elle contient les ressources nécessaires à l’application comme les Widgets.

La 2e ligne :

void main() => runApp(MyApp());

Elle représente la porte d’entrée principale de l’application, c’est grâce à cette ligne qu’on lance le code de l’application.

Flutter est constitué essentiellement de Widgets. Un widget c’est comme un Lego, vous devez imbriquer plusieurs widgets ensemble pour créer votre application.

Pour mieux comprendre ce concept, rendons-nous sur le Widget catalog de Flutter.

On va ensuite dans la catégorie “Basics”.

Comme vous pouvez le voir, il y a des widgets pour tout et la doc est bien imagée.

Par exemple, vous pouvez créer une icône avec un widget et ensuite la personnaliser sans ajouter trop de lignes de code, vous avez aussi le widget Row qui sert à positionner différents éléments de manière horizontale.

Je vous invite à feuilleter ce catalogue qui nous servira par la suite.

Intéressons-nous maintenant au widget « MaterialApp ».

Vous le trouverez dans presque toutes les applications car c’est un des éléments du package « material.dart » dont on a parlé.

Ce widget va créer le squelette de votre application.

Ensuite, il y a le widget « ThemeData » qui permet de personnaliser les couleurs des éléments, les tailles de texte etc.

Petit défi avant de continuer :

Trouver le widget texte pour afficher « Salut les codeurs » dans l’application.

Solution :

Le widget “Text” est dans le catalogue, dans la catégorie “Basics”.

La documentation nous indique comment afficher un texte dans l’application.

Il faut appeler le widget Text et indiquer dans ses parenthèses avec des apostrophes le texte à afficher.

On va remplacer tout ce qu’il y a dans le paramètre “home” du widget “MaterialApp” et mettre notre widget Text à la place.

Attention à ne pas oublier les parenthèses ! Chaque widget à son lot de parenthèses. La dernière virgule permet de mettre à la ligne la dernière parenthèse.

En tapant « Shift + Ctrl ou Command + P » puis « Format Document » dans la barre de recherche, vous pouvez organiser vos lignes de code.

Vous devriez obtenir ce résultat :

En enregistrant le code, on obtient le résultat ci-dessous pour l’application.

Si ce n’est pas le cas vous pouvez relancer l’application du début.

Pour changer l’apparence du texte, il va nous falloir un autre widget, on va aller le chercher dans le catalogue widget dans la catégorie “basics”.

Il s’agit du widget « Scaffold », le Scaffold permet de structurer un écran (l’équivalent d’une page web), par exemple d’avoir une barre en haut, un bouton d’action en bas à droite et le contenu au milieu.

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Text('Salut les codeurs'),
      ),
    );
  }

On va donc insérer le widget « Scaffold » dans le paramètre “home” puis renseigner le paramètre « body » (comme indiqué dans le code ci-dessus) dans lequel vous insérez les lignes de code concernant votre texte.

Cela devrez-vous donner ce résultat :

Maintenant nous avons un meilleur affichage avec la police de caractère, mais le texte n’est pas positionné correctement, on va le centrer.

Pour réussir cela il va nous falloir un autre widget. Ce widget est dans le catalogue dans la catégorie « Layout ».

À partir de là, vous avez plusieurs solutions, vous pouvez soit utiliser le widget « Container » (mais on le verra plus tard) soit le widget « Center » (c’est celui que l’on va choisir).

En observant la liste des propriétés, on trouve encore la propriété dénommée « child ».

On l’utilise beaucoup sur Flutter. Il s’agit du paramètre qui contient le sous-widget.

Car sur Flutter, vous commencez à le voir, des widgets peuvent contenir d’autres widgets qui contiennent encore d’autres widgets. Le code est basé sur une imbrication de widgets.

C’est dans ce paramètre “child” que l’on va indiquer le widget “Text” qui est l’élément à centrer.

Au final, on a le MaterialApp qui englobe Scaffold qui englobe Center qui lui-même englobe le widget Text.

Faites bien attention à ne pas oublier les deux parenthèses pour chacun des widgets, la virgule pour passer à la ligne et le point-virgule pour clore votre séquence de code.

Enregistrez votre fichier et relancez l’émulateur. Cette fois, votre texte devrait bien apparaître au centre de l’écran.

3 – StatefulWidget ou StatelessWidget

Vous devez vous demander ce que font le « Widget build » et le « StatelessWidget ».

Le « StatelessWidget » est utilisé dans les écrans sans rendu dynamique (pas de changement sur l’écran, sans changement d’état), contrairement au « StatefulWidget », qui, lui, permet des rendus dynamiques (par exemple on appuie sur un bouton et le texte change).

Cette différence est importante quand il s’agit de la consommation de ressource de votre application, tout ce qui ne demande pas de rendu dynamique doit utiliser un StatelessWidget.

Pour utiliser correctement les widgets, un widget de type State est obligatoire.

Le « widget build » est lui contenu dans le « StatelessWidget », c’est une fonction qui est appelée lorsque l’on appelle un widget de type State.

Si l’on veut par exemple pouvoir changer la couleur du texte de manière dynamique, il va falloir utiliser un « StatefulWidget ».

L’idée est d’obtenir ce résultat :

Afin de réaliser ceci on va se servir du code ci-dessous, avant cela il est préférable de faire une copie du fichier “main.dart”.

Ensuite, on efface tout le code dans le fichier “main.dart” avant coller le code ci-dessous.

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State {
  String _sentence;
  bool _changed;
 
  @override
  void initState() {
    _sentence = 'Salut les codeurs';
    _changed = false;
    super.initState();
  }
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello App',
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Text(
                _sentence,
                style: TextStyle(
                  color: _changed ? Colors.purple : Colors.green,
                  fontSize: 20.0,
                ),
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            RaisedButton(
              color: _changed ? Colors.white : Colors.black,
              onPressed: () {
                setState(() {
                  _changed ? _changed = false : _changed = true;
                  _sentence == 'Salut les codeurs'
                      ? _sentence = 'Bye les codeurs'
                      : _sentence = 'Salut les codeurs';
                });
              },
              child: Text(
                'Changer',
                style: TextStyle(
                  color: _changed ? Colors.black : Colors.white,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

On enregistre et on lance l’émulateur. Vous devriez obtenir les écrans précédents lors de l’appui sur le bouton “Changer”.

On va maintenant analyser le code pour comprendre un peu mieux comment fonctionne le « StatefulWidget ».

Si vous comparez le nouveau fichier avec le précédent, vous allez déjà vous apercevoir que le nouveau fichier contient plus de code. Il contient aussi deux « class » au lieu d’une.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
 
class _MyAppState extends State { 
...

Une « class », pour faire simple, c’est un morceau de code avec des fonctions, des variables et autres données qui lui sont propres.

Le « StatefulWidget » est séparé en deux class de manière intentionnelle.

La première class est fixe, c’est le point d’entrée.

La seconde “class” permet de gérer le dynamisme et le changement des éléments, elle ressemble à un StatelessWidget. Vous y trouvez le fameux Widget Build .

La fonction « setstate » permet d’avertir votre « StatefulWidget » d’un changement d’état afin de rafraîchir le rendu.

 setState(() {
                  _changed ? _changed = false : _changed = true;
                  _sentence == 'Salut les codeurs'
                      ? _sentence = 'Bye les codeurs'
                      : _sentence = 'Salut les codeurs';
                });

Pour le reste du code nous y reviendront par la suite, le principale pour le moment est de comprendre les bases.

À présent, nous pouvons commencer à créer notre première application. La suite s’effectue en vidéo, la création d’un compte est requise.