flutterのriverpodにおける、CircularProgressIndicatorのグルグル画面から移行したい

前提

flutterのproviderをriverpodで置き換えようと思ったが、
CircularProgressIndicatorのグルグル画面のままで遷移しなくなった。

実現したいこと

このグルグルから遷移しない状態を解消してリスト表示に遷移したいが、どの記述を直せばいいのかわからないので教えて欲しいです。

該当のソースコード

forth_page.dart
1
2class ForthPage extends StatelessWidget {
3  ForthPage({Key? key}) : super(key: key);
4  //更新をsnackbarに通知したい時に必要
5  final GlobalKey<ScaffoldMessengerState> _scaffoldKey =
6      GlobalKey<ScaffoldMessengerState>();
7
8  @override
9  Widget build(BuildContext context) {
10    return ScaffoldMessenger(
11      key: _scaffoldKey,
12      child: Scaffold(
13        appBar: AppBar(
14          backgroundColor: Color.fromARGB(255, 236, 124, 5),
15          title: const Text(
16            'Forth',
17            style: TextStyle(
18              fontWeight: FontWeight.bold,
19            ),
20          ),
21          actions: [
22            Icon(Icons.laptop_chromebook),
23            SizedBox(width: 24),
24            Icon(Icons.search),
25            SizedBox(width: 24),
26            Icon(Icons.menu),
27            SizedBox(width: 24),
28          ],
29        ),
30        body: Center(
31          child: Consumer(builder: (context, ref, child) {
32            final ForthpageModel forthpageModel = ref.watch(forthpageProvider);
33            final List<Book>? books = forthpageModel.books;
34            
35            if (books == null) {
36              return CircularProgressIndicator();
37            }
38
39            final List<Widget> widgets = books
40                .map(
41                  (book) => Slidable(
42                    child: ListTile(
43                      title: Text(book.title),
44                      subtitle: Text(book.author),
45                    ),
46                    endActionPane: ActionPane(
47                      motion: ScrollMotion(),
48                      children: [
49                        SlidableAction(
50                          // An action can be bigger than the others.
51                          label: '編集',
52                          flex: 1,
53                          onPressed: (BuildContext context) async {
54                            final bool? added = await Navigator.push(
55                              context,
56                              MaterialPageRoute(
57                                builder: (context) => EditBookPage(book),
58                                //編集画面でタイトルと著者を最初から残したいから引数book
59                              ),
60                            );
61                            if (added != null && added) {
62                              final snackBar = SnackBar(
63                                backgroundColor:
64                                    Color.fromARGB(255, 93, 246, 111),
65                                content: Text('本を更新しました'),
66                              );
67                              _scaffoldKey.currentState?.showSnackBar(snackBar);
68                            }
69                          },
70                          backgroundColor: Color.fromARGB(255, 126, 126, 126),
71                          foregroundColor: Colors.white,
72                          icon: Icons.edit,
73                        ),
74                        SlidableAction(
75                          label: '削除',
76                          onPressed: (BuildContext context) async {
77                            await showMyDialog(context, book, forthpageModel);
78                          },
79                          backgroundColor: Color.fromARGB(255, 211, 63, 63),
80                          foregroundColor: Colors.white,
81                          icon: Icons.delete,
82                        ),
83                      ],
84                    ),
85                  ),
86                )
87                .toList();
88            return ListView(
89              children: widgets,
90            );
91          }),
92        ),
93      ),
94    );
95  }
96

forth_model.dart
1
2final forthpageProvider = ChangeNotifierProvider(
3  (ref) => ForthpageModel()
4);
5
6
7//firebaseの値をとってくるページ
8class ForthpageModel extends ChangeNotifier {
9  User? currentUser = null;
10
11  void setCurrentUser() {
12    currentUser = FirebaseAuth.instance.currentUser;
13    notifyListeners();
14  }
15
16  final Stream<QuerySnapshot> _usersStream =
17      FirebaseFirestore.instance.collection('books').snapshots();
18
19  List<Book>? books;
20
21  void fetchBooklist() {
22    _usersStream.listen((QuerySnapshot snapshot) {
23      final List<Book> books = snapshot.docs.map((DocumentSnapshot document) {
24        Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
25        final String id = document.id; //idはランダムに割り振っているのでこれが必要
26        final String title = data['title'];
27        final String author = data['author'];
28        final String? imgURL = data['imgURL'];
29
30        return Book(id, title, author, imgURL);
31      }).toList();
32
33      this.books = books;
34      notifyListeners();
35    });
36  }
37

もともとのコード

forth_page.dart
1
2class ForthPage extends StatelessWidget {
3  ForthPage({Key? key}) : super(key: key);
4  //更新をsnackbarに通知したい時に必要
5  final GlobalKey<ScaffoldMessengerState> _scaffoldKey =
6      GlobalKey<ScaffoldMessengerState>();
7
8  @override
9  Widget build(BuildContext context) {
10    return ChangeNotifierProvider<ForthpageModel>(
11      create: (_) => ForthpageModel()..fetchBooklist(),
12      child: ScaffoldMessenger(
13        key: _scaffoldKey,
14        child: Scaffold(
15          appBar: AppBar(
16            backgroundColor: Color.fromARGB(255, 236, 124, 5),
17            title: const Text(
18              'Forth',
19              style: TextStyle(
20                fontWeight: FontWeight.bold,
21              ),
22            ),
23            actions: [
24              Icon(Icons.laptop_chromebook),
25              SizedBox(width: 24),
26              Icon(Icons.search),
27              SizedBox(width: 24),
28              Icon(Icons.menu),
29              SizedBox(width: 24),
30            ],
31          ),
32          body: Center(
33            child: Consumer<ForthpageModel>(builder: (context, model, child) {
34              final List<Book>? books = model.books;
35
36              if (books == null) {
37                return CircularProgressIndicator();
38              }
39
40              final List<Widget> widgets = books
41                  .map(
42                    (book) => Slidable(
43                      child: ListTile(
44                        title: Text(book.title),
45                        subtitle: Text(book.author),
46                      ),
47                      endActionPane: ActionPane(
48                        motion: ScrollMotion(),
49                        children: [
50                          SlidableAction(
51                            // An action can be bigger than the others.
52                            label: '編集',
53                            flex: 1,
54                            onPressed: (BuildContext context) async {
55                              final bool? added = await Navigator.push(
56                                context,
57                                MaterialPageRoute(
58                                  builder: (context) => EditBookPage(book),
59                                  //編集画面でタイトルと著者を最初から残したいから引数book
60                                ),
61                              );
62                              if (added != null && added) {
63                                final snackBar = SnackBar(
64                                  backgroundColor:
65                                      Color.fromARGB(255, 93, 246, 111),
66                                  content: Text('本を更新しました'),
67                                );
68                                _scaffoldKey.currentState
69                                    ?.showSnackBar(snackBar);
70                              }
71                            },
72                            backgroundColor: Color.fromARGB(255, 126, 126, 126),
73                            foregroundColor: Colors.white,
74                            icon: Icons.edit,
75                          ),
76                          SlidableAction(
77                            label: '削除',
78                            onPressed: (BuildContext context) async {
79                              await showMyDialog(context, book, model);
80                            },
81                            backgroundColor: Color.fromARGB(255, 211, 63, 63),
82                            foregroundColor: Colors.white,
83                            icon: Icons.delete,
84                          ),
85                        ],
86                      ),
87                    ),
88                  )
89                  .toList();
90              return ListView(
91                children: widgets,
92              );
93            }),
94          ),
95      ),
96    );
97  }

forth_model.dart
1
2class ForthpageModel extends ChangeNotifier {
3  final Stream<QuerySnapshot> _usersStream =
4      FirebaseFirestore.instance.collection('books').snapshots();
5
6  List<Book>? books;
7
8  void fetchBooklist() {
9    _usersStream.listen((QuerySnapshot snapshot) {
10      final List<Book> books = snapshot.docs.map((DocumentSnapshot document) {
11        Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
12        final String id = document.id; //idはランダムに割り振っているのでこれが必要
13        final String title = data['title'];
14        final String author = data['author'];
15        return Book(id, title, author);
16      }).toList();
17
18      this.books = books;
19      notifyListeners();
20    });
21  }

moriman

2022/12/26 04:28

コードを実行できないので推測になりますが、ずっとCircularProgressIndicatorが表示されているということは forthpageModel.booksの値がずっとnullのままだからだと思われます。何もエラーが出ていないのならforthpageProvider側に原因があるのかな、と思います。その箇所のコードは示されていないのでこれ以上は何とも言いようがないです。

_Victorique__

2022/12/26 06:49

質問と関係ないですけど forth -> fourth ですかね

matsudesuyo

2022/12/26 07:23

コード部分を多少追記しました（文字数の関係でimportやfloatingActionButtonは削除してます） _Victorique__さんご指摘ありがとうございます。スペルミスですね、、

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

回答1件

ベストアンサー

fetchBooklistメソッドを呼び出している(実行している)箇所が見当たらないのですが、
どこかで呼び出していますか?
呼び出していないとリッスンが始まらないのでいつまで経ってもforthpageModel.booksはnullのままですよね。
(実際動かしてないので、多分そうじゃないか、の話です。)

呼び出し忘れているなら例えばForthpageModelのコンストラクタで下記のようにfetchBooklistメソッドを呼び出す必要があると思います。

class ForthpageModel extends ChangeNotifier {
    ForthpageModel(){
        fetchBooklist();
    }
    User? currentUser = null;
    //...

投稿2022/12/26 08:22

moriman

総合スコア615

matsudesuyo

2022/12/26 12:19

できました！おっしゃる通りで、ぼくはそもそもの部分がわかっていなく……大変勉強になりました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.41%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！