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

Création du projet Flutter avec Visual Studio Code

1. Création d'un nouveau projet

   1. Création d'un projet Flutter en utilisant le Terminal

      • Pour créer un projet Flutter à partir du terminal, suivez les étapes suivantes :

      flutter create nomPrenomEtudiant

      • Cette commande génère la structure initiale de votre projet Flutter. Répondez aux questions suivantes :
        • Quels sont les fichiers et dossiers créés par défaut dans un projet Flutter ?
        • À quoi sert le fichier pubspec.yaml?
        • Quelle est la différence entre les dossiers android, ios, et lib?

   2. Rappel : Tout est Widget

      • En Flutter, tout est un widget. Les widgets sont les blocs de construction de l'interface utilisateur. Répondez aux questions suivantes :
        • Citez trois exemples de widgets couramment utilisés en Flutter.
        • Quelle est la différence entre un StatelessWidget et un StatefulWidget?

2. Construire votre première application Flutter

   1. Première version : Un simple message

      • Créez une application Flutter qui affiche un message de bienvenue. Suivez les étapes suivantes :
        • Importez le package material.dart.
        • Créez une classe NomPrenom qui hérite de StatelessWidget.
        • Redéfinissez la méthode build pour retourner un MaterialApp avec un Text affichant "Bonjour à tous !".
        • Dans la méthode main, appelez runApp pour exécuter votre application.
      • Questions :
        • Quel est le rôle de la méthode build?
        • Pourquoi utilise-t-on MaterialApp dans cette application ?

   2. Deuxième version : Ajout d'une barre d'application et d'un corps

      • Améliorez votre application en ajoutant une barre d'application (AppBar) et un corps (body) avec un message personnalisé. Suivez les étapes suivantes :
        • Utilisez le widget Scaffold pour structurer votre interface.
        • Ajoutez une AppBar avec un titre personnalisé.
        • Dans le corps de l'application, affichez un message comme "Bienvenue (je suis prenomNom)".
      • Questions :
        • Quel est le rôle du widget Scaffold?
        • Comment personnaliser le titre de la AppBar?

Exercices supplémentaires

1. Créer un nouveau fichier main.dart

   • Dans le même projet Flutter, créez un nouveau fichier main.dart dans le dossier lib avec un contenu différent. Suivez les étapes suivantes :
     • Créez un nouveau fichier nommé main2.dart dans le dossier lib.
     • Copiez le code suivant dans ce fichier :

     
     import 'package:flutter/material.dart';
     
     void main() {
       runApp(MySecondApp());
     }
     
     class MySecondApp extends StatelessWidget {
       @override
       Widget build(BuildContext context) {
         return MaterialApp(
           home: Scaffold(
             appBar: AppBar(
               title: Text('Deuxième Application'),
             ),
             body: Center(
               child: Text('Ceci est ma deuxième application Flutter !'),
             ),
           ),
         );
       }
     }
         

   • Modifiez le fichier lib/main.dart pour exécuter cette nouvelle application :

     
     import 'main2.dart' as second_app;
     
     void main() {
       second_app.main(); // Exécute la deuxième application
     }
         

   • Exécutez l'application et vérifiez que le texte "Ceci est ma deuxième application Flutter !" s'affiche.
2. Questions :
   • Comment exécuter une application à partir d'un fichier différent de main.dart?
   • Quelle est l'utilité de l'instruction import en Dart ?

Instructions pour les Étudiants

• Compresser les Fichiers :
  • Ouvrez le dossier lib de votre projet Flutter.
  • Sélectionnez les fichiers main.dart, main2.dart, et README.txt.
  • Compressez-les dans un fichier ZIP (par exemple, tp_flutter_nom_prenom.zip).
• Soumettre le Fichier ZIP :
  • Téléversez le fichier ZIP sur la plateforme d'apprentissage.
• Vérifier le Contenu :
• Assurez-vous que les fichiers suivants sont inclus :
  • main.dart
  • main2.dart
  • README.txt
• Exemple de Structure du Fichier ZIP
  • Voici à quoi pourrait ressembler la structure du fichier ZIP soumis :
    tp_flutter_nom_prenom.zip ├── lib/ │ ├── main.dart │ ├── main2.dart │ └── README.txt