TP 2: Création d'une première application avec Flutter

Créez votre premier projet Flutter

1. Tapez la commande ctrl+shift+p sur Windows. Saisissez flutter sur la barre de recherche et cliquez sur l'option New Project.



2. VS Code, va vous proposer différentes options, choisissez la première.



3. Cliquez sur Application et choisissez un dossier pour votre projet.
4. Validez et changez le nom de votre application.



5. Tester l'application sur VS Code
6. 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.



7. 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',

   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.

8. 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 pubspec.yaml"

   

   • Décommenter la ligne 62 et ajouter le code « - images/ » à la ligne 65

   

   ATTENTION aux nombres de retraits à la ligne, des bugs pourraient apparaitre. Il faut 2 espaces au niveau des sous éléments.

   • Dans le main.dart mettre le code suivant :
     • Image.asset('images/de.jpg'),
     • Votre image devrait apparaitre