『自分用』Flutter入門 Providerの使い方

この記事について

この記事はあくまで自分用に作ったものなので、読みにくい部分や間違いも含まれていると思いますが、
誰かのお役に立てれば幸いです。
では始めましょう！

Providerとは

参考記事
Providerとは、Flutterにおける状態管理の方法の一つです。
Statefulなウィジェットでも代替可能ではありますが、UIと状態管理を別々のファイルで行うことで可読性を上げることができます。

インストール方法

以下をターミナルの任意のディレクトリで実行

flutter pub add provider

それだけでOKです！
たまにインストール後ビルドエラーがでますが、大抵の場合は一回android studioを再起動すれば解決します！

使い方

文字で説明しても長くなるので、最低限のコードを載せておきます！

UIを作成する側

page.dart

class Page extends StatelessWidget {
  const Page({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<Model>(
        create: (_) => Model(),
      child: Scaffold(
        body: Center(
          child: Consumer<Model>(builder: (context, model, child) {
            return Column();
          }),
        ),
      ),
    );
  }
}

モデル側

model.dart

class Model extends ChangeNotifier {
    // この中で処理を書いていく
}

今回は以上です！
コピペして使ってみてください！