Provider: Pantau atau Baca

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

Ada dua cara untuk mendapatkan model dari Provider, dan keduanya memiliki fungsi yang berbeda.

context.watch<StepCounter>() mendapatkan model dan berlangganan ke model tersebut: saat model memanggil notifyListeners(), widget ini akan dibangun ulang. Gunakan di build, untuk apa pun yang ditampilkan layar.

context.read<StepCounter>() mendapatkan model sekali, tanpa berlangganan. Gunakan di callback seperti onPressed, saat kamu ingin memanggil method dan tidak menampilkan apa pun:

Widget build(BuildContext context) {
  final steps = context.watch<StepCounter>().steps;   // menampilkan
  return ElevatedButton(
    onPressed: () => context.read<StepCounter>().walk(),   // menjalankan aksi
    child: Text('$steps steps'),
  );
}

Jika kamu mencampuradukkannya, kamu akan melihat akibatnya. read di build menampilkan nilai pertama selamanya. watch di dalam onPressed menyebabkan error, karena ketukan bukan proses build dan tidak ada yang perlu dilanggani.

Tantangan

Mudah

Walk menambahkan 1000 langkah ke model, tetapi layar tetap menampilkan 0 steps.

Buat baris langkah mengikuti model, sehingga setiap ketukan menampilkan angka baru.
Biarkan pemanggilan tombol seperti semula.

Coba sendiri

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

class StepCounter extends ChangeNotifier {
  int _steps = 0;

  int get steps => _steps;

  void walk() {
    _steps += 1000;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => StepCounter(),
      child: 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) {
    final steps = context.read<StepCounter>().steps;
    return Scaffold(
      appBar: AppBar(title: const Text('Steps')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$steps steps', style: const TextStyle(fontSize: 40)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                context.read<StepCounter>().walk();
              },
              child: const Text('Walk'),
            ),
          ],
        ),
      ),
    );
  }
}

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