Flutter: bộ đếm đầu tiên và cách cập nhật state

Bài thực hành này dành cho người đã cài Flutter SDK và cấu hình một thiết bị chạy thử. Bạn sẽ làm một bộ đếm đơn giản, qua đó thấy dữ liệu và giao diện liên hệ với nhau như thế nào.

1. Kiểm tra môi trường

Chạy lệnh sau trong terminal. Đọc kết quả để biết công cụ nào còn thiếu. Chỉ cần hoàn tất phần liên quan đến nền tảng định chạy; chẳng hạn chạy iOS cần môi trường macOS phù hợp.

flutter doctor
flutter devices

Nếu chưa có thiết bị, làm theo hướng dẫn cài đặt chính thức của Flutter ở cuối bài trước khi tiếp tục.

2. Tạo dự án mới

Dùng một thư mục thử nghiệm mới, tránh ghi đè dự án đang làm.

flutter create akashic_counter
cd akashic_counter

3. Tạo màn hình bộ đếm

Mở tệp lib/main.dart và thay nội dung bằng đoạn mã sau:

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: CounterPage()));

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bộ đếm đầu tiên')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Số lần nhấn: $count'),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () => setState(() => count += 1),
              child: const Text('Tăng thêm 1'),
            ),
          ],
        ),
      ),
    );
  }
}

Chạy flutter run rồi chọn thiết bị đã cấu hình nếu công cụ yêu cầu. Màn hình ban đầu hiển thị số 0; mỗi lần nhấn nút, số tăng thêm 1.

4. Hiểu luồng cập nhật

count là dữ liệu của màn hình. Khi người dùng bấm nút, callback thay đổi giá trị trong setState, báo cho Flutter rằng giao diện cần được dựng lại. Phương thức build đọc giá trị hiện tại để tạo văn bản.

Đây là trạng thái trong bộ nhớ. Dừng và mở lại ứng dụng sẽ đưa bộ đếm về 0; lưu dữ liệu lâu dài là một bài toán khác.

Tự kiểm tra và mở rộng

• Nhấn ba lần: kết quả phải là 3.
• Thử thêm nút đặt lại với setState(() => count = 0).
• Tăng cỡ chữ trong cài đặt thiết bị và kiểm tra nút vẫn sử dụng được.

Nếu terminal báo lỗi, đọc dòng lỗi đầu tiên và kiểm tra dấu ngoặc, dấu chấm phẩy cùng tên lớp trước khi thử lại.

Tài liệu tham khảo

Flutter learning pathway. Ví dụ và bài tập trong bài do Akashic biên soạn.

Đăng nhập để lưu bài viết ↗