Flutter

Présentation du cours

Présentation personnelle

Architecture des Logiciels à l'ESGI
Dévelopeur mobile : Flutter & Android natif
Fondateur Flappy (flappy.tech)
Formateur : Flutter, Android natif, Git, Algo, Firebase, Projet Annuel 5 AL et MOC
Freelancing : ContentSquare
Co-organisateur du Meetup Flutter Paris
Adresse mail : thomasecalle+prof@gmail.com

Présentation du cours

Règles générales concernant :

les retards
l'attention en cours
les supports de cours
la notation
- un TP en solitaire
- un projet à faire en équipe
je prends vos feedbacks !

Prérequis

Ce cours part du principe que vous avez des notions plus ou moins avancées dans les concepts suivants :

programmation orientée objet
développement mobile (Android, iOS, ReactNative)

Jusqu'où irons-nous ?

30h = non experts
mais on aura quand même les bases pour être recrutables
et cours d'initiation veut aussi dire :
- aller vite à l'essentiel
- nous sommes là pour apprendre un Framework
- des pistes vous seront données pour aller plus loin !

Introduction à Flutter

Un peu d'histoire

WebViews

WebViews++ (Cordova, Ionic, etc.)

React Native

Flutter

Qu'est-ce que c'est ?

made in Google
framework d'applications mobiles hybrides
Entendre par "hybride": un code pour X plateformes

permet actuellement de créer des applications pour :
- iOS
- Android
- Web (stable mais pas de SEO)
- MacOS
- Linux
- Windows
- (Fuschia ?)

Les dates clef ?

2010 : Introduction de Dart à la GoTo Conference au Denmark
2013: Dart 1.x
avril 2015 : Experimentations de Dart pour les apps mobiles (SKY)
mai 2017: Alpha Release de Flutter
2018 : Dart 2.x
décembre 2018 : Flutter en mode "production ready" v1.0
mars 2021 : Flutter 2.0 à la suite du Flutter Engage (web stable, sound null-safety, etc.)

Comment ça marche ?

Dart

made in Google
langage fortement typé
null safety
à la croisée de Java/Kotlin et de Javascript
2 types de compilations:
- Just in Time (JIT) -> Debug
  S'exécute dans la Dart VM
  Rend exploitable le Hot Reload
- Ahead of Time (AOT) -> Production
  Produit du code machine ARM (C/C++)

Comment ça marche ?

Moteur Graphique

moteur graphique utilisé: Skia puis Impeller
flutter révolutionne l'hybride
- toutes les vues dessinées au pixel près
- aucun temps de latence dû à l'interprétation
- 60 FPS
- rendu parfaitement similaire peu importe la version de l'OS

Par rapport à la concurrence ?

moteur graphique
- pas d'interprétation
- 60 fps
- similarité entre les versions d'OS
Dart
- langage fortement typé et moderne
- compilation JIT ET AOT
notion de declarative UI
communauté très importante
qualité de la documentation et des packages
expérience de développeurs... à vivre !

Avant de

commencer

Documentation officielle

Flutter: https://flutter.dev/docs

documentation très complète
exemples de code testables
grosse collection de widgets

Dart: https://dart.dev/guides/language/language-tour

Chaînes Youtube

Flutter: https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw/videos

Flutter Paris: https://www.youtube.com/channel/UCOAErkorTQ0ZbUK9vkFyn8A

Articles sur Flutter

Blog de Didier Boelens: https://www.didierboelens.com/fr/

Medium - Flutter Community: https://medium.com/flutter-community

Internet !

Communautés Slack

Slack Français:
flutter-dev.slack.com

Slack International: fluttercommunity.slack.com
https://flutter.dev/community

Le Dartpad

DartPad

IDE en ligne pour:
- Dart
- Flutter
- Partage de code via Gist

Pub.dev

https://pub.dev/

plateforme du gestionnaire de dépendances pub

Installation

IDEs

Les IDEs pour faire du Flutter sont les suivants :

Android Studio (recommandé)
VS Code
IntelliJ

Pour ce cours, nous partirons du principe que nous travaillons sur Android Studio

Les plugins

