Provider: مشاركة نموذج

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

ينجح رفع الحالة إلى الأعلى عندما تكون عناصر الواجهة قريبة من بعضها. عندما تكون القيمة مطلوبة في أنحاء التطبيق، على شاشتين، وفي الشريط العلوي، وداخل قائمة عميقًا، سيتعين عليك تمريرها عبر كل عنصر واجهة بينهما. يتجاوز Provider ذلك. فهو حزمة: مجموعة من التعليمات البرمجية التي تستوردها باستخدام import 'package:provider/provider.dart';.

تتكون من ثلاثة أجزاء. أولًا، نموذج: فئة تحتفظ بالبيانات وextends ChangeNotifier. وتغيّر أساليبها البيانات ثم تستدعي notifyListeners():

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

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

ثانيًا، ينشئ ChangeNotifierProvider في موضع مرتفع ضمن شجرة عناصر الواجهة النموذج مرة واحدة، ويقدمه لكل عنصر واجهة أسفله:

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

ثالثًا، يطلبه أي عنصر واجهة أسفله: context.watch<CupCounter>() لعرضه، وcontext.read<CupCounter>() لاستدعاء إحدى الأساليب. يحصل العنوان والزر أدناه على العداد نفسه، ولا يُمرَّر أي شيء إلى أيٍّ منهما.

التحدي

متوسط

افتح التطبيق: سيعرض خطأً، لأن العنوان يطلب CupCounter ولا يوفّره أي شيء قبله.

في main، أَحِط MyApp بـ ChangeNotifierProvider ينشئ CupCounter.

جرّب بنفسك

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