أسهل طريقة لإدارة الحالة في Flutter باستخدام provider

إدارة الحالة باستخدام provider في Flutter 🚀

إدارة الحالة (State Management) هي عنصر أساسي في بناء تطبيقات Flutter متعددة الأجزاء والمكونات، حيث تحتاج هذه الأجزاء للتفاعل مع بعضها البعض ومشاركة البيانات. واحدة من أكثر الطرق شيوعاً لإدارة الحالة في Flutter هي استخدام provider 🧩. في هذه المقالة، سنتحدث عن مفهوم إدارة الحالة، ودور provider، وكيفية استخدامه في تطبيق Flutter.

ما هي إدارة الحالة؟ 🔄

إدارة الحالة تشير إلى الطريقة التي يتم بها إدارة البيانات التي تتغير بمرور الوقت في تطبيقك. على سبيل المثال، في تطبيق يحتوي على سلة تسوق، قد تتغير البيانات عند إضافة منتجات جديدة أو إزالة منتجات موجودة 🛒. هذه البيانات تُعتبر "حالة" التطبيق، وإدارتها بكفاءة أمر ضروري لتجنب مشاكل مثل إعادة بناء واجهة المستخدم بالكامل في كل تغيير صغير.

ما هو provider؟ 🤔

provider هو عبارة عن حزمة Flutter تُعتبر واحدة من أشهر الأدوات لإدارة الحالة في التطبيق 🎯. تم تطويرها من قبل Remi Rousselet، وهي توفر وسيلة بسيطة ومرنة لمشاركة البيانات بين أجزاء التطبيق المختلفة.

لماذا نستخدم provider؟ 💡

كيفية استخدام provider في Flutter 📱

1. تثبيت الحزمة 📦

قبل البدء، يجب عليك إضافة provider إلى ملف pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

ثم قم بتشغيل:

flutter pub get

2. إعداد النموذج (Model) 🛠️

لنقم بإنشاء نموذج بسيط يمثل الحالة التي نرغب في إدارتها، مثل عداد (Counter) 📊:

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
} 

3. توفير الحالة باستخدام provider 🌐

الخطوة التالية هي إخبار التطبيق أن هناك حالة نريد مشاركتها باستخدام ChangeNotifierProvider 📡. نضيفها في بداية الشجرة (tree) الخاصة بالتطبيق:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart';  // الملف الذي يحتوي على النموذج

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
} 

4. استهلاك الحالة في واجهة المستخدم 🖥️

الآن، نريد الوصول إلى الحالة وعرضها على واجهة المستخدم. يمكننا استخدام Consumer أو Provider.of للحصول على البيانات وإعادة بناء الواجهة عند حدوث تغيير 👨‍💻:

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

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Consumer<Counter>(
          builder: (context, counter, child) {
            return Text(
              '${counter.count}',
              style: TextStyle(fontSize: 40),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<Counter>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

تحسين الأداء باستخدام Consumer و Selector 🎯

عندما تستخدم Consumer في تطبيقك، يجب أن تتأكد من استخدامه فقط في الأجزاء التي تحتاج حقًا إلى إعادة بناء عند تغيير الحالة 🔄. لتجنب إعادة بناء كامل الواجهة، يمكنك استخدام Selector:

Selector<Counter, int>(
  selector: (context, counter) => counter.count,
  builder: (context, count, child) {
    return Text('$count', style: TextStyle(fontSize: 40));
  },
);

الخلاصة 💡

provider هي حزمة قوية وسهلة الاستخدام لإدارة الحالة في تطبيقات Flutter. من خلال استخدام ChangeNotifier وChangeNotifierProvider، يمكنك إدارة البيانات المتغيرة بمرونة وبناء واجهة مستخدم تتفاعل مع هذه التغييرات بكفاءة 🚀.

إدارة الحالة، Flutter، provider، إدارة البيانات، تطبيقات Flutter، تحسين الأداء، مشاركة البيانات، ChangeNotifier، Flutter state management، hangeNotifierProvider، Selector، Consumer، بناء تطبيقات Flutter، تثبيت provider، نموذج الحالة في Flutter، حزمة provider، تحديث الحالة في Flutter، Flutter pub get، إعادة استخدام البيانات، أدوات Flutter، تصميم تطبيقات الجوال، Flutter 2024.