Escribe un StatefulWidget

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 12 de 34.

Esta vez vas a escribir tú mismo el StatefulWidget. La pantalla muestra I feel Sleepy, y al pulsar Drink coffee debería cambiar a I feel Awake. Como StatelessWidget, nunca puede hacerlo.

Convertir un StatelessWidget en un StatefulWidget requiere tres pasos:

Cambia extends StatelessWidget por extends StatefulWidget y sustituye su build por createState.
Escribe debajo la clase State y mueve allí build, sin cambios.
Mueve la variable que cambia fuera de build y colócala al principio de la clase 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) {
    ...
  }
}

El paso 3 es importante. Una variable al principio de build se vuelve a crear cada vez que se ejecuta build, así que después de setState volvería a ser 'Sleepy'. Al principio de la clase State se crea una sola vez y conserva el valor que le asignes.

Desafío

Intermedio

Convierte HomePage en un StatefulWidget con una clase _HomePageState. Mantén el estado de ánimo en String _mood = 'Sleepy'; al principio del State y haz que Drink coffee lo cambie a 'Awake' con setState.

Pruébalo tú mismo

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'),
            ),
          ],
        ),
      ),
    );
  }
}