အရင်အပိုင်းမှာတော့ Provider နဲ့ ပတ်သက်ပြီး Consumer တို့ ChangeNotifierProvider တို့ အကြောင်းကို ရေးခဲ့ပြီးပါပြီ။ အရင်အပိုင်းကို ဖတ်ချင်တယ်ဆိုရင်

Provider နှင့် ပတ်သက်ပြီး သိသင့်သမျှ အပိုင်း (၁)

မှာ ဖတ်နိုင်ပါတယ်။

FutureProvider

FutureProvider ကတော့ Future Object တွေကို Inject လုပ်ချင်တဲ့အခါ သုံးပါတယ်။ Future အကြောင်းကိုတော့ Dart အခြေခံများ Part 1 မှာ ပြောခဲ့ပြီးဖြစ်ပါတယ်။

ကျွန်တော်ကတော့ ကျွန်တော်ရေးပေးထားတဲ့ Code Sample မှာ SharedPrefence ကို သုံးပြီး ရေးပြထားပါတယ်။ ဒီနေရာမှာ တကယ်တော့ ရိုးရိုး Providre သုံးလဲရပါတယ်။

import 'package:shared_preferences/shared_preferences.dart';

class FutureObject {
    String prefValue = "";

    Future<FutureObject> create() async {
      return FutureObject();
    }

    Future<void> setToSharedPreference() async {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      prefs.setString("pref_value", "Hello World");
      print("done");
    }

    Future<void> getFromSharedPreference() async {
      await Future.delayed(Duration(seconds: 2));
      SharedPreferences prefs = await SharedPreferences.getInstance();
      this.prefValue = prefs.getString("pref_value" ?? "");
    }
}

DI ထဲကို Inject လုပ်တာတော့ အောက်မှာ ပြထားတဲ့အတိုင်း လုပ်ထားပါတယ်။

  FutureProvider<FutureObject>(
          create: (context) => FutureObject().create(),
        ),

ပြန်သုံးတာကတော့ အောက်မှာပြထားတဲ့အတိုင်း ပြန်သုံးထားပါတယ်။

Consumer<FutureObject>(
                builder: (context, futureObject, child) {
                 return OutlineButton.icon(
                     onPressed: () async {
                       await futureObject.setToSharedPreference();
                     },
                     icon: Icon(Icons.create),
                     label: Text("Write Prefs"));
                },
              ),
              Consumer<FutureObject>(
                builder: (context, futureObject, child) {
                  return OutlineButton.icon(
                      onPressed: () async {
                        await futureObject.getFromSharedPreference();
                        print(futureObject.prefValue);
                      },
                      icon: Icon(Icons.done),
                      label: Text("Get Prefs")
                  );
                },
              ),

StreamProvider

StreamProvider ကတော့ StreamObject တွေကို DI ထဲကို inject လုပ်ချင်တဲ့အခါ သုံးပါတယ်။ ကျွန်တော် နမူနာမှာတော့ Stream ကို သုံးပြီး Network Status ကို စောင့်ကြည့်တာလေး ရေးပြထားပါတယ်။ ဒါက တကယ့် လက်တွေ့ Project တွေ ရေးတဲ့အခါမှာလဲ လိုမှာ ဖြစ်တဲ့အတွက် ပြည့်ပြည့်စုံစုံ ရေးပေးထားပါတယ်။ Stream အကြောင်း သိချင်တယ်ဆိုရင်တော့ Dart အခြေခံများ Part 2 မှာ လေ့လာနိုင်ပါတယ်။

import 'dart:async';

import 'package:connectivity/connectivity.dart';

class NetworkProvider {
  StreamSubscription<ConnectivityResult> _subscription;
  StreamController<ConnectivityResult> _networkStatusController;

  StreamSubscription<ConnectivityResult> get subscription => _subscription;
  StreamController<ConnectivityResult> get networkStatusController => _networkStatusController;

  NetworkProvider() {
    _networkStatusController = StreamController<ConnectivityResult>();
    _invokeNetworkStatusListen();
  }

  void _invokeNetworkStatusListen() async {
    _networkStatusController.sink.add(await Connectivity().checkConnectivity());

    _subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
        _networkStatusController.sink.add(result);
    });
  }

  void disposeStreams() {
    _subscription.cancel();
    _networkStatusController.close();
  }

}

ကျွန်တော်ရေးပြထားတဲ့ Stream မှာ အစိတ်အပိုင်း (၂) ခုရှိပါတယ်။ တစ်ခုက Subscription ဖြစ်ပြီး တစ်ခုက Stream Controller အပိုင်း ဖြစ်ပါတယ်။ Connectivity ကို အသုံးပြုထားပြီး ConnectivityResult ချိန်းသွားတာနဲ့ တစ်ပြိုင်တည်း StreamController မှာ Sink လုပ်ပါတယ်။ ပြီးရင် subscriber ကို အကြောင်းကြပါတယ်။ အောက်မှာ ပြထားတာကတော့ ပြန်သုံးပြထားတာပါ။

Consumer<NetworkProvider>(
                builder: (context, networkProvider, child) {
                  return StreamProvider<ConnectivityResult>.value(
                    value: networkProvider.networkStatusController.stream,
                    child: Consumer<ConnectivityResult>(
                      builder: (context, value, _) {
                        if(value == null) {
                          return Container(
                            width: double.infinity,
                            height: 100.0,
                            child: Center(
                              child: Text("Error"),
                            ),
                          );
                        }
                        return Container(
                          width: double.infinity,
                          height: 100.0,
                          child: Center(
                            child: Text("${(value != ConnectivityResult.none)? value: 'Offline'}"),
                          ),
                        );
                      },
                    ),
                  );
                },
              )

Source Code ကို လေ့လာချင်ရင်တော့ Myanmar Links GitHub မှာ လေ့လာနိုင်ပါတယ်။

Barcamp Yangon 2020 မှာ ပြောထားတဲ့ YouTube Video ကို ကြည့်ချင်တယ်ဆိုရင်တော့ အောက်မှာ ကြည့်လို့ရပါတယ်။