Découvrez ce que sont Flutter et Dart, installez les outils, créez votre premier projet et goûtez à la magie du hot reload.
Ouvrir cette leçon dans KodokonFlutter est un framework : une grande boîte à outils de code prêt à l'emploi, créée par Google pour construire des applications mobiles, c'est-à-dire les programmes que l'on installe sur un téléphone. Son grand atout : vous écrivez votre code une seule fois, et il fonctionne à la fois sur iPhone, sur Android, sur le web et même sur ordinateur. Ce code s'écrit en Dart, un langage de programmation : un ensemble de mots et de règles qui permettent de donner des instructions à une machine. Pour installer Flutter, suivez le guide officiel sur docs.flutter.dev (section Get started) : vous y téléchargerez le SDK (Software Development Kit, le kit qui contient tous les outils) et installerez un éditeur de code comme Visual Studio Code avec son extension Flutter. La vérification se fait ensuite dans le terminal : une fenêtre dans laquelle on tape des commandes textuelles pour piloter son ordinateur.
flutter doctorLa commande flutter doctor joue le rôle de médecin : elle examine votre machine et affiche une liste de points de contrôle, avec une coche verte pour ce qui est prêt et une croix pour ce qui manque, accompagnée d'instructions pour corriger. Quand l'essentiel est vert, vous pouvez créer votre premier projet : le dossier qui contiendra tout le code de votre application. Le nom d'un projet Flutter s'écrit en minuscules, sans espaces ni accents, avec des tirets bas (_) pour séparer les mots.
flutter create my_first_app
cd my_first_app
flutter runflutter create fabrique un dossier my_first_app contenant une application de démonstration complète. cd (change directory) entre dans ce dossier, et flutter run compile puis lance l'application sur un téléphone branché en USB, sur un émulateur (un téléphone virtuel affiché sur votre écran) ou dans le navigateur Chrome. Tout le code que vous écrirez vit dans le fichier lib/main.dart. Remplacez son contenu par ce programme minimal :
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const Scaffold(
body: Center(
child: Text("Bonjour Flutter !"),
),
),
);
}
}Lisons les grandes lignes, sans chercher à tout maîtriser : import charge la boîte à outils graphique de Flutter, void main() est le point d'entrée (la toute première fonction exécutée), et runApp démarre l'application en affichant le texte « Bonjour Flutter ! » au centre de l'écran. Chaque brique sera détaillée dans les prochaines leçons. Voici maintenant la magie du hot reload (rechargement à chaud) : modifiez le texte du message, enregistrez le fichier... et l'application affichée se met à jour instantanément, sans redémarrer. Ce cycle ultra-court est l'une des grandes forces de Flutter.