Il existe 2 principaux plugins à ajouter à votre IDE :

plugin Flutter
plugin Dart

Documentation officielle

Voici le lien avec les consignes d'installation pour chaque OS :

https://flutter.dev/docs/get-started/install

Ce qu'il vous sera demandé

installation du SDK (où vous voulez)
mettre le chemin vers flutter/bin dans votre PATH
lancer la commande :

flutter doctor

Qu'est-ce que

flutter doctor ?

analyse l'ensemble de votre environnement
donne votre version de Flutter et de Dart
donne le channel flutter sur lequel vous êtes
indique si votre environnement est correct ou non

Les channels

Faites un coup de flutter channel, voici le résultat :

Ordre de stabilité : stable > beta > dev > master

Changer de channel :

flutter channel maChannel

Créer sa première app

Arborescence des fichiers

Initialiser une application

Placez-vous où vous voulez créer votre application

flutter create mon_application

ou alors, avec le plugin Flutter de votre IDE :

Analysons l'arborescence

ls -l mon_application

Analysons l'arborescence

android / ios

Analysons l'arborescence

android / ios

Dans ces dossiers se trouvent l'ensemble des fichiers d'un projet basique en Android et en iOS

Ils seront à priori peu modifiés mais peuvent l'être :

pour modifier Plist ou Manifest
changer la gestion du build
faire un peu de code natif si nécessaire
etc.

Analysons l'arborescence

android / ios

Attention !

Par défaut, flutter créé votre projet avec comme langage :

Kotlin pour android
Swift pour iOS

Ceci est modifiable à la création comme cela:

flutter create -i objc -a java

Analysons l'arborescence

lib

Analysons l'arborescence

lib

Nous y reviendrons plus tard

Ce dossier est celui dans lequel nous écrirons la totalité de notre code Dart/Flutter

Analysons l'arborescence

pubspc.yaml/pubspec.lock

Analysons l'arborescence

pubspc.yaml/pubspec.lock

Le fichier pubspec.yaml est l'un des fichiers les plus importants d'un projet Flutter

Nous y retrouvons:

le package name Dart
la description du projet
la version (version name + version code) commune à iOS et Android
les dépendances (prod / dev)
l'import des assets
l'import des fonts

Analysons l'arborescence

pubspc.yaml/pubspec.lock

Le fichier pubspec.lock est un fichier renseignant sur les versions des dépendances utilisées dans le projet.

En effet, il est possible de donner un numéro de version non précis pour une dépendance comme: ^2.3.5

Cette indication indiquant que l'on accepte les versions de 2.3.5 à 3.0.0 exclu

Analysons l'arborescence

test

Analysons l'arborescence

test

Comme son nom l'indique, ce dossier va contenir tous nos tests Flutter.

Cependant, ce cours étant une initiation, nous n'irons pas plus loin sur ce sujet

Analysons l'arborescence

web / windows

Analysons l'arborescence

web / windows

Dossiers équivalents à ceux Android et iOS dans le sens où ils contiennent la structure native par défaut pour une app web ou Windows

Pour Linux ou macos, voir la doc pour savoir comment faire si vous voulez aller plus loin : https://flutter.dev/desktop

Créer sa première app

Test de l'application générée

Lançons l'application

Ouvrez l'application générée sur votre IDE

Lançons l'application

Sélectionnez ici un émulateur pour tester votre application

Si vous n'en avez pas, créez-en un au niveau de la flèche rouge

Lançons l'application

Lancez en cliquant sur la flèche verte

Vous pouvez aussi utiliser la ligne de commande :

flutter run

Lançons l'application

Testons maintenant la puissance du Hot Reload !

Ouvrez le fichier lib/main.dart et modifiez la chaîne de charactère "Flutter Demo Home Page" :

home: MyHomePage(title: 'Flutter Demo Home Page'),

Sauvegardez vos changements (CMD + S, CTRL + S ou l'icône de foudre en haut d'Android Studio)

C'est parti pour développer en Flutter !

Explications

Pour la suite du cours, nous nous baserons sur un dépôt GitHub regroupant l'ensemble des cours / tp que nous réaliserons ensemble pour apprendre à développer en Flutter

