前提・実現したいこと
ここに質問の内容を詳しく書いてください。
QiitaAPIでとってきた情報をRiverpodを使って画面に表示させたいです。
参考
発生している問題・エラーメッセージ
しかし、画面が白いままで情報が表示されません。
該当のソースコード
articele_list_view.dart
dart
1import 'package:flutter/material.dart'; 2import 'package:flutter_retorofit_api/view/article_list_tile.dart'; 3import 'package:flutter_retorofit_api/view_model/article_list_view_model.dart'; 4import 'package:hooks_riverpod/hooks_riverpod.dart'; 5 6final articleProvider = StateNotifierProvider((ref) => ArticleListViewModel()); 7 8class ArticleListView extends ConsumerWidget { 9 10 const ArticleListView({Key? key}) : super(key: key); 11 12 13 Widget build(BuildContext context, WidgetRef ref) { 14 return Scaffold( 15 appBar: AppBar( 16 title: const Text('Qiita Articles'), 17 ), 18 body: 19 RefreshIndicator( 20 child: _buildListView(ref.watch(articleProvider.notifier)), 21 onRefresh: () => 22 ref.watch(articleProvider.notifier).fetchArticles()) 23 ); 24 } 25 26 Widget _buildListView(ArticleListViewModel viewModel) { 27 return ListView.separated( 28 padding: EdgeInsets.symmetric(vertical: 8), 29 itemBuilder: (context, index) { 30 return ArticleListTile(article: viewModel.articles[index]); 31 }, 32 separatorBuilder: (context, index) => Divider(), 33 itemCount: viewModel.articles.length); 34 } 35} 36
article_list_view_model.dart
dart
1import 'package:flutter_retorofit_api/model/article.dart'; 2import 'package:flutter_retorofit_api/repository/article_repository.dart'; 3import 'package:flutter_retorofit_api/repository/article_repository_impl.dart'; 4import 'package:hooks_riverpod/hooks_riverpod.dart'; 5 6class ArticleListViewModel extends StateNotifier { 7 final ArticleRepository repository = ArticleRepositoryImpl(); 8 late List<Article> articles; 9 10 ArticleListViewModel() : super(null) { 11 this.articles = []; 12 fetchArticles(); 13 } 14 15 Future<void> fetchArticles() async { 16 await repository.fetchArticles().then((result) { 17 result.when(success: (articles) { 18 this.articles = articles; 19 print(this.articles); 20 }, failure: (error) { 21 print(error.message); 22 }); 23 }); 24 } 25} 26
試したこと
こちらの通りproviderを使ったら表示されたのですが,Riverpodに変更したところ表示されませんでした.
補足情報(FW/ツールのバージョンなど)
flutterのバージョン: 2.81
あなたの回答
tips
プレビュー