Riverpod: StateProvider

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

يحتفظ Provider بقيمة لا تتغير أبدًا. للحصول على قيمة بسيطة واحدة تتغير، مثل رقم أو bool أو String، استخدم StateProvider:

final quantityProvider = StateProvider((ref) => 1);

اقرأها بالطريقة نفسها: تعطيك ref.watch(quantityProvider) الرقم، ويُعاد بناء الواجهة عندما يتغير.

لتغييره، احصل على المُنبِّه الخاص به، وهو الكائن الذي يحتفظ بالقيمة، باستخدام ref.read، ثم عيّن state:

onPressed: () {
  ref.read(quantityProvider.notifier).state++;
},

كما في Provider، استخدم ref.watch في build لعرض قيمة، واستخدم ref.read في دوال رد الاتصال لتغييرها. أما تغيير نسخة منها فلا يغيّر شيئًا: var n = ref.read(quantityProvider); n++; يضيف 1 إلى n، وليس إلى المزوّد. وحده تعيين state هو ما يفعل ذلك.

التحدي

سهل

يعرض طلب الفطائر كميته، لكن الأزرار لا تفعل شيئًا بعد.

يضيف زر الجمع 1 إلى quantityProvider.
ينقص زر الطرح 1، لكن لا تنخفض الكمية أبدًا عن 1.

جرّب بنفسك

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

final quantityProvider = StateProvider((ref) => 1);

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: OrderPage(),
    );
  }
}

class OrderPage extends ConsumerWidget {
  const OrderPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final quantity = ref.watch(quantityProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('Pancakes')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(
              icon: const Icon(Icons.remove),
              onPressed: () {},
            ),
            Text('Quantity: $quantity', style: const TextStyle(fontSize: 24)),
            IconButton(
              icon: const Icon(Icons.add),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}