【Flutter(フラッター)】状態管理はChangeNotifierProviderがいいらしい。実装してみたという話

最近は個人アプリ開発をしています。

Flutter（フラッター）というアプリのクロスプラットフォーム開発用のフレームワークみたいなやつを使って作業しています。

今回はFlutterでの状態管理のやり方の話です。

Flutterでは状態管理のやり方が複数あるみたいで、このProviderを使うやり方がよさげという話をネットでみたので実装してみました。

実装用のサンプルコードを作成したので、よかったらみてみてください。（語彙力よ・・・）

zor3/flutter_cookbook

最近はyoutubeもちょいちょいやっているので、よかったらこちらも見て、チャンネル登録しておいてください。

と、いうわけで使い方を説明します。

１．providerというパッケージを入れる

pubspec.yamlというファイルを編集して、下記を追記します。

dependencies:
 provider: ^4.3.1

２．android studioにインストールします

Android Studioを利用して実行するには、下のほうにTerminalというのがあるので、そこをクリックして下記を実行します。

$ flutter pub get

３．main.dartファイルに下記を追加します

import 'package:provider/provider.dart';

以上でproviderというパッケージがAndroid Studioに認識されます。

続いて、providerパッケージの利用方法です。

１．providerを指定する

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MultiProvider(　←★ここらへん
     providers: [
       ChangeNotifierProvider(create: (context) => MainModel()),
     ],
     child: MaterialApp(
       title: 'Provider Demo',
       theme: ThemeData(
         // テーマカラー
         primarySwatch: Colors.blue,
         visualDensity: VisualDensity.adaptivePlatformDensity,
       ),
       initialRoute: '/',
       routes: {
         '/': (context) => MyHomePage(),
       },
     ),
   );
 }
}

MultiProviderで囲って、providersの中に

ChangeNotifierProvider(create: (context) => MainModel()),

を指定します。

※MultiProviderはproviderを複数指定する場合の書き方です。この書き方のほうがわかりやすかったし拡張性ありそうなのでMultiProvider利用してます。

MainModelはこちらが勝手に作ったmodel名です。

２、Consumerを指定する

 Widget build(BuildContext context) {
   return Scaffold(
       body: Consumer<MainModel>(builder: (context, model, child) {　←★ここらへん
         return Center(
           child: Column(
             children: [
               Text(model.todoList[0]["name"]),　←★ここらへん
               RaisedButton(
                 child: Text('追加'),
                 onPressed: () {
                   // ここでなにか
                   if(model.todoList.length == 1) {
                     model.addTask({"name": "追加したよ"});
                   }
                 },
               ),
             ],
           ),
         );
       })
   );

Consumer<MainModel>(builder: (context, model, child) {

上記の箇所は固定の書き方で、MainModelだけ自身が作成したものを指定します。

model.todoList[0]["name"]

MainModelの内容がmodelに入ってくるので、model.xxxxxとしていしてMainModelを利用します。

または、MainModelにある関数を利用したい場合は下記です。

model.addTask({"name": "追加したよ"});

ちなみに、MainModelはこんな感じです。

import 'package:flutter/material.dart';

class MainModel extends ChangeNotifier {
 List<Map> todoList = [{"name": "テスト"}];

 void addTask(Map item) {
   todoList.add(item);
   notifyListeners(); // 変更を通知するために必要
 }

 void changeTask(int index ,String item) {
   todoList[index]["name"] = item;
   notifyListeners();
 }

 void removeTask(int index) {
   todoList.removeAt(index);
   notifyListeners();
 }

 String getTaskName(int index) {
   return todoList[index]["name"];
 }

}

といった感じで利用できるはずです。

以上です。

ではまた。よい１日を。

Flutterの画面遷移の方法はこちらです。

https://note.com/imesto/n/na760d591855d