آموزش پیاده سازی فلاتر Provider

یکی از بخش های چالش برانگیز در زمان برنامه نویسی Flutter قسمت مدیریت State برنامه می باشد که روش های مختلفی برای پیاده سازی این موضوع وجود دارد.

قبلا درباره روش های گوناگون مدیریت State در فلاتر صحبت کردیم, اما این بار قصد داریم این کار و با استفاده از Provider انجام دهیم.

Provider چیست؟

اگر خیلی ساده بخواهیم توضیح دهیم Provider خیلی شبیه به InheritedWidget و اگر با آن کار کرده باشید پس به خوبی میتونید Provider را نیز درک کنید.

اما در ابتدا شاید کمی در نظرتون این روش پیچیده باشد چون کلاس های خیلی زیادی وجود داره که باید از آنها استفاده کنید.

بنابراین در سه سناریو کوتاه روش کار Provider را به شما توضیح میدهیم تا ابتدا با مکانیسم کاری آن آشنا شوید.

1. زنگ هشدار را به صدا در بیاورید, به افراد یک نوتیفیکیشن ارسال کنید که ساختمان آتش گرفته است.
2. اگر در بسته است یک نفر باید آن را باز کند و دسترسی را فراهم کند.آتش را در معرض دید خود قرار دهید( Expose)
3. بقیه افراد مصرف کننده آتش (Consumers) و همچنین فراهم کننده آب (Provider.of) هستند.

متن بالا شاید کمی بی معنی به نظر بیاید اما تمام کار Provider و به طور خلاصه در سه مرحله توضیح میدهد.

Notifiers:

وظیفه این کلاس اطلاع دادن به Providers است که یک چیزی در برنامه تغییر کرده است.

البته شامل مدل های مختلفی می باشد که بستگی به هدفتون میتونید از آنها استفاده کنید.

ChangeNofier هر تغییر را در کلاس اطلاع می دهد.

انواع مختلف که میتونید استفاده کنید Type/Object/Model می باشد.

ChangeNotifier برای تعداد listener های کم بهینه سازی شده است و از متد notifyListeners استفاده می کند تا تغییرات را در توابع, آبجکت و … متوجه شود.

ValueNotifier هم یک ChangeNotifier است که فقط یک مقدار را در خود نگهداری میکند.

مثال ساده از Provider

برای درک بهتر از این روش با مثال ساده ای شروع میکنیم.

میخوایم پروژه پیش فرض خود فلاتر که اضافه کردن مقدار به عدد هست و با روش Provider پیاده سازی کنیم.

ابتدا پکیج provider را وارد پروژه خود کنید.

در مرحله کلاس مدل برنامه و ایجاد میکنیم.

این کلاس از ChangeNotifier ارث بری میکند که باعث می شود بتوانیم از متد notifyListeners() استفاده کنیم.

import 'package:flutter/cupertino.dart';

class CounterModel with ChangeNotifier {
  int _counter = 0;

  getCounter() => _counter;

  setCounter(int counter) => _counter = counter;

  void incrementCounter() {
    _counter++;
    notifyListeners();
  }

  void decrementCounter() {
    _counter--;
    notifyListeners();
  }
}

در مرحله دوم یک ویجت StatelessWidget طراحی میکنیم.

در این ویجت از کلاس مدل به وسیله Provider.of یک آبجکت میسازیم و مقدار State برنامه را از این آبجکت میخوانیم.

با هربار کلیک کردن کاربر بروی دکمه افزایش یا کاهش متد های مورد نظر کلاس مدل فراخوانی میشوند که همراه آنها یک نوتیفیکیشن به Provider ارسال می شود.

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

import 'counter_model.dart';

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterModel = Provider.of<CounterModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Demo'),
      ),
      body: Center(
        child: Text(
          'Counter Value is: ${counterModel.getCounter()}',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => counterModel.incrementCounter(),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(width: 30),
          FloatingActionButton(
            onPressed: () => counterModel.decrementCounter(),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

و در نهایت کدهای بخش main را به شکل زیر مینویسیم.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:provider_demo/counter_model.dart';
import 'package:provider_demo/counter_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: ChangeNotifierProvider<CounterModel>(
        builder: (_) => CounterModel(),
        child: CounterView(),
      ),
    );
  }
}

از ChangeNotifierProvider استفاده میکنیم که دو بخش مهم به اسم builder و child دارد.