前提
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 }
コードを実行できないので推測になりますが、
ずっとCircularProgressIndicatorが表示されているということは
forthpageModel.booksの値がずっとnullのままだからだと思われます。
何もエラーが出ていないのならforthpageProvider側に原因があるのかな、と思います。
その箇所のコードは示されていないのでこれ以上は何とも言いようがないです。
質問と関係ないですけど forth -> fourth ですかね
コード部分を多少追記しました(文字数の関係でimportやfloatingActionButtonは削除してます)
_Victorique__さん
ご指摘ありがとうございます。スペルミスですね、、
回答1件
あなたの回答
tips
プレビュー