setState vẽ lại màn hình

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 11 trên 34.

Nhấn Thêm một trong ứng dụng này và xem Console: 1, 2, 3. Con số trên màn hình vẫn là 0. Flutter dựng màn hình một lần, và không có gì yêu cầu ứng dụng dựng lại.

StatelessWidget không bao giờ thay đổi. Màn hình có thể thay đổi là StatefulWidget, được viết thành hai lớp:

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

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

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

HomePage chỉ cho biết cần tạo State nào (createState, viết theo dạng mũi tên trong bài Functions That Return Values). _HomePageState đảm nhận phần việc còn lại: lưu dữ liệu của màn hình trong các biến ở đầu lớp, chẳng hạn như _count, rồi dựng màn hình. Lớp này tồn tại chừng nào màn hình còn tồn tại, vì vậy _count giữ nguyên giá trị qua mỗi lần dựng.

Để thay đổi màn hình, hãy thay đổi dữ liệu bên trong setState. Lệnh này báo cho Flutter biết “dữ liệu đã thay đổi, hãy dựng lại”, và Text hiển thị con số mới:

setState(() {
  _count = _count + 1;
});

Dấu gạch dưới ở đầu _HomePageState và _count khiến tên trở thành riêng tư: chỉ tệp này mới có thể sử dụng chúng. Các lớp State và biến của chúng thường có dấu gạch dưới này.

Thử thách

Trung bình

Mỗi lần nhấn Add one, hãy tăng số trên màn hình lên một: đặt thay đổi của _count bên trong 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 StatefulWidget {
  const HomePage({super.key});

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

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _count = _count + 1;
                print(_count);
              },
              child: Text('Add one'),
            ),
          ],
        ),
      ),
    );
  }
}