Écrire un StatefulWidget

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 12 sur 34.

Cette fois, vous écrivez vous-même le StatefulWidget. L’écran affiche I feel Sleepy, et une pression sur Boire du café devrait le faire passer à I feel Awake. En tant que StatelessWidget, il ne le peut jamais.

Pour transformer un StatelessWidget en StatefulWidget, suivez trois étapes :

Remplacez extends StatelessWidget par extends StatefulWidget, et remplacez son build par createState.
Écrivez la classe State en dessous et déplacez-y build, sans le modifier.
Déplacez la variable qui change hors de build, en haut de la classe State.

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _mood = 'Sleepy';

  @override
  Widget build(BuildContext context) {
    ...
  }
}

L’étape 3 est importante. Une variable déclarée en haut de build est recréée chaque fois que build s’exécute ; après setState, elle reprendrait donc la valeur 'Sleepy'. En haut de la classe State, elle n’est créée qu’une seule fois et conserve la valeur que vous lui attribuez.

Défi

Moyen

Transforme HomePage en StatefulWidget avec une classe _HomePageState. Garde l’humeur dans String _mood = 'Sleepy'; en haut de l’état, et fais en sorte que Drink coffee la change en 'Awake' avec setState.

Essayez vous-même

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(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    String mood = 'Sleepy';
    return Scaffold(
      appBar: AppBar(title: Text('Mood')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('I feel $mood', style: TextStyle(fontSize: 32)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text('Drink coffee'),
            ),
          ],
        ),
      ),
    );
  }
}