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