FORMATION FLUTTER
JOUR 1
FORMATEUR
Irié Bi Irié Alex
1
SOMMAIRE
2
SOMMAIRE
INTRODUCTI
ON A
FLUTTER
2
SOMMAIRE
INTRODUCTI PREMIERS
ON A WIDGETS
FLUTTER
2
SOMMAIRE
INTRODUCTI PREMIERS EXERCICES
ON A WIDGETS PRATIQUES
FLUTTER (1)
2
SOMMAIRE
INTRODUCTI PREMIERS EXERCICES COMPOSANT
ON A WIDGETS PRATIQUES S DE BASE
FLUTTER (1)
2
SOMMAIRE
INTRODUCTI PREMIERS EXERCICES COMPOSANT EXERCICES
ON A WIDGETS PRATIQUES S DE BASE PRATIQUES
FLUTTER (1) (2)
2
SOMMAIRE
INTRODUCTI PREMIERS EXERCICES COMPOSANT EXERCICES
ON A WIDGETS PRATIQUES S DE BASE PRATIQUES
FLUTTER (1) (2)
2
INTRODUCTION A
FLUTTER
3
PRESENTATION
APERCU PUISSANCE COMMUNAUTE
Permet de créer des Il existe des millions
Permet de créer des
applis en tout genre de développeurs
applications très
sur les toutes les Flutter dans le
performantes.
plateformes. monde entier !
4
POTENTIEL DE FLUTTER
QUELQUES APPLICATIONS CODEES AVEC FLUTTER
MIGRATO IQ PARIS TIMO IQ
SERVETTE
BYL LIVO MEDICO MARKETO
EXPRESS
5
Démo N°1 :
La marketplace
Marketo
6
Démo N°2 :
L’application de
livraison Byl
Express
7
Démo N°3 :
Le jeu de reflexion
Connecto
8
INSTALLATION ET CONFIGURATION
https://docs.flutter.dev/get-started/install
TELECHARGEMENT PATH ANDROID STUDIO
Mettre à jour les Installer Android
Télécharger Flutter
variables Studio et accepter
sur son site officiel.
d’environnement. les licences.
9
INSTALLATION ET CONFIGURATION
INSTALLER L’EXTENSION FLUTTER DE VS CODE
Installez l’extension
« Flutter » de VS Code
dans le menu
Extensions de VS Code.
1
0
INSTALLATION ET CONFIGURATION
CRÉER UN NOUVEAU PROJET
Cliquez sur
« Affichage » puis
« Palette de
commandes » puis
« Flutter : New Project »
pour créer un projet !
1
1
INSTALLATION ET CONFIGURATION
LANCER UN PROJET
Cliquer sur le bouton en
forme de flèche en haut
à droite.
1
2
HELLO WORLD
L’application
produite par le
code de base de
Flutter est la
suivante :
1
3
PREMIERS WIDGETS
1
4
SCAFFOLD
RASSEMBLE LES ELEMENTS USUELS D’UNE PAGE
appBar Contient un objet de type AppBar définissant le header de la page
body Contient un widget définissant le corps de la page
floatingActionButton Définit le FAB (Floating Action Button) éventuel de la page
bottomSheet Définit le footer de l’application
backgroundColor Permet de définir la couleur de fond du Scaffold
drawer Permet de définir un menu hamburger pour la page
1
5
APPBAR
CREE UNE APP BAR
title Le titre de la barre
actions L’ensemble des éléments à afficher à droite de la barre
backgroundColor Définit la couleur de fond de la barre
bottom L’élément à afficher sous la barre
centerTitle Indique si le titre doit être centré ou non
elevation Définit le niveau d’ombre voulu pour la barre
foregroundColor Définit la couleur par défaut des textes et icônes de la barre
leading Définit l’élément qui doit s’afficher à gauche de la barre
1
6
CONTAINER
CRÉER UN BLOC INVISIBLE SIMILAIRE A LA BALISE DIV
alignment Définit l’endroit où le child doit s’afficher
child Définit l’élément encapsulé par le conteneur
margin Définit la marge externe du conteneur
color Définit la couleur du conteneur
padding Définit la marge interne du conteneur
decoration Définit la décoration (le style) du conteneur (rayon de courbure, bordure, …)
height Définit la hauteur du conteneur
width Définit la largeur du conteneur
1
7
TEXT
AFFICHE UN TEXTE
valeur Définit la valeur du texte (premier paramètre obligatoire sans nom)
maxLines Définit le nombre maximal de lignes pour le texte
overflow Définit la manière dont un surplus éventuel de texte doit s’afficher
style Définit le style à appliquer au texte (couleur, police, …)
textAlign Définit l’alignement du texte (centre, gauche, droite)
1
8
ROW
AFFICHE SES WIDGETS ENFANTS HORIZONTALEMENT
children Contient l’ensemble des éléments de la ligne
1
9
COLUMN
AFFICHE SES WIDGETS ENFANTS VERTICALEMENT
children Contient l’ensemble des éléments de la ligne
2
0
STACK
EMPILE DES ELEMENTS LES UNS SUR LES AUTRES
children Contient l’ensemble des éléments de la pile
fit Définit la manière dont les widgets non enfants de Positioned s’affichent
clipBehavior Définit la manière dont les widgets qui dépassent s’affichent
2
1
POSITIONED
PERMET DE POSITIONNER DES ELEMENTS DANS UN STACK
child Contient l’élément à positionner
top Permet de définir le décalage de child par rapport au haut
bottom Permet de définir le décalage de child par rapport au bas
right Permet de définir le décalage de child par rapport à la droite
left Permet de définir le décalage de child par rapport à la gauche
width Permet de définir la largeur voulue pour child
height Permet de définir la hauteur voulue pour child
2
2
EXERCICES PRATIQUES
(1)
2
3
EXERCICES PRATIQUES (1)
Réaliser l’écran
suivant en utilisant
vos connaissances
actuelles !
2
4
COMPOSANTS DE BASE
2
5
WIDGETS USUELS
SizedBox Permet de créer un petit espace
Center Permet de centrer son enfant
ElevatedButton Permet de créer un bouton classique
TextButton Permet de créer un bouton plat (flat button) sans bordure
OutlinedButton Permet de créer un bouton plat avec une bordure
Icon Permet de créer une icône
IconButton Permet de créer un bouton circulaire qui possède une icône
Opacity Permet de changer l’opacité d’un widget enfant
2
6
WIDGETS USUELS
Visibility Permet d’afficher ou non un widget
AbsorbPointer Permet d’annuler (absorber) tout effet de la souris ou du doigt de l’utilisateur
ListView Permet de créer une liste de widgets scrollable
GridView Permet de créer une grille de widgets scrollable
SingleChildScrollView Permet de rendre scrollable n’importe quel type de widget
PageView Permet de créer un carrousel
ListTile Permet de créer un widget usuel affichant un élément de liste
Padding Permet de créer une marge autour d’un objet
2
7
IMAGES, POLICES ET ASSETS
PRESENTATION
AJOUT UTILISATION
Insérer le chemin du
Faire référence au
fichier dans
fichier dans le code.
pubspec.yaml.
2
8
IMAGES, POLICES ET ASSETS
UTILISATION
Insérer le chemin du
fichier dans
pubspec.yaml
2
9
IMAGES, POLICES ET ASSETS
UTILISATION
Faire référence au
fichier dans le code
3
0
EXERCICES PRATIQUES
(2)
3
1
EXERCICES PRATIQUES (2A)
Réaliser l’écran
suivant en utilisant
vos connaissances
actuelles, le
composant
ListTile et une
image
quelconque !
3
2
EXERCICES PRATIQUES (2B)
Réaliser l’écran
suivant avec vos
connaissances
actuelles !
3
3
