flutterでPageStoreが使えない

flutterで画面遷移先の状態（具体的にはcheckboxの選択状況）を保つためにPageStoreを利用したのですが、状態が保持できません。（checkboxのチェックが画面遷移するとリセットされてしまう）
以下のページのmain.dartがメイン画面、Friday_page.dartが画面遷移先です（その他のページは無視してください）

試したこと

画面遷移する時にkeyを渡す。(main.dartの121行目)
画面遷移先でkeyを受け取る(Friday_page.dartの21行目)
保持したい変数の値を保存するクラスを作る（Friday＿page.dartの2931行目）
保持した変数を読み取る（Friday_page.dartの4048行目）
変更した値を書き込む（Friday _page.dartの76行目）

この５つをPageStoreを利用するために書いたのですが、チェックボックスの状態を保持しない結果となりました。

初心者のため、トンチンカンな質問をしている可能性がありますが申し訳ないです。
お手数おかけしますが、ご回答頂けると幸いです。

tepci

2020/06/18 03:13

Friday_page.dartはコミット、プッシュされてますか？ main.dartだけしかされてないように見えますが...

otai0811

2020/06/18 03:22

御返信ありがとうございます。すみません、ただいまプッシュ致しました。（Githubに不慣れなもので…）このような拙い質問に反応して頂いて本当にありがたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

推測ですが、その方法はTabBarViewなどの画面切り替えでしか使えず、Navigatorを使用した画面遷移ではできないようです。
ただ、以下のようにすれば実現可能です。

PageStorageKey mykey = new PageStorageKey("testkey");
final PageStorageBucket _bucket = new PageStorageBucket();

このように、keyとbucketをmain.dartからもFriday_page.dartからも参照できる場所に配置し、

main
1...
2class MyApp extends StatelessWidget{
3  final title = 'Flutter サンプル';
4  
5  @override
6  Widget build(BuildContext context){
7    return MaterialApp(
8      title: 'Flutter Demo',
9      home: PageStorage(
10        bucket: _bucket,
11        key: mykey,
12        child: MyHomePage(
13          title:this.title,
14        ),
15      ),
16    );
17  }
18}
19
20class MyHomePage extends StatefulWidget{
21  MyHomePage({Key key, this.title}) : super(key: key);
22...
23

全体をPageStorageウィジェットで囲ってkeyを指定します。

Friday_page.dart内での読み込み及び書き込みの部分を以下のように変更します。

Friday
1// 読み込み
2FridayPageParams p = _bucket.readState(context, identifier: ValueKey(mykey));
3
4
5// 書き込み
6_bucket.writeState(context, _params, identifier: ValueKey(mykey));
7

ここを参考にしてください。

また、すごい雑ですが、以下のソースをまるごとコピーして、DartPadに張り付けて実行してみてください。

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
PageStorageKey mykey = new PageStorageKey("testkey");
final PageStorageBucket _bucket = new PageStorageBucket();

class MyApp extends StatelessWidget{
  final title = 'Flutter サンプル';
  
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Flutter Demo',
      home: PageStorage(
        bucket: _bucket,
        key: mykey,
        child: MyHomePage(
          title:this.title,
        ),
      ),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}


//インスタンスからウィジェットを作る

class _MyHomePageState extends State<MyHomePage>{


  bool _checked1 = false;
  bool result;


  @override

  Widget build(BuildContext context){

    return Scaffold(

      appBar: AppBar(
        title: Text('課題管理App（曜日別）')
      ),
      body: Container(

        child: ListView(
          children: <Widget>[

            ListTile(

              title: Text('月曜締め切り'),
              trailing:  Icon(Icons.arrow_forward_ios),

              onTap: (){
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder:  (context) => MondayPage(),
                  )

                );

            },

            ),
            ListTile(
              title: Text('金曜締め切り'),
              trailing:  Icon(Icons.arrow_forward_ios),
              onTap: (){
                 Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder:  (context) => MyHomePageF(),
                    )
                );
              },
            ),
            Text('備考欄'),
            TextField(
              autofocus: true,
              decoration: InputDecoration(
                hintText: '臨時課題があれば記入'
              ),

            ),
            Row(
              children: <Widget>[
                Checkbox(
                  value:  _checked1,
                  onChanged: (bool value) {
                    setState(() {
                      _checked1 = value;
                    });
                  },
                ),


                Text('全課題クリア！')
              ],
            )


          ],
        ),

      )

    );
  }

}

class MyHomePageF extends StatefulWidget{

  @override

  State<StatefulWidget> createState() {
    return _MyHomePageFState();
  }
}
class FridayPageParams {
  bool _checked1= false ;
}

class _MyHomePageFState extends State<MyHomePageF>{
  FridayPageParams _params;

  @override
  void didChangeDependencies() { // このメソッドをオーバーライド
    FridayPageParams p = _bucket.readState(context, identifier: ValueKey(mykey));
    print(p);
    if (p != null) {
      _params = p;
    } else {
      _params = FridayPageParams();
      print(_params._checked1);
    }
    super.didChangeDependencies();
  }

  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('金曜締め切り'),
      ),

      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            '応用数学   ',
            style: TextStyle(fontSize: 16.0),
          ),

          Row(

            children: <Widget>[

              Checkbox(
                value:  _params._checked1,
                onChanged: (bool value) {
                  setState(() {
                    _params._checked1 = value;
                  });
                  _bucket.writeState(context, _params, identifier: ValueKey(mykey));
                },
              ),
              Text('提出済み',)

            ],
          ),

          Text('備考欄'),
          TextField(
            autofocus: true,
            decoration: InputDecoration(
                hintText: '特記事項があれば記入'
            ),
          ),
          RaisedButton(
            onPressed: (){
              Navigator.pop(context,);

            },
            child: Center(child: Text('戻る')),
          )
        ],

      ) ,
    );




  }



}

class MondayPage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return
      new  MyHomePageM(




    );
  }
}

class MyHomePageM extends StatefulWidget{
  MyHomePageM({this.title}): super();

  final String title;

  @override
  _MyHomePageMState createState() => new _MyHomePageMState();
}


//インスタンスからウィジェットを作る

class _MyHomePageMState extends State<MyHomePageM>{


  @override

  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('月曜締め切り'),
      ),
      body: Text('課題の入力')

    );


  }



}

投稿2020/06/18 05:25

編集2020/06/18 05:34

tepci

総合スコア419