Timerus

Counts Up Multiple Timers

Providerの具体的な利用方法

Posted at — Feb 24, 2020

Flutter 製アプリではもうこれ無しでは開発できないのでは?というほど、重要なポジションになった感のある Provider。

記念すべき第一回目はこの Provider1 について、具体的な利用方法になどを紹介したいと思います。

さっそくですが、Timerus での具体的な使い方は以下の通りとなっていて、二つの MultiProvider をネストした形となっています。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        FutureProvider<Settings>(create: (_) => Settings().load()),
        FutureProvider<Timerusies>(create: (_) => Timerusies().load()),
      ],
      child: BUilder(
        builder: (context) {
          Settings settings = Provider.of<Settings>(context);
          Timerusies timerusies = Provider.of<Timerusies>(context);

          return MultiProvider(
            providers: [
              ChangeNotifierProvider.value(value: settings),
              ChangeNotifierProvider.value(value: timerusies),
            ],
            child: Builder(
              builder: (context) {
                Settings settings = Provider.of<Settings>(context);
                Timerusies timerusies = Provider.of<Timerusies>(context);

                if (timerusies == null || settings == null) {
                  return Center(child: CircularProgressIndicator());
                }

                return Scaffold(
                  ...
                );
              },
            ),
          );
        }
      ),
    );
  };
}

各種設定を管理する Settings とタイマーデータを管理する Timerusies は SharedPreferences へデータを保存するようになっており、そちらは下記のような作りになってます。

class Settings extends ChangeNotifier {
  String id;
  ...

  Settings() {
    ...
  };

  Future<Settings> load() async {
    return ...;
  }

  Future<bool> save() async {
    ...
    notifyListeners();
  }
}

見ての通りですが、Future を返す load() と ChangeNotifier を発行する save() が実装されてます。

先程の二つの MultiProvider は、 load() によるデータの読み出しと save() によるデータ変更の反映をそれぞれ担当するような形です。

こうしておくことで、好きな場所で Provider.of(context) でデータを利用でき、好きな場所で save() して変更データをすべての場所に反映させることができるようになります。

いやー、便利ですね。こんな便利な Provider ですが、今後ももっと便利になっていきそうな感じです。

Flutter というか dart の新機能である Extension 機能を取り入れた context.read() 等の機能、今は child: Builder() と書かなければいけないところを直接 builder: (contedxt) と書けるようになりそうなど、ますます進化していきそう2 です。

今後の進化も楽しみです。


  1. Provider は4.0.4 時点での情報です ↩︎

  2. 新機能は 4.1.0 での導入が検討されているようですが、リリースされるまで予定は未定です。 ↩︎