TP 1: Création d’une première application avec Flutter
Sommaire
- 1- Objectif
- 2- Création du projet Flutter avec Visual Studio Code
- 2.1- Création d'un nouveau projet
- 2.1.1- Création d'un projet Flutter en utilisant le Terminal
- 2.1.2- Rappel : Tout est Widget
- 2.2- Construire votre première application Flutter
- 2.2.1- Première version : Un simple message
- 2.2.2- Deuxième version : Ajout d'une barre d'application et d'un corps
- 3- Exercices supplémentaires
- 3.1- Créer un nouveau fichier main.dart
- 4- Instructions pour les Étudiants
- 4.1.1- Cours Flutter
TP 1: Création d’une première application avec Flutter
-
Objectif
- Ce TP a pour objectif de vous initier à la création d’une application Flutter en utilisant Visual Studio Code. Vous apprendrez à créer un projet Flutter, à comprendre la structure de base d’une application Flutter, et à construire une interface utilisateur simple.
-
Création du projet Flutter avec Visual Studio Code
-
Création d’un nouveau projet
-
Création d’un projet Flutter en utilisant le Terminal
- Pour créer un projet Flutter à partir du terminal, suivez les étapes suivantes :
- 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, etlib? -
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
StatelessWidgetet unStatefulWidget? -
Construire votre première application Flutter
-
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
NomPrenomqui hérite deStatelessWidget. - Redéfinissez la méthode
buildpour retourner unMaterialAppavec unTextaffichant « Bonjour à tous ! ». - Dans la méthode
main, appelezrunApppour exécuter votre application. - Questions :
- Quel est le rôle de la méthode
build? - Pourquoi utilise-t-on
MaterialAppdans cette application ? -
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
Scaffoldpour structurer votre interface. - Ajoutez une
AppBaravec 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
-
Créer un nouveau fichier main.dart
- Dans le même projet Flutter, créez un nouveau fichier
main.dartdans le dossierlibavec un contenu différent. Suivez les étapes suivantes : - Créez un nouveau fichier nommé
main2.dartdans le dossierlib. - Copiez le code suivant dans ce fichier :
- Modifiez le fichier
lib/main.dartpour exécuter cette nouvelle application : - Exécutez l’application et vérifiez que le texte « Ceci est ma deuxième application Flutter ! » s’affiche.
- Questions :
- Comment exécuter une application à partir d’un fichier différent de
main.dart? - Quelle est l’utilité de l’instruction
importen 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 :
flutter create nomPrenomEtudiant
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 !'),
),
),
);
}
}
import 'main2.dart' as second_app;
void main() {
second_app.main(); // Exécute la deuxième application
}
-
tp_flutter_nom_prenom.zip
├── lib/
│ ├── main.dart
│ ├── main2.dart
│ └── README.txt
