Hot Reload giữ nguyên trạng thái

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

Bản xem trước có hai cách để áp dụng thay đổi của bạn. Run khởi chạy ứng dụng từ đầu. Hot reload thay code mới vào khi ứng dụng vẫn đang chạy và giữ nguyên State: bộ đếm vẫn giữ số hiện tại.

Thử nhé: nhấn dấu cộng vài lần, đổi màu của số rồi nhấn Hot reload. Màu mới sẽ xuất hiện và số đếm vẫn còn nguyên. Khi bạn chỉnh kiểu dáng màn hình, cách này giúp bạn không phải nhấn liên tục để quay lại vị trí trước đó.

Hot reload dựng lại màn hình bằng code mới của bạn nhưng không tạo State mới. Vì vậy, thay đổi giá trị ban đầu, chẳng hạn từ int _count = 0; thành int _count = 10;, sẽ không hiển thị: dòng đó chỉ chạy khi State được tạo. Nhấn Run để xem thay đổi.

Điều tương tự cũng áp dụng cho main và việc chuyển StatelessWidget thành StatefulWidget. Nếu thay đổi không hiển thị sau khi Hot reload, hãy nhấn Run.

Thử thách

Dễ

Đặt cỡ số là 64 và màu là Colors.deepPurple. Nhấn nút cộng vài lần trước, rồi dùng Hot reload và xem số đếm vẫn giữ nguyên.
Đặt bộ đếm bắt đầu từ 10. Lưu ý rằng Hot reload không hiển thị thay đổi này, còn Run thì có.

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;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  void _decrease() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}