Angkat State ke Atas

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 4 dari 27.

Ketuk ikon jempol di ponsel: angkanya bertambah, tetapi bilah atas tetap menampilkan 0 likes. Tombol menyimpan hitungannya di State miliknya sendiri, dan tidak ada bagian lain yang bisa melihatnya.

Jika dua widget memerlukan nilai yang sama, pindahkan nilai itu ke widget terdekat yang menaungi keduanya. Ini disebut mengangkat state ke atas. Halaman memiliki likes, dan tombol menjadi StatelessWidget yang menerima nilai dan callback:

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

Sekarang hanya ada satu hitungan di satu tempat. Bilah atas, tombol, dan tombol reset semuanya membaca dan mengubah satu nilai itu, jadi nilainya tidak mungkin berbeda.

Tes singkat: jika suatu nilai ditampilkan atau diubah di dua tempat, widget yang memilikinya harus berada di atas keduanya.

Tantangan

Sedang

Jadikan halaman sebagai satu-satunya pemilik jumlah suka:

Ubah LikeButton menjadi StatelessWidget dengan dua field: likes dan callback onLike.
Halaman meneruskan likes miliknya sendiri, serta onLike yang menambah 1 di dalam setState.

Lalu bilah atas mengikuti tombol, dan tombol segarkan mengatur ulang keduanya.

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online