[Flutter]Providerを使ってAndroidのViewModel-LiveDataっぽいのを実装する

どうもFlutter超初心者です（挨拶

久しぶりにFlutterに触れてみたので書いてみる。

あいも変わらずViewの作り方が全くわかってない。。。

で、タイトル。

FlutterってViewの更新をするのにStatefulWidget使って更新する。

ただこいつの何が行けないってStatefulWidget の子View？の1つだけの更新を行うっていうことが出来ないらしい（多分

StatefulWidgetを更新しようとすると子Viewが全てRebuild掛かっちゃって描画に時間かかるらしい。らしい。

詳しいことはちゃんとは調べてないｗ

Viewの作り方また全然把握してないしね。

というわけで実験。

サンプルのFlutterProjectおなじみの少しだけ改良追加した版。

サンプルのカウンターを3つにしたコード
Providerパターンで書き直す
1. Package
2. コード

サンプルのカウンターを3つにしたコード

//
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter1 = 0;
  int _counter2 = 0;
  int _counter3 = 0;

  void _incrementCounter1() {
    setState(() {
      _counter1++;
    });
  }

  void _incrementCounter2() {
    setState(() {
      _counter2++;
    });
  }

  void _incrementCounter3() {
    setState(() {
      _counter3++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_counter1',
              style: Theme.of(context).textTheme.display1,
            ),
            Text(
              '$_counter2',
              style: Theme.of(context).textTheme.display1,
            ),
            Text(
              '$_counter3',
              style: Theme.of(context).textTheme.display1,
            ),
            MaterialButton(
              minWidth: 160,
              onPressed: () {
                _incrementCounter1();
              },
              child: Text("カウント１アップ"),
            ),
            MaterialButton(
              minWidth: 160,
              onPressed: () {
                _incrementCounter2();
              },
              child: Text("カウント２アップ"),
            ),
            MaterialButton(
              minWidth: 160,
              onPressed: () {
                _incrementCounter3();
              },
              child: Text("カウント３アップ"),
            )
          ],
        ),
      ),
    );
  }
}

カウント用のテキストを3つ、各テキストをカウントアップするためのボタン３つって言う簡単なコード。

このどれかのボタンを押すと、、、。

ちょっと分かりづらいけど、全てのWidgetがrebuildされている。

Viewの更新処理が無駄に走って重いってことね。

どう対応するか・・・。

Flutterって○○パターンっていう実装がとっても多い印象だけど、これから書くのは多分Providerパターン（多分

Providerパターンで書き直す

Package

provider: ^4.0.4

コード

//
class HogeViewModel with ChangeNotifier {
  int _counter1 = 0;
  int _counter2 = 0;
  int _counter3 = 0;

  void incrementCounter1() {
    _counter1++;
    notifyListeners();
  }

  void incrementCounter2() {
    _counter2++;
    notifyListeners();
  }

  void incrementCounter3() {
    _counter3++;
    notifyListeners();
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<HogeViewModel>(
        create: (_) => HogeViewModel(),
        child: Scaffold(
            appBar: AppBar(title: Text(title)), body: MyHomePageView()));
  }
}

class MyHomePageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final model = Provider.of<HogeViewModel>(context, listen: false);
    return content(context, model);
  }

  Widget content(BuildContext context, HogeViewModel model) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Selector<HogeViewModel, int>(
            selector: (context, model) => model._counter1,
            builder: (context, counter, child) => Text(
              '$counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ),
          Selector<HogeViewModel, int>(
            selector: (context, model) => model._counter2,
            builder: (context, counter, child) => Text(
              '$counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ),
          Selector<HogeViewModel, int>(
            selector: (context, model) => model._counter3,
            builder: (context, counter, child) => Text(
              '$counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ),
          MaterialButton(
            minWidth: 160,
            onPressed: () {
              model.incrementCounter1();
            },
            child: Text("カウント１アップ"),
          ),
          MaterialButton(
            minWidth: 160,
            onPressed: () {
              model.incrementCounter2();
            },
            child: Text("カウント２アップ"),
          ),
          MaterialButton(
            minWidth: 160,
            onPressed: () {
              model.incrementCounter3();
            },
            child: Text("カウント３アップ"),
          )
        ],
      ),
    );
  }
}

ChangeNotifierがProviderで使えるやつ。

Andoridで言うと個人的にはViewModelかなって思う。

で、内部で持っている変数がLiveData。

View側でSelectorっていうWidgetで子に作りたいViewのWidgetを置く。

ChangeNotifier内部の変数の値が変わったことをnotifyListeners()で通知すると、値が変わった変数のSelectorだけ動いてくれるって感じ。

頭ではなんとなく理解したけど、文字に起こすのは難しい＼(^o^)／

こんな感じにRebuildされている。