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

Pour créer un projet Flutter à partir du terminal, vous pouvez utiliser la commande suivante :

Cette commande permet de générer la structure initiale de votre projet Flutter. Voici ce qu’elle fait :

• Création du répertoire du projet avec le nom spécifié ( (le nomPrenomEtudiant)).
• Génération des fichiers de configuration essentiels, comme pubspec.yaml, qui gère les dépendances de votre projet.
• Création des dossiers par défaut comme lib (pour le code source), test (pour les tests), et android, ios (pour la compatibilité avec les plateformes respectives).
• Installation des packages nécessaires pour lancer l’application Flutter de base.

Cette méthode est rapide et efficace si vous préférez travailler directement avec la ligne de commande ou un environnement minimaliste.

Une application Flutter est une application où le développeur construit une interface graphique en ajoutant des widgets. Les widgets sont des composants, les blocs constructifs de votre interface utilisateur :

• Un bouton est un widget
• Du texte est un widget
• La barre est un widget
• Tout est widget

Tout sur Flutter est Widget.

Pour créer un Widget, il faut créer une classe qui hérite d’une classe prédéfinie fournie par Flutter (soit dans le cadre de cet exemple la classe StatelessWidget).

Pour faire appel à cette classe, il faut importer le package :

import 'package:flutter/material.dart';

Note : Par convention, le nom de la classe ne doit pas contenir d’underscore ou de symbole, et il est préférable que son nom commence par une majuscule.

Pour hériter de la classe de l’API StatelessWidget, il faut redéfinir la méthode build() de cette classe. Cette méthode build() doit avoir comme paramètre l’objet BuildContext (cet objet est également fourni par le package importé).

La méthode build(BuildContext context) doit retourner un objet de type Widget :

class NomPrenom extends StatelessWidget {
  // La méthode build retourne un widget
  Widget build(BuildContext context) {
    // La méthode MaterialApp() est fournie par le package material.dart
    return MaterialApp(
      home: Text('Bonjour à tous !'),
    );
  }
}
    

Sur la méthode main(), on a besoin d’exécuter un code pour faire appel à la méthode build du widget NomPrenom :

void main() {
  // runApp() se trouve dans la librairie material
  runApp(NomPrenom()); // NomPrenom() instantiation de la classe qui hérite du widget
}
    

La méthode build est la méthode qui va être appelée par Dart et Flutter lorsqu’ils essaieront de dessiner sur l’écran, et c’est pour cela qu’elle doit retourner un Widget.

class NomPrenom extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ma Première Application Flutter'),
        ),
        body: Text('Bienvenue (je suis prenomNom)'),
      ),
    );
  }
}