Viết StatefulWidget

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 12 trên 34.

Lần này, bạn sẽ tự viết StatefulWidget. Màn hình hiển thị I feel Sleepy, và khi nhấn Uống cà phê, nội dung sẽ đổi thành I feel Awake. Với StatelessWidget, bạn không thể làm được điều đó.

Để chuyển StatelessWidget thành StatefulWidget, bạn cần làm ba bước:

Đổi extends StatelessWidget thành extends StatefulWidget, rồi thay build bằng createState.
Viết lớp State bên dưới và chuyển build vào đó, giữ nguyên.
Chuyển biến thay đổi ra khỏi build lên đầu lớp 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) {
    ...
  }
}

Bước 3 rất quan trọng. Biến nằm ở đầu build sẽ được tạo lại mỗi khi build chạy, vì vậy sau setState, biến sẽ trở về 'Sleepy'. Nếu đặt biến ở đầu lớp State, biến chỉ được tạo một lần và giữ nguyên giá trị bạn gán cho nó.

Thử thách

Trung bình

Chuyển HomePage thành một StatefulWidget với lớp _HomePageState. Lưu trạng thái tâm trạng trong String _mood = 'Sleepy'; ở đầu lớp State, rồi để Drink coffee thay đổi giá trị đó thành 'Awake' bằng setState.

Tự làm thử

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