Rendez vos écrans vivants en réagissant aux appuis sur un bouton et en mettant l'affichage à jour avec setState.
Ouvrir cette leçon dans KodokonNos écrans sont jolis mais figés : il est temps de réagir aux gestes de l'utilisateur. Le bouton standard de Material 3 est ElevatedButton. Il reçoit deux paramètres essentiels : child, son contenu affiché (souvent un Text), et onPressed, la fonction à exécuter quand on appuie dessus. Une fonction passée ainsi en paramètre s'appelle un callback (fonction de rappel) : vous ne l'appelez pas vous-même, c'est Flutter qui l'appelle pour vous, au bon moment. La syntaxe () { ... } crée une fonction anonyme, sans nom, écrite directement sur place.
import 'package:flutter/material.dart';
Widget buildHelloButton() {
return ElevatedButton(
onPressed: () {
debugPrint("Bouton pressé !");
},
child: const Text("Appuyez ici"),
);
}debugPrint écrit dans la console... mais l'écran, lui, ne change pas. Pourquoi ? Parce qu'un StatelessWidget (widget sans état) est figé : une fois construit, il ne peut plus changer. Pour afficher une valeur qui évolue, il faut un StatefulWidget (widget avec état). L'état (state en anglais), c'est l'ensemble des données qui peuvent changer pendant la vie du widget : un compteur, une case cochée, un texte saisi... Un StatefulWidget va toujours de pair avec une classe State, qui garde ces données et contient la méthode build. Voici le grand classique des débuts : le compteur.
import 'package:flutter/material.dart';
void main() {
runApp(const CounterApp());
}
class CounterApp extends StatelessWidget {
const CounterApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() =>
_CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Compteur : $count",
style: const TextStyle(fontSize: 32),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
setState(() {
count = count + 1;
});
},
child: const Text("+1"),
),
],
),
),
);
}
}Le mécanisme tient en trois temps. 1) La variable count vit dans _CounterPageState : c'est l'état. 2) À chaque appui, le callback appelle setState : cette méthode modifie l'état et prévient Flutter que quelque chose a changé. 3) Flutter réexécute alors build, qui redessine l'écran avec la nouvelle valeur de count. Retenez la philosophie : vous ne modifiez jamais l'écran directement, vous modifiez les données, et Flutter se charge de l'affichage.