TP 2: Création d’une première application avec Flutter
TP 2: Création d’une première application avec Flutter
-
Objectif
- Cet article explique comment installer Flutter étape par étape, du téléchargement du logiciel Flutter jusqu’au démarrage sur Windows.
-
Créez votre premier projet Flutter
- Tapez la commande ctrl+shift+p sur Windows. Saisissez flutter sur la barre de recherche et cliquez sur l’option New Project.
- VS Code, va vous proposer différentes options, choisissez la première.
- Cliquez sur Application et choisissez un dossier pour votre projet.
- Validez et changez le nom de votre application.
- Tester l’application sur VS Code
- Pour tester l’application, nous allons appuyer sur la touche f5 sur Windows. Attendez quelques minutes, flutter est entrain de builder votre application.Une fois fini, vous obtenez ce résultat.
-
Modification du code
- Nous allons faire quelques manipulations du code généré par VS Code. Ouvrez le fichier lib/main.dart.
- Enlevez les commentaires automatiques
- Changez le titre de la page par « Découverte de Flutter »
- Changer le texte « You have pushed the button this many times: » par « Nombre: »
- Changer la couleur du titre de la page. Voir le paramètre « primarySwatch »
- Maintenant nous allons ajouter un bouton pour permettre d’enlever 1 au compteur
- Pour cela il faut ajouter une méthode pour enlever 1 au compteur. Pour cela prenez exemple sur la méthode « _incrementCounter » en ligne 53.Ensuite, il faut remplacer le code du floatingActionButton par celui-ci :
- Remplacez les icones « +1 » et « -1 » par plus et moins
- Ajoutez un nouveau bouton permettant de remettre à zéro le compteur
- Maintenant nous allons enlever l’onglet DEBUG qui apparait en haut à droite de l’écran. Pour cela il faut ajouter le code suivant : debugShowCheckedModeBanner: false,
- Après la ligne : title: ‘Flutter Demo’,
-
Affichage d’images stocké en local
- Vous allez ajouter une image à votre projet, pour cela vous devez :
- Télécharger une image de votre choix
- Créez dans votre projet un dossier « images »
- Mettre l’image dans votre dossier (un glisser déposer est suffisant)
- Mettre à jour le fichier
- Décommenter la ligne 62 et ajouter le code « – images/ » à la ligne 65
- Dans le main.dart mettre le code suivant :
- Image.asset(‘images/de.jpg’),
- Votre image devrait apparaitre
Ergonomie : Il est très souvent convenu qu’un seul Floating Buton doit être présent par écran. En générale le Floating Button doit correspondre à la fonction essentielle de l’écran. Mais pour des besoins très spécifique, il est possible d’en rajouter un ou deux autres.
ATTENTION aux nombres de retraits à la ligne, des bugs pourraient apparaitre. Il faut 2 espaces au niveau des sous éléments.
