Napisz StatefulWidget

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 12 z 34.

Tym razem samodzielnie napiszesz StatefulWidget. Na ekranie widnieje tekst I feel Sleepy, a naciśnięcie przycisku Napij się kawy powinno zmienić go na I feel Awake. Jako StatelessWidget nigdy nie może tego zrobić.

Przekształcenie StatelessWidget w StatefulWidget wymaga trzech kroków:

Zmień extends StatelessWidget na extends StatefulWidget i zastąp jego build przez createState.
Napisz pod nim klasę State i przenieś tam build bez zmian.
Przenieś zmienną, która ulega zmianie, z build na początek klasy 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) {
    ...
  }
}

Krok 3 ma znaczenie. Zmienna umieszczona na początku build jest tworzona ponownie za każdym razem, gdy uruchamia się build, więc po setState znów miałaby wartość 'Sleepy'. Na początku klasy State jest tworzona raz i zachowuje przypisaną jej wartość.

Wyzwanie

Średni

Zmień HomePage w StatefulWidget z klasą _HomePageState. Przechowuj nastrój w String _mood = 'Sleepy'; na początku stanu i spraw, aby Drink coffee zmieniało go na 'Awake' za pomocą setState.

Spróbuj swoich sił

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