Поднятие состояния

Часть раздела Управление состоянием путешествия по Flutter на Coddy. Урок 4 из 27.

Нажми на значок большого пальца на телефоне: число рядом с ним увеличится, но в верхней панели по-прежнему будет указано 0 likes. Кнопка хранит счётчик в собственном State, и больше никто не может его видеть.

Когда двум виджетам нужно одно и то же значение, подними его к ближайшему общему родительскому виджету. Это называется поднятием состояния вверх. Страница владеет значением likes, а кнопка становится StatelessWidget, который получает это значение и функцию обратного вызова:

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

Теперь счётчик хранится в одном месте. Верхняя панель, кнопка и кнопка сброса читают и изменяют одно и то же значение, поэтому их значения никогда не разойдутся.

Быстрая проверка: если значение отображается или изменяется в двух местах, владеющий им виджет должен находиться выше обоих.

Задание

Средне

Сделай страницу единственным владельцем количества отметок «Нравится»:

Преврати LikeButton в StatelessWidget с двумя полями: likes и обратным вызовом onLike.
Страница передаёт собственное значение likes и обратный вызов onLike, который увеличивает значение на 1 внутри setState.

Тогда верхняя панель будет следовать за кнопкой, а кнопка обновления будет сбрасывать оба значения.

Попробуйте сами

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