La suite des slides seront donc des slides "de cours", à prendre plus comme des fiches de révisions par rapport à des concepts vus en direct ensemble

Explications

Il est donc important de comprendre que le principal du cours se fera via la pratique ensemble sur l'IDE

Les slides qui suivent n'ont pour objectif que d'aider à la révision et à la reprise pour les absents

Quelques notions en Dart

Les constructeurs de classe

Dart possède quelques subtilités concernant ses constructeurs

Tout d'abord, il n'est pas nécessaire de "mapper" obligatoirement les paramètres reçus par le constructeur avec les champs de la classe, Dart le fait automatiquement

class User {
   String name;
   
   User(String name) {
    this.name = name;
  }
}


class User {
   String name;
   
   User(this.name);
}

Les constructeurs de classe

Par défaut, les paramètres d'une classe ne sont ni optionnels ni nommés.

final User user = User("Perceval");

Le compilateur m'impose en effet de renseigner ce champs pour que ça fonctionne.

final User user = User();

PAS OK

Les constructeurs de classe

Je peux toutefois rendre un ou plusieurs paramètres optionnels, ils seront alors nommés également.

Il suffit pour cela d'entourer d'accolades les paramètres souhaités

class User {
   String name;
   String? email;

   User(this.name, {this.email});
}

final User user = User("Perceval", email: "perceval@gmaiL.com");

Les constructeurs de classe

Attention, avez-vous noté le "?" sur le type du champs email ?

String? email

Ce symbole "?" signifie que le champs est Nullable

Cela signifie que ce champs peut prendre la valeur NULL et que cela devra impérativement être pris en compte pour le reste du développement

Les constructeurs de classe

On va revenir sur ce concept de Nullable dans le chapitre suivant !

Les constructeurs de classe

Alors que faire si vous ne voulez pas que votre paramètre nommé soit Nullable ?

Vous avez 2 choix :

Les constructeurs de classe

Indiquer une valeur par défaut :

class User {
   String name;
   String email;

   User(this.name, {this.email = "toto"});
}

final User user = User("Perceval", email: "perceval@gmaiL.com");

Les constructeurs de classe

Indiquer le champs comme "required"

Le champs devra alors impérativement être renseigné

class User {
   String name;
   String email;

   User(this.name, {required this.email = "toto"});
}

final User user = User("Perceval", email: "perceval@gmaiL.com");  // OK

final User user = User("Perceval");  // Ne compile pas

Les constructeurs de classe

Les paramètres nommés sont très utiles en Flutter, car la totalité du rendu graphique se fait via le code et ils permettent donc celui-ci d'être plus lisible !

Vous comprendrez au fur et à mesure l'importance du nommage de paramètre en Flutter !

L'héritage

class Knight {
  final String name;

  const Knight(this.name);
}

class Perceval extends Knight {
  final String botteSecrete;

  Perceval(String name, this.botteSecrete) : super(name);
}

Null-Safety

Depuis sa version 2.12, le langage Dart supporte le Sound Null-Safety

Le Null-Safety, c'est le fait que l'on soit obligé de déclarer explicitement si un champs peut potentiellement être NULL

String? firstName;         // Ce champs est "nullable"
String lastName = "toto";  // Ce champs n'est pas "nullable", 
                           // on doit donc lui donner une valeur

(documentation)

Null-Safety

L'intérêt d'un langage supportant le null-safety est énorme et bien connu des développeurs Kotlin ou encore Swift depuis longtemps :

permet d'éviter toutes les NullPointerException
code bien plus sécurisé et donc maintenable (on réduit les erreurs possibles)

Null-Safety

Lorsque vous débutez une application Flutter "From Scratch", il n'y a à priori aucune bonne raison de ne pas mettre en place le null-safety

Null-Safety

Pour ce faire, vous devez changer les contraintes de SDK dans votre pubspec.yaml afin de vous baser sur une version minimale de Dart à 2.12

Comment faire ?

environment:
  sdk: ">=2.12.0 <3.0.0"

Null-Safety

