Đưa state lên cấp trên

Thuộc phần Quản lý trạng thái trong hành trình Flutter của Coddy. Bài học 4 trên 27.

Nhấn vào ngón tay cái trên điện thoại: con số bên cạnh tăng lên, nhưng thanh trên cùng vẫn hiển thị 0 likes. Nút giữ số lượt thích trong State riêng, và không thành phần nào khác xem được giá trị đó.

Khi hai widget cần cùng một giá trị, hãy chuyển giá trị đó lên widget gần nhất chứa cả hai. Cách này gọi là đưa state lên cấp cao hơn. Trang quản lý likes, còn nút trở thành một StatelessWidget nhận giá trị và một callback:

LikeButton(
  likes: likes,
  onLike: () {
    setState(() {
      likes++;
    });
  },
)

Giờ đây, chỉ có một số đếm ở một nơi. Thanh trên cùng, nút và nút đặt lại đều đọc và thay đổi cùng một giá trị, nên chúng không bao giờ hiển thị số liệu khác nhau.

Thử nhanh: nếu một giá trị được hiển thị hoặc thay đổi ở hai nơi, widget quản lý giá trị đó phải nằm phía trên cả hai.

Thử thách

Trung bình

Hãy để trang là nơi duy nhất quản lý số lượt thích:

Chuyển LikeButton thành một StatelessWidget với hai trường: likes và một callback onLike.
Trang truyền likes của chính nó và một onLike tăng giá trị lên 1 bên trong setState.

Sau đó, thanh trên cùng sẽ cập nhật theo nút, còn nút làm mới sẽ đặt lại cả hai.

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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$likes likes'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              setState(() {
                likes = 0;
              });
            },
          ),
        ],
      ),
      body: const Center(
        child: LikeButton(),
      ),
    );
  }
}

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

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  int likes = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: const Icon(Icons.thumb_up),
          iconSize: 40,
          onPressed: () {
            setState(() {
              likes++;
            });
          },
        ),
        Text('$likes', style: const TextStyle(fontSize: 32)),
      ],
    );
  }
}