Provider: Consumer

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

Di sini, provider dibuat di dalam build milik MyApp, dan build yang sama meminta lamp tepat di bawahnya. Aplikasi menampilkan error: context milik MyApp, yang berada di atas provider, dan widget hanya dapat menemukan provider yang berada di atasnya.

Consumer mengatasi masalah itu. Consumer adalah widget, jadi posisinya berada di bawah provider, dan builder-nya mendapatkan context baru serta modelnya sendiri:

Consumer<Lamp>(
  builder: (context, lamp, child) {
    return Text(lamp.isOn ? 'On' : 'Off');
  },
)

Builder dijalankan lagi setiap kali lamp memanggil notifyListeners(), seperti widget yang mengamatinya. Di dalamnya, kamu dapat langsung memanggil method model pada lamp: onPressed: () => lamp.toggle().

Consumer juga hanya membangun ulang bagian yang dibungkusnya, jadi membungkus bagian yang berubah akan membuat bagian layar lainnya tetap. Di sebagian besar aplikasi, kamu akan menggunakan context.watch di dalam widget tersendiri, dan menggunakan Consumer saat berada di dalam build yang sama dengan provider.

Tantangan

Sedang

Aplikasi menampilkan error saat dibuka. Masukkan bagian-bagian lampu ke dalam Consumer:

Bungkus Column dengan Consumer<Lamp> dan kembalikan Column dari builder-nya.
Di dalamnya, gunakan lamp dari builder untuk ikon, teks, dan tombol.

Coba sendiri

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

class Lamp extends ChangeNotifier {
  bool _isOn = false;

  bool get isOn => _isOn;

  void toggle() {
    _isOn = !_isOn;
    notifyListeners();
  }
}

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Lamp(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(title: const Text('Lamp')),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Icon(
                  context.watch<Lamp>().isOn ? Icons.lightbulb : Icons.lightbulb_outline,
                  size: 96,
                  color: context.watch<Lamp>().isOn ? Colors.amber : Colors.grey,
                ),
                Text(context.watch<Lamp>().isOn ? 'The lamp is on' : 'The lamp is off'),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => context.read<Lamp>().toggle(),
                  child: const Text('Switch'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Uji dirimu

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

Latihan sendiri: Compiler Flutter online

Provider: Consumer

Semua pelajaran di Pengelolaan State