Si vous venez de créer une app par défaut, elle ne pourra normalement plus compiler car le fichier main.dart n'est plus compatible avec le null-safety, mais c'est normal !

A vous de convertir votre code pour le rendre compatible au null-safety !

MyHomePage({Key? key, required this.title}) : super(key: key);

Null-Safety

Qu'est-ce que signifie SOUND null-safety ?

Ca signifie que, lors de la compilation de votre projet, Flutter peut vous renvoyer des erreurs si il considère que tout n'est pas safe

Notamment pour vos dépendances ! Si vous utilisez une dépendance qui n'a pas migré, alors potentiellement votre propre code pourra en pâtir

Et donc Flutter pourrait vous embêter avec ça...

Null-Safety

Heureusement, on peut quand même run (et build) son app en désactivant l'aspect "Sound" du null-safety :

flutter run --no-sound-null-safety

Qu'est-ce qu'un Widget ?

Tout est Widget

Vous l'entendrez souvent en faisant du Flutter, tout est widget.

En effet, les widgets sont la base de Flutter, ils peuvent correspondre à la fois à un simple texte comme à l'application elle même

Tout est Widget

Un Widget est une classe héritant d'un certain type de Widget

class MyApp extends StatelessWidget {
  
}

Il existe 3 principaux types de Widgets que nous décrirons plus tard : StatelessWidget, StatefullWidget et InheritedWidget

Attention, ces 3 types héritent eux-même du type Widget

Tout est Widget

Penchons-nous sur le StatelessWidget !

Un StatelessWidget hérite donc de la classe StatelessWidget et doit renseigner son propre rendu graphique grâce à la méthode build de celle-ci

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ...
  }
}

Tout est Widget

Vous remarquez que la méthode buil() retourne elle-même un Widget !

Ceci est donc tout à fait possible :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return A();
  }
}

class A extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return B();
  }
}

class B extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ...
  }
}

Tout est Widget

Le rendu graphique se fait donc en composant les widgets les uns les autres pour construire l'UI.

Voici un écran blanc avec un carré rouge de 50 pixels de côtés au centre

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: Container(
          height: 50,
          width: 50,
          color: Colors.red,
        ),
      ),
    );
  }
}

Tout est Widget

Container et Center font partie des très nombreux Widgets préexistant avec lesquels vous pouvez construire VOS widgets !

Il suffit encore une fois de composer vos widgets les uns aux autres en utilisant ceux existants

Tout est Widget

Voici un autre exemple de ce que l'on aurait pu écrire, juste pour vous montrer que cela ne change rien:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return A();
  }
}

class A extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: Container(
          height: 50,
          width: 50,
          color: Colors.red,
        ),
      ),
    );
  }
}

Tout est Widget

Les paramètres

Vous avez peut-être remarqué que les widgets Container et Center prennent des paramètres.

Un Widget étant une classe Dart, elle peut en effet prendre des paramètres !

Tout est Widget

Les paramètres

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return A(
      squareColor: Colors.red,
    );
  }
}

class A extends StatelessWidget {
  final Color squareColor;

  const A({
    Key? key,
    required this.squareColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: Container(
          height: 50,
          width: 50,
          color: squareColor,
        ),
      ),
    );
  }
}

Tout est Widget

Les paramètres

Le paramètre de type Key que l'IDE nous a automatiquement ajouté est un paramètre utilisé par la classe parente Widget (d'où l'appel à super()).

Nous ne l'utiliserons presque jamais dans ce cours, mais sachez qu'il agit comme un identifiant du widget, si un jour vous avez besoin d'identifier de manière unique un widget dans l'arbre des widgets

Fonctionnement d'une application Flutter

Fonctionnement

Nous l'avons vu, TOUT est widget en Flutter, une fois que vous avez compris ça, vous avez tout compris !

Par exemple, la méthode main() de Flutter doit, pour faire fonctionner l'application, renvoyer ce que la méthode runApp() retourne: Un Widget

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

Ceci est donc en théorie l'application Flutter la plus courte possible.. !

Arbre de widgets

Une fois que vous avez compris la composition des widgets, vous réalisez que l'application entière n'est qu'une composition de widgets: un arbre de widgets.