Beberapa Model: MultiProvider

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

Buat setiap model menangani satu hal: skor di satu class, nyawa di class lain. Model yang kecil mudah dibaca, dan widget hanya mengamati hal yang dibutuhkannya. Aplikasi dengan beberapa model membutuhkan beberapa provider.

Kamu bisa menumpuknya, dengan satu provider sebagai anak dari provider berikutnya, tetapi kode akan bergeser ke kanan setiap kali ada model. MultiProvider menggunakan daftar datar:

runApp(
  MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => Score()),
      ChangeNotifierProvider(create: (context) => Lives()),
    ],
    child: const MyApp(),
  ),
);

Provider dalam daftar tidak memiliki child sendiri: MultiProvider menumpuknya untukmu dan menempatkan child di bawah semuanya. Setiap widget di bawahnya dapat mengamati atau membaca model mana pun berdasarkan tipenya: context.watch<Lives>().

Tantangan

Mudah

Halaman game memantau dua model, Score dan Lives, tetapi main hanya menyediakan skor, sehingga aplikasi menampilkan error.

Ganti provider di main dengan MultiProvider yang menyediakan kedua model.

Coba sendiri

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Score extends ChangeNotifier {
  int _points = 0;

  int get points => _points;

  void hit() {
    _points += 10;
    notifyListeners();
  }
}

class Lives extends ChangeNotifier {
  int _left = 3;

  int get left => _left;

  void miss() {
    if (_left > 0) {
      _left--;
      notifyListeners();
    }
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Score(),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: GamePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final points = context.watch<Score>().points;
    final lives = context.watch<Lives>().left;
    return Scaffold(
      appBar: AppBar(title: Text('Lives: $lives')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Points: $points', style: const TextStyle(fontSize: 40)),
            const SizedBox(height: 16),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton(
                  onPressed: () => context.read<Score>().hit(),
                  child: const Text('Hit'),
                ),
                const SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () => context.read<Lives>().miss(),
                  child: const Text('Miss'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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