2-2.providerパッケージの使い方

Flutter

2020.11.15

前回に追加したproviderの使い方を今回は紹介します。

突然ですが、今までStatelessウィジェットを使っていますが、実はもう一つStatefullウィジェットというウィジェットがあります。

Stateとは状態のことで、Statefullウィジェットは状態が動的でStatefullウィジェット自体で状態を変更することができますが、Statelessウィジェットは状態が静的でそれ自体では状態を変更できません。

簡単に例えるとStatefullはプログラム内でテキストを変更できますが、Statelessはプログラム内でテキストを変更できません。

そこでStatelessウィジェットでテキストを変更するためにproviderを使います。

内容はなんとなく理解しているつもりですが、正直自分でもよく説明できなくてすいません・・・。

百聞は一見に如かずなので、簡単な具体例で見ていきましょう。

新規プロジェクトを立ち上げるとカウントするアプリがサンプルとして記載されていますが、それをStatelessとproviderを使って構築していきます。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierProvider(
        create: (_) => Counter(),
        builder: (context, snapshot){
          final count = context.select((Counter store) => store.count);
          return Scaffold(
            appBar: AppBar(
              title: Text('Stateless Count'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'You have pushed the button this many times:',
                  ),
                  Text(
                    '$count',
                    style: Theme.of(context).textTheme.headline4,
                  ),
                ],
              ),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () => context.read().increment(),
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
          );
        }
      ),
    );
  }
}

class Counter with ChangeNotifier{
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

元のコードと比較すると少しごちゃついた部分もありますが、大まかにはすっきりしているんではないでしょうか？

まずStatelessウィジェットで状態の変更をしたい場合には10行目のhome以下をChangeNotifierProviderで囲ってしまいます。

そして、ChangeNotifierでカウンターの動的部分を作って、ChangeNotifierProviderが参照してカウントが実行されて数字が表示されます。

う〜ん、具体例でも分かりにくいかもしれませんね。

私は説明が得意ではありませんが、私もproviderを使い続けてなんとなく分かるようになってきました。

習うより慣れろということでしょうか。

次回はデータベースを導入していきます。