الشروع في العمل مع Riverpod

جَرِب Riverpod مباشرةً

لتجربة Riverpod، جربها عبر الإنترنت على Dartpad أو عبر Zapp:

تنصيب الحزم المطلوبة

يأتي Riverpod كحزمة "riverpod" رئيسية مكتفية ذاتيًا, بالإضافة إلى حزم اختيارية لاستخدام توليد التعليمات البرمجية (About code generation) و hooks (About hooks).

بمجرد معرفة الحزمة (الحزم) التي تريد تثبيتها، تابع لإضافة الحزم إلى تطبيقك في سطر واحد كما يلي:

Flutter

riverpod

flutter pub add flutter_riverpod

riverpod + flutter_hooks

flutter pub add hooks_riverpod
flutter pub add flutter_hooks

riverpod_generator

flutter pub add flutter_riverpod
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner

riverpod_generator + flutter_hooks

flutter pub add hooks_riverpod
flutter pub add flutter_hooks
flutter pub add riverpod_annotation
flutter pub add dev:riverpod_generator
flutter pub add dev:build_runner

Dart only

riverpod

dart pub add riverpod

riverpod_generator

dart pub add riverpod
dart pub add riverpod_annotation
dart pub add dev:riverpod_generator
dart pub add dev:build_runner

بدلاً من ذلك، يمكنك إضافة الحزم إلى تطبيقك بشكل يدوي من داخل ملف pubspec.yaml كما يلي:

Flutter

riverpod

pubspec.yaml

name: my_app_name
environment:
  sdk: ^3.7.0
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^3.3.2-dev.1

riverpod + flutter_hooks

pubspec.yaml

name: my_app_name
environment:
  sdk: ^3.7.0
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  hooks_riverpod: ^3.3.2-dev.1
  flutter_hooks:

riverpod_generator

pubspec.yaml

name: my_app_name
environment:
  sdk: ^3.7.0
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^3.3.2-dev.1
  riverpod_annotation: ^4.0.3-dev.1

dev_dependencies:
  build_runner:
  riverpod_generator: ^4.0.4-dev.2

riverpod_generator + flutter_hooks

pubspec.yaml

name: my_app_name
environment:
  sdk: ^3.7.0
  flutter: ">=3.0.0"

dependencies:
  flutter:
    sdk: flutter
  hooks_riverpod: ^3.3.2-dev.1
  flutter_hooks:
  riverpod_annotation: ^4.0.3-dev.1

dev_dependencies:
  build_runner:
  riverpod_generator: ^4.0.4-dev.2

بعد ذلك ، قم بتنزيل الحزم من خلال تنفيذ flutter pub get داخل منفذ الأوامر.

Dart only

riverpod

pubspec.yaml

name: my_app_name
environment:
  sdk: ^3.7.0

dependencies:
  riverpod: ^3.3.2-dev.1

riverpod_generator

pubspec.yaml

name: my_app_name
environment:
  sdk: ^3.7.0

dependencies:
  riverpod: ^3.3.2-dev.1
  riverpod_annotation: ^4.0.3-dev.1

dev_dependencies:
  build_runner:
  riverpod_generator: ^4.0.4-dev.2

بعد ذلك ، قم بتنزيل الحزم من خلال تنفيذ dart pub get داخل منفذ الأوامر.

معلومات

في حال استخدام خاصية توليد الكود، يمكنك الآن تشغيل مولد الكود باستخدام الأمر التالي:

dart run build_runner watch -d

هذا كل شيء. لقد أضفت Riverpod إلى تطبيقك!

تفعيل riverpod_lint

يأتي Riverpod مزودًا بحزمة اختيارية riverpod_lint توفر قواعد التدقيق البرمجي لمساعدتك في كتابة كود أفضل، و توفر خيارات إعادة هيكلة مخصصة.

تم تنفيذ Riverpod_lint باستخدام analysis_server_plugin. ولذلك، يتم تثبيته من خلال analysis_options.yaml. باختصار، أنشئ ملف analysis_options.yaml بجوار ملف pubspec.yaml الخاص بك وأضف ما يلي:

analysis_options.yaml

plugins:
  riverpod_lint: <الاصدار الاخير من خلال https://pub.dev/packages/riverpod_lint>

ستظهر لك الآن تحذيرات في بيئة التطوير المتكاملة (IDE) إذا ارتكبت أخطاءً عند استخدام Riverpod في قاعدة التعليمات البرمجية الخاصة بك.

للاطلاع على القائمة الكاملة للتحذيرات وعمليات إعادة البناء، انتقل إلى صفحة riverpod_lint.

مثال على الاستخدام: مرحباً بالعالم!

بعد تثبيت Riverpod، يمكننا البدء باستخدامه.

توضح المقاطع البرمجية التالية كيفية استخدام هذه المكتبة الجديدة لإنشاء برنامج "مرحباً بالعالم!" .:

Flutter

riverpod

lib/main.dart

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

// نقوم بإنشاء "Provider"، والذي سيخزن قيمة ("مرحبا بالعالم").
// نستخدم Provider
// يسمح لنا ذلك بمحاكاة/تغيير القيمة المعروضة.
final helloWorldProvider = Provider((_) => 'مرحبا بالعالم!');

void main() {
  runApp(
    // لكي تتمكن الأدوات (Widgets) من قراءة بيانات الموفرين،
    // نحتاج إلى تغليف التطبيق بأكمله في أداة "ProviderScope".
    // هنا سيتم تخزين حالة جميع الموفرين (Providers).
    ProviderScope(child: MyApp()),
  );
}

// قم بالتوريث (Extend) من ConsumerWidget بدلا من StatelessWidget, والذي يتم توفيره بواسطة Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('مثال')),
        body: Center(child: Text(value)),
      ),
    );
  }
}

riverpod + flutter_hooks

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

// نقوم بإنشاء "Provider"، والذي سيخزن قيمة ("مرحبا بالعالم").
// نستخدم Provider
// يسمح لنا ذلك بمحاكاة/تغيير القيمة المعروضة.
final helloWorldProvider = Provider((_) => 'مرحبا بالعالم!');

void main() {
  runApp(
    // لكي تتمكن الأدوات (Widgets) من قراءة بيانات الموفرين،
    // نحتاج إلى تغليف التطبيق بأكمله في أداة "ProviderScope".
    // هنا سيتم تخزين حالة جميع الموفرين (Providers).
    ProviderScope(child: MyApp()),
  );
}

// قم بالتوريث (Extend) من HookConsumerWidget بدلا من StatelessWidget, والذي يتم توفيره بواسطة Riverpod
class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // يمكننا استخدام الخطافات داخل عنصر واجهة المستخدم HookConsumerWidget
    final counter = useState(0);

    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('مثال')),
        body: Center(child: Text('$value ${counter.value}')),
      ),
    );
  }
}

riverpod_generator

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// نقوم بإنشاء "Provider"، والذي سيخزن قيمة ("مرحبا بالعالم").
// نستخدم Provider
// يسمح لنا ذلك بمحاكاة/تغيير القيمة المعروضة.
@riverpod
String helloWorld(Ref ref) {
  return 'مرحبا بالعالم!';
}

void main() {
  runApp(
    // لكي تتمكن الأدوات (Widgets) من قراءة بيانات الموفرين،
    // نحتاج إلى تغليف التطبيق بأكمله في أداة "ProviderScope".
    // هنا سيتم تخزين حالة جميع الموفرين (Providers).
    ProviderScope(child: MyApp()),
  );
}

// قم بالتوريث (Extend) من ConsumerWidget بدلا من StatelessWidget, والذي يتم توفيره بواسطة Riverpod
class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('مثال')),
        body: Center(child: Text(value)),
      ),
    );
  }
}

riverpod_generator + flutter_hooks

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// نقوم بإنشاء "Provider"، والذي سيخزن قيمة ("مرحبا بالعالم").
// نستخدم Provider
// يسمح لنا ذلك بمحاكاة/تغيير القيمة المعروضة.
@riverpod
String helloWorld(Ref ref) {
  return 'مرحبا بالعالم!';
}

void main() {
  runApp(
    // لكي تتمكن الأدوات (Widgets) من قراءة بيانات الموفرين،
    // نحتاج إلى تغليف التطبيق بأكمله في أداة "ProviderScope".
    // هنا سيتم تخزين حالة جميع الموفرين (Providers).
    ProviderScope(child: MyApp()),
  );
}

// قم بالتوريث (Extend) من HookConsumerWidget بدلا من StatelessWidget, والذي يتم توفيره بواسطة Riverpod
class MyApp extends HookConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // يمكننا استخدام الخطافات داخل عنصر واجهة المستخدم HookConsumerWidget
    final counter = useState(0);

    final String value = ref.watch(helloWorldProvider);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('مثال')),
        body: Center(child: Text('$value ${counter.value}')),
      ),
    );
  }
}

ثم ابدأ تشغيل التطبيق باستخدام الأمر flutter run.
سيؤدي هذا إلى عرض عبارة "مرحبا بالعالم!" على جهازك.

Dart only

riverpod

lib/main.dart

import 'package:riverpod/riverpod.dart';

// نقوم بإنشاء "Provider"، والذي سيخزن قيمة ("مرحبا بالعالم").
// نستخدم Provider
// يسمح لنا ذلك بمحاكاة/تغيير القيمة المعروضة.
final helloWorldProvider = Provider((_) => 'مرحبا بالعالم!');

void main() {
  // هذا الكائن هو المكان الذي سيتم فيه تخزين حالة مزودي الخدمة لدينا.
  final container = ProviderContainer();

  // بفضل "container"، يمكننا قراءة بيانات مزود الخدمة لدينا.
  final value = container.read(helloWorldProvider);

  print(value); // مرحبا بالعالم!
}

riverpod_generator

lib/main.dart

import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// نقوم بإنشاء "Provider"، والذي سيخزن قيمة ("مرحبا بالعالم").
// نستخدم Provider
// يسمح لنا ذلك بمحاكاة/تغيير القيمة المعروضة.
@riverpod
String helloWorld(Ref ref) {
  return 'مرحبا بالعالم!';
}

void main() {
  // هذا الكائن هو المكان الذي سيتم فيه تخزين حالة مزودي الخدمة لدينا.
  final container = ProviderContainer();

  // بفضل "container"، يمكننا قراءة بيانات مزود الخدمة لدينا.
  final value = container.read(helloWorldProvider);

  print(value); // مرحبا بالعالم!
}

ثم ابدأ تشغيل التطبيق باستخدام الأمر dart lib/main.dart.
سيؤدي هذا إلى طباعة عبارة "مرحبا بالعالم!" في وحدة التحكم.

المضي بمعرفتك لابعد من ذلك: تحميل إضافة Riverpod

إذا كنت تستخدم Flutter وVS Code، ففكر في استخدام إضافة Flutter Riverpod

إذا كنت تستخدم Flutter وAndroid Studio أو IntelliJ، ففكر في استخدام إضافة Flutter Riverpod