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

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

新規登録して質問してみよう
ただいま回答率
85.44%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

解決済

1回答

867閲覧

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

matsudesuyo

総合スコア4

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2022/12/25 14:23

編集2022/12/26 07:19

前提

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 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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__さん ご指摘ありがとうございます。スペルミスですね、、
guest

回答1

0

ベストアンサー

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問