Provider: المراقبة أم القراءة

جزء من قسم إدارة الحالة في رحلة Flutter على Coddy. الدرس 11 من 27.

هناك طريقتان للحصول على نموذج من Provider، ولكل منهما وظيفة مختلفة.

تحصل context.watch<StepCounter>() على النموذج وتشترك فيه: عندما يستدعي النموذج notifyListeners()، يُعاد بناء هذا المكوّن. استخدمها في build لكل ما تعرضه الشاشة.

تحصل context.read<StepCounter>() على النموذج مرة واحدة، من دون اشتراك. استخدمها في دوال الاستدعاء اللاحقة مثل onPressed، حيث تريد استدعاء دالة من دون عرض أي شيء:

Widget build(BuildContext context) {
  final steps = context.watch<StepCounter>().steps;   // يعرض
  return ElevatedButton(
    onPressed: () => context.read<StepCounter>().walk(),   // ينفّذ إجراءً
    child: Text('$steps steps'),
  );
}

إذا خلطت بينهما فستلاحظ ذلك. استخدام read في build يعرض القيمة الأولى إلى الأبد. استخدام watch داخل onPressed خطأ، لأن النقر ليس عملية بناء ولا يوجد شيء للاشتراك فيه.

التحدي

سهل

يضيف Walk 1000 خطوة إلى النموذج، لكن الشاشة تظل تعرض 0 steps.

اجعل سطر الخطوات يتبع النموذج، بحيث تُظهر كل نقرة العدد الجديد.
أبقِ استدعاء الزر كما هو.

جرّب بنفسك

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'),
            ),
          ],
        ),
      ),
    );
  }
}