Flutterで別画面に遷移しても状態を維持する

はじめに

アプリの仕様上、ページの遷移先でも状態を維持したいことがあったのでProviderを利用して実装したのでその方法を共有したいと思います。

遷移元の実装方法

遷移先のWidgetをChangeNotifierProvider.value()で囲むことによって遷移先にも状態を維持できます。
以下にソースコードを載せておきます。

test.dart

// viewmodelの宣言
final calendarModel = context.watch<CalendarModel>();

/* 省略 */

Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => ChangeNotifierProvider.value(
            value: calendarModel, // 既存のインスタンスを指定
            child: Transition(),
  )),
);

遷移先の実装方法

StatefulWidgetの場合にはdidChangeDependencies内で初期化を行います

transition.dart

class Transition extends StatefulWidget {
 @override
 _TransitionState createState() => _TransitionState();
}

class _TransitionState extends State<Transition> {

 @override
 void didChangeDependencies() {
  // 初期化
  final calendarModel = context.watch<CalendarModel>();
  super.didChangeDependencies();
 }

 @override
 Widget build(BuildContext context) {
  return Scaffold();
 }
}

StatelessWidgetの場合にはbuild()の最初に初期化を行います。

transition.dart

class Transition extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  // 初期化
  final calendarModel = context.watch<CalendarModel>();

  return Scaffold();
 }
}

終わりに

最後まで見ていただきありがとうございます。以上のような実装を行いましたが、この実装はProviderNotFoundException(Widegtツリー外におけるProviderのアクセス)を誘発しがちなので注意すべきです。

このような実装は手間がかかってしまうのに加えてバグを誘発する可能性が高いと思います。
そのため状態をグローバル変数的に扱えるriverpodを導入したほうが可読性やメンテナンスが楽なのでは？と思う実体験にはなりました。今後riverpodも触れたらいいな、、、

アプリの宣伝

最後にはなりますが、現在開発しているアプリに関してご紹介させていただきます。

就活の管理を行うアプリJobhunです！
Jobhunは「就活状況を一括管理したい...」　「自分が就活の時、予定を組むのが大変だった...」という就活生の声から生まれたアプリです。そのため、実際に就活を経験してきた方の意見を参考に、「本当に必要な機能」をまとめました！

以下のような機能があります。

• 志望企業管理機能
• 就活用カレンダー機能
• ES管理機能 etc...

気軽に就活管理ができるようになっているので、是非ダウンロードしてみてください！！
LP・IOSダウンロード・Androidダウンロード