State’i Üst Bileşene Taşıma

Coddy'nin Flutter Journey'sinin Durum Yönetimi bölümünün bir parçası. Ders 4 / 27.

Telefondaki başparmak simgesine dokun: yanındaki sayı artar, ancak üst çubuk hâlâ 0 likes gösterir. Düğme sayısını kendi State nesnesinde tutar ve başka hiçbir şey onu göremez.

İki widget aynı değere ihtiyaç duyduğunda, bu değeri ikisini de kapsayan en yakın widget’a taşı. Buna durumu yukarı taşıma denir. Sayfa likes değerinin sahibidir ve düğme, değeri ve bir geri çağırma işlevini alan bir StatelessWidget hâline gelir:

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

Artık tek bir yerde tek bir sayı var. Üst çubuk, düğme ve sıfırlama düğmesi bu tek değeri okuyup değiştirir; böylece birbirleriyle asla uyuşmazlık yaşayamazlar.

Hızlı bir test: Bir değer iki yerde gösteriliyor veya değiştiriliyorsa, bu değerin sahibi olan widget her ikisinin de üstünde olmalıdır.

Görev

Orta

Beğenilerin tek sahibi sayfa olsun:

LikeButton bileşenini iki alanı olan bir StatelessWidget hâline getirin: likes ve bir onLike geri çağrısı.
Sayfa kendi likes değerini ve setState içinde 1 artıran bir onLike işlevini iletir.

Böylece üst çubuk düğmeyi takip eder ve yenileme düğmesi her ikisini de sıfırlar.

Kendin dene

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