State’i Alt Bileşene Aktarma

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

Bir uygulama birçok widget'tan oluşur ve küçük bir widget'ın çoğu zaman daha büyük bir widget'ın sahip olduğu bir değere ihtiyacı olur. Burada puan, sayfanın State nesnesinde tutulur; ancak puanı gösteren pano, kendi başına bir widget'tır.

Bir değeri aşağıya aktarmak için çocuğa bir final alanı ekleyin ve kurucuda bu değeri isteyin:

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key, required this.score});

  final int score;

  @override
  Widget build(BuildContext context) {
    return Text('Score: $score');
  }
}

Ebeveyn, çocuğu her oluşturduğunda kendi değerini aktarır: ScoreBoard(score: score). Ebeveyn setState çağırdığında yeniden oluşturulur ve pano yeni sayıyı alır.

Çocuk değeri hiçbir zaman değiştirmez. Kendisine verilen değeri gösterir ve puanın tek sahibi ebeveyn olmaya devam eder.

Görev

Kolay

+1 düğmesi puanları artırıyor, ancak skor tablosunda her zaman Score: 0 yazıyor.

ScoreBoard sınıfına, kurucusu tarafından ayarlanan bir final int score alanı ekle.
Metnini Score: ve ardından bu puan olacak şekilde ayarla.
Sayfa skor tablosunu oluştururken sayfanın score değerini aktar.

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 score = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const ScoreBoard(),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score++;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Score: 0', style: TextStyle(fontSize: 32));
  }
}