COURS
PROGRAMMATION
MOBILE
Développer des applications modernes avec Flutter &
Dart
Dr MORIE Wielfrid
moriemaho@[Link]
07 09 36 98 09
Objectifs
• Maîtriser les fondamentaux du SDK Flutter
• Développer avec le langage Dart
• Développer des applications Android & iOS performantes
• Effectuer la persistance des données avec sqflite
• Connaître les bonnes pratiques de développement
Références
• Liens
[Link]
[Link]
• Livres
1. Flutter Développez vos applications mobiles multiplateformes avec Dart (Julien
TRILLARD)
2. Flutter Complete Reference (Alberto Miola)
• Chaines YouTube
FlutterWay
Academind
Introduction
Historique
Motorola V3 Iphone 1 Samsung Galaxy S1
2005 2007 2010
App interne iOS Android 2.1
Jeux en Java Apple store Playstore
Introduction
Historique…
Android Windows phone BBOS
iOS
Google Microsoft Blackberry
Apple
Introduction
Outils & langages
• Kotlin, Java • Swift
• Android Studio (SDK • Xcode (SDK iOS)
Android) • MacOS
• Windows, Linux, MacOS
Développement Native
Introduction
Framework
WebView Close to native Widget rendering
Javascript Javascript Dart
Composant Composant
Composant s s
s Pont Widget crée
Java Swift Widget Widget
WebView
Rendu Rendu
Plateforme
Introduction
Framework…
React Native
0.68
Flutter 3
Introduction
Outils
Ajouter le dossier bin dans les variables
d’environnement
Entrer la commande « Flutter Doctor »
Téléchargement des composants
Téléchargement du SDK CLI
tools
Android Studio
Dart
Flutter
Bracket pair colorized
Awesome flutter code
Dart
Syntaxe de base
• Fonction principale « main » obligatoire
• Les délimiteurs de fonctions sont les accolades « { } »
• Chaque instruction se termine par un point virgule « ; »
• Les commentaires sont donnés par :
• // : commentaires une ligne
• /* */ : commentaires sur plusieurs lignes
• Indentation avec 2 espaces
Dart
Convention de codage
Identifiant Style class HttpConnection (String plexGame ){}
Variable : lowerCamelCase class DBIOPort {}
Constantes : class TVVcr {}
Fonctions : class MrRogers {}
Propriétés :
Paramètres : var httpRequest = ...
Classes : UpperCamelCase var uiHandler = ...
var userId = ...
Bibliothèques et Fichiers . lowercase_with_undersco Id id;
dart re
Dart
Mots clés
abstract 2 else import 2 show 1
as 2 enum in static 2
assert export 2 interface 2 super
async 1 extends is switch
await 3 extension 2 late 2 sync 1
break external 2 library 2 this
case factory 2 mixin 2 throw
catch false new true
class final null try
const finally on 1 typedef 2
continue for operator 2 var
covariant 2 Function 2 part 2 void
default get 2 required 2 while
deferred 2 hide 1 rethrow with
do if return yield 3
dynamic 2 implements 2 set 2
Dart
Hello World
void main() {
print('Hello World!'
);
}
Dart
Variables
Type Domaine Exemple
var Typage dynamique var keyLabel = ‘poor’
(faible)
num Nombre (réel ou entier) num mainFlow = 3.5
int Entier int bigFlow = 3
double Réel double lowFlow = 8.12
String Chaine de caractère String carName = ‘Mercedes’
bool Booléen bool isChecked = true
List Liste ou tableau List <int> myList = [1,2,3]
Map Dictionnaire Map<int, String> nobleGases = { 2: 'helium’}
Set List de valeur unique Set<String> ipxNames = {'fluorine', 'chlorine'}
const Constante const price = 12.02
final Dernière valeur final price = 14
dynami La valeur attendu peut être dynamic. Exemple avec les Map et Set
c
Dart
Fonctions
Fonction sans valeur de retour :
Procédure
void bonMessage() { void main() {
print(‘Bienvenue'); bonMessage();
}
}
Fonction avec valeur de retour
void main() {
int somme(int a, int b) {
return a+b; int x;
} x = somme(3, 6);
}
Dart
Operateurs
Description Opérateurs
Multiplication * / % ~/
Addition + -
Et &
XOR ^
Ou |
Test de condition >= > <= < as is is! == !=
Et logique &&
Ou logique ||
Si null ??
Condition ternaire expr1 ? expr2 : expr3
Affectation = *= /= += -= &= ^= etc.
Dart
Structures de contrôle : Structure conditionnelle - if
if (weather == isRaining) {
print(‘Pluie’);
} else if (weather == isSnowing)
{
print(‘Neige’);
} else {
print(‘sunlight’);
}
Dart
Structures de contrôle : Structure de répétition - for
Accès par indices Accès par l’objet itérable Méthode forEach()
for (var i = 0; i < 5; i++) { var collection = [0, 1, 2]; var collection = [1, 2, 3];
print(i); for (var x in collection) { [Link](print);
} print(x);
}
Dart
Structures de contrôle : Structure de répétition - While
while (isDone) { do {
print(‘It is OK’); printLine();
} } while (!atEndOfPage);
Dart
POO : Classes
Class MyPoint {
num x;
num _y; Variable Private
Point(num x, num y) { Constructeur de classe
this.x = x;
qui peut être écrit
autrement
this.y = y;
} Point(this.x, this.y);
}
Dart
POO : Getters & Setters
Les Getters et les Setters peuvent être créer à l’aide des mots clés Get et Set.
Cependant, il faut savoir que chaque variable d'instance possède un getter
implicite, ainsi qu'un setter si nécessaire.
double get right () { set right(double value) {
return left + width; left = value - width;
}
}
Getter de la propriété right Setter de la propriété right
Dart
POO : Héritage
Utilisez extends pour créer une sous-classe, et super pour faire référence à la
super-classe
class TelevisionIntelligente extends
class Television { Television {
void allumer() { void allumer() {
_eclairerLecran(); [Link]();
} _demarrerInterfaceReseau();
} _mettreAJourApplications();
}
}
Dart
POO : Redefinition
Les sous-classes peuvent remplacer les méthodes d'instance.
L'annotation @override.
class Television {
set contrast(int value) {...}
}
class SmartTelevision extends
Television {
@override
set contrast(num value) {...}
}
Dart
Les collections : Iterable
Les collections sont un ensemble d’éléments itérable, i.e., on peut les parcourir.
List, Set, Map.
var iterable = ['Salad', 'Popcorn', 'Toast’] Déclaration d’un itérable (List)
for (final element in iterable) Parcours d’une liste, ou Map ou Set
[Link] Accéder au premier élément de l’itérable
[Link] Accéder au dernier élément de l’itérable
[Link]((element) => [Link] Récupérer le premier élément selon une condition
>5
[Link]((element) => element == 12 Récupérer tous les éléments selon une condition
[Link]((number) => number * 10) La function map change tous les éléments de l’itérable
par le résultat d’une function passée en paramètre
Flutter
Architecture
Framework
Widget Widget
Flutter Dart
Flutter SDK
Compilation
Android Apk iOS app
Flutter
Paradigme
Widget
(material)
Widget Widget
(Row) (Expanded)
Widget Widget Widget Widget
(text) (button) (image) (icon)
Widget Widget Widget Widget Widget Widget Widget Widget
Flutter
Installation
Flutter SDK
[Link] Android studio
v
Visual Studio Code
~ 4Gb de téléchargement
Suivez les instructions de cette vidéo toujours d'actualité pour la version
Flutter 3.7 (mars 2023) :
COMMENT INSTALLER FLUTTER SUR WINDOWS - Technovore
[Link]
Flutter
Installation
Installons ensemble si
vous le voulez bien !
Flutter
Widgets de page
MaterialApp Le principal widget qui englobe la plupart des widgets
généralement requis pour les applications.
debugShowCheckedModeBanner : false
theme
Brightness : [Link]
primaryColor : [Link]
home : …
Flutter
Widgets de page
Scaffold
Mettre en œuvre la structure de base de la conception Material
design. Style recommandé pour les application Android.
appBar
appBar : AppBar()
Body : Widget()
floatingActionButton :
FloatingActionButton()
body bottomNavigationBar : [Widget()]
bottomAppBar
Flutter
appBar
appBar est la barre d'application située au dessus du contenu principal.
• actions → List<Widget>?
• leading → Widget?
• title → Widget?
Flutter
bottomNavigationBar
bottomNavigationBar est la barre d'application située en dessous du contenu principal.
bottomNavigationBarItem →
<Widget>?
Flutter
floatingActionButton
floatingActionButton est un bouton flottant généralement situé au dessus du bottomNavigationBar. Il
est soit à droite, soit au milieu.
Flutter
body
Body est le corps de notre application. Il contiendra tous les widgets pour faire fonctionner notre
application.
• Un widget
• Pas de propriétés
• Entre le appBar et le
bottomNavigationBar
Flutter
Widgets Layout
Les Layout sont des widgets d'organisation du design de l'application. Ils permettent de gérer la disposition
des autres widgets sur l'application. De ce fait ils peuvent embarquer plusieurs widgets disposés selon leur
principale axe. Ils attendent donc une liste de widgets dans la propriété children qui est obligatoire.
children : <Widget>[…]
Column Row Stack
crossAxisAlignment:
[Link]
mainAxisSize: [Link]
mainAxisAlignment: [Link]
textBaseline : TextBaseline
Flutter
Widgets Layout : Column
Le widget Column permet de disposer les widgets en son sein les uns en dessous des autres. Son axe
principale (mainAxis) est la verticale et son axe secondaire (crossAxis) l'horizontale. Le widget Column n'a
pas de barre de défilement. Ainsi, s'il y a plus de contenu que la taille de l'écran (le widget parent), une
erreur d'affichage se produira. Il faut se pencher dans ce cas vers d'autres widgets adaptés.
Axe principal : verticale
Axe secondaire : horizontale
Column
Propriétés :
mainAxisAlignment = Alignement sur l'axe vertical
mainAxisSize = Hauteur de la colonne
crossAxisAlignment = Alignement sur l'axe horizontal
Flutter
Widgets Layout : Row
Le widget Row permet de disposer les widgets en son sein les uns à coté des autres. Son axe principale (
mainAxis) est l'horizontale et son axe secondaire (crossAxis) la verticale. Le widget Row n'a pas de barre de
défilement également. Ainsi, s'il y a plus de contenu que la largeur de l'écran (le widget parent), une erreur
d'affichage se produira tout comme le widget Column. Il faut se pencher dans ce cas vers d'autres widgets
adaptés.
Axe principal : horizontale
Row Axe secondaire : verticale
Propriétés :
mainAxisAlignment = Alignement sur l'axe horizontal
mainAxisSize = largeur de la colonne
crossAxisAlignment = Alignement sur l'axe vertical
Flutter
Widgets Layout : Stack
Le widget Stack permet de disposer les widgets en son sein les uns sur les autres. Il possède un seul axe.
Le widget Stack n'a donc pas de colonne ni de ligne. Nous pouvons donc afficher du texte sur une image
en utilisant.
Chaque enfant d'un widget Stack est soit positionné, soit non positionné.
Stack
Propriétés :
alignment = Positionnement des widgets enfants
Flutter
Widgets Layout (View)
ListView est une liste déroulante de widgets disposés linéairement. La création d’un widget de liste
déroulante dans Flutter est assez simple à l’aide du widget ListView. L'axe de la liste view est de terminé
par la propriété scrollDirection (verticale ou horizontale). Les différents constructeurs de liste sont :
1. ListView
2. [Link]
3. [Link]
4. [Link]
Listview
Flutter
Widgets Layout (View)
GridView permet de disposer les widgets en grille. Le widget GridView permet d’avoir des colonnes et des
lignes, sous forme de grilles avec des éléments qui permettent de faire défiler. Dans GridView, nous pouvons
également utiliser [Link] pour créer des widgets enfants en fonction du nombre de données. Nous
avons les GridView suivants :
1. GridView
2. [Link]
3. [Link]
4. [Link]
5. [Link]
Gridview
Flutter
Widgets Container
Les Container sont des widgets d'affichage et de disposition du contenu. Ils permettent de modifier
l'apparence et la mise en page d'un widget. De ce fait ils peuvent embarquer un seul widget. Ils attendent
donc un widget dans la propriété child.
child : Widget(…)
Ils peuvent gérer le style, le positionnement, la bordure, les marges, etc. du widget enfant. La propriété
décoration est la plus utile des widgets Container.
decoration → BoxDecoration(…)
Center Expanded Sizebox Container Padding
Flutter
Widgets de contenu
Text Icon Image
text Icon [Link] en local
textAlign colors [Link] sur internet
overflow Size [Link] dans un fichier
Flutter
Widgets de contenu : Text
Le widget Text permet d’afficher du texte dans l’interface utilisateur
d’une application mobile. En fait, le texte est une partie importante de
toute application mobile, il est donc essentiel de s’assurer qu’il est bien
placé et facile à lire. Pour ce faire Text contient des propriétés de style
de texte (alignement, couleur, taille, police,…).
Text
Flutter
Widgets de contenu : Image
Le widget Image permet d’afficher une image dans l’interface utilisateur d’une application mobile. Image
peut afficher des image de 3 manières :
1. Via les assets [Link] en local
2. Via internet [Link] sur
3. Via un fichier. internet
[Link] dans un fichier
Image Les assets sont des fichiers image qui sont ajoutés au dossier de
l’application. Ensuite, ils seront utilisés pour afficher des images sans
connexion Internet. Voici les étapes que vous devez suivre :
1. Créer un nouveau dossier appelé /assets dans votre projet.
2. Mettre les images dans le dossier.
3. Définir les assets à utiliser dans [Link].
4. Charger l’image à partir des assets dans le code
Flutter
Widgets User Input
elevatedButton outlinedButton textField
Enregistrer Enregistrer
obscureText
style: style, style: style,
decoration
onPressed: () {}, onPressed: () {},
onSubmitted
child: Widget() child: Widget()
Controller
keyBoardType
Flutter
Widgets Gesture Controller
Les gestes sont principalement un moyen pour un utilisateur d'interagir avec une application mobile (ou tout
autre appareil tactile). Les gestes sont généralement définis comme toute action / mouvement physique
d'un utilisateur dans l'intention d'activer un contrôle spécifique de l'appareil mobile.
• Tap - Toucher la surface avec le bout du doigt pendant une courte période, puis relâcher le bout du doigt.
• Double Tap - Tapotez deux fois en peu de temps.
• Drag - Toucher la surface de l'appareil avec le bout du doigt puis bouger le bout du doigt de manière
régulière et enfin relâcher le bout du doigt.
• Flick - Similaire au glisser, mais en le faisant de manière plus rapide.
• Pinch - Pincer la surface de l'appareil à l'aide de deux doigts.
• Spread/Zoom - Face au pincement.
• Panning - Toucher la surface du bout du doigt et le déplacer dans n'importe quelle direction sans
relâcher le bout du doigt.
Flutter fournir deux widgets pour la prise en compte des gestes : GestureDetector & Inkwell
Flutter
Widgets Gesture Controller
GestureDetector Inkwell
Beaucoup plus des gestes pris en Retour visuel du geste
compte
• onDoubleTap • onDoubleTap
• onHorizontalDragDown • onLongPress
• onLongPress • onTap
• onTap • onFocusChange
• onTapCancel • …
• onTapDown
• onTapUp
• onVerticalDragDown
• …
Flutter
Styliser les Widgets
Propriétés de style
• Decoration
• Theme
• mediaquery
• Google font package
• Border
• Border raduis
Flutter
Interactivité : stateless vs statefull
Stateless Statefull
Données en entrée Données en entrée
Information des widgets Information des widgets
ne peuvent plus
Widget Widget peuvent changer dans
changer dans l’affichage après la
l’affichage après la Changement d’état compilation
compilation
interne
Rendu de l’interface Rendu de l’interface
Flutter
Navigation
Material Page Route (Context)
Page A Page B Page C
Push Push
Pop Pop