L'intégration d'animations dans les applications Flutter
Vous connaissez les bases du développement avec Flutter?
Vous connaissez le langage Dart?
Et si on allait un peu plus loin?
Dans ce cours, nous allons apprendre à animer nos applications grâce aux nombreux Widgets dédiés déjà présents dans le framework Flutter. En effet, une application animée engage plus l’utilisateur, lui donne une identité et permet de se démarquer des nombreuses applications déjà présentes sur les stores.
Nous allons voir ensemble:
- Les Widgets animated: Les classiques
- Le HeroWidget pour des transitions originales
- Le AnimatedList, pour des listes vivantes
- Les Transitions: Une variante des classiques
- Le AnimatedBuilder: un constructeur
- Comment créer un graphique animé
- Comment écouter le statut des animations en cours
- Comment créer un menu animé
- Comment recréer l’animation de Tinder.
Vous êtes prêts? Je vous attends sur le cours
Introduction et mise en place du Projet
1
Présentation du cours
2
Mise en place du projet
3
Le Widget HomePage
4
ListView et ListTile
Le AnimatedContainer
1
Le AnimatedContainer
2
Animer la hauteur et la largeur
3
Les Curves
4
Animer une couleur
5
Animer le shadow
6
Animer le radius
Les Autres Widgets Animated
1
Création du Widget principal
2
FadeInImage
3
AnimatedOpacity
4
AnimatedCrossFade
5
AnimatedText
6
AnimatedSize
7
AnimatedPositions
Le Hero
1
La Liste des Villes
2
Le Widget Hero
3
Le HeroDetail
La AnimatedList
1
Création de la Liste
2
Insérer ou supprimer
Les Widgets Transiton
1
La TransitionList
2
Le AnimatedTransitionController
3
Le DecoratedBoxTranisiton
4
Le FadeInTransition
5
Le PositonTransition
6
Le RotationTransition
7
Le ScaleTransition
8
Le SizeTransition
9
Le SlideTransition
D'autres Widgets Animés
1
Le AnimatedBuilder
2
Le AnimatedPhysicalModel
Création d'un graphique animé avec nos connaissances
1
Partie 1
2
Partie 2
Ajout de Listeners
1
Mise en place du animationListener
2
AddListener
3
AddStatusListener
4
Animations multiples avec Listener
Création d'un Menu
1
Mise en place du Controller
2
Le AnimatedMenu
3
Ouvrir et fermer
4
Sortir les autres boutons
5
Effectuer une rotation
Création d'une animation comme Tinder
1
Mise en place du contrôler
2
le TinderCard
3
Tourner la carte
4
Déplacer la carte
5
Téléchargez ici le projet complet
6
Le projet complet