Provider: Bagikan Model

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

Menaikkan state berfungsi selama widget-widget berdekatan. Saat suatu nilai dibutuhkan di seluruh aplikasi, di dua layar, di bilah atas, atau jauh di dalam sebuah list, kamu harus meneruskannya melalui setiap widget di antaranya. Provider melewati langkah itu. Ini adalah package: sekumpulan kode yang kamu impor dengan import 'package:provider/provider.dart';.

Ada tiga bagian. Pertama, sebuah model: class yang menyimpan data dan extends ChangeNotifier. Method-nya mengubah data lalu memanggil notifyListeners():

class CupCounter extends ChangeNotifier {
  int _cups = 0;
  int get cups => _cups;

  void addCup() {
    _cups++;
    notifyListeners();
  }
}

Kedua, ChangeNotifierProvider di bagian atas tree membuat model sekali dan memberikannya kepada setiap widget di bawahnya:

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

Ketiga, widget mana pun di bawahnya memintanya: context.watch<CupCounter>() untuk menampilkannya, context.read<CupCounter>() untuk memanggil method. Judul dan tombol di bawah mendapatkan counter yang sama, dan tidak ada yang perlu diteruskan kepada keduanya.

Tantangan

Sedang

Buka aplikasinya: muncul error karena judul meminta CupCounter, tetapi tidak ada apa pun di atasnya yang menyediakannya.

Di main, bungkus MyApp dengan ChangeNotifierProvider yang membuat CupCounter.

Coba sendiri

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

class CupCounter extends ChangeNotifier {
  int _cups = 0;

  int get cups => _cups;

  void addCup() {
    _cups++;
    notifyListeners();
  }
}

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 StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const CupsTitle()),
      body: const Center(child: AddCupButton()),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final counter = context.watch<CupCounter>();
    return Text('Cups: ${counter.cups}');
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        context.read<CupCounter>().addCup();
      },
      child: const Text('Another cup'),
    );
  }
}

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