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

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

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

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

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

MVVM

MVVM(Model View ViewModel)は構築上のデザインパターンで、表現ロジック(ViewModel)によってデータ(Model)からページ(View)を分離させます。

Dart

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

1647閲覧

【Flutter】Riverpodを使いQiitaAPIの記事を表示させたい

退会済みユーザー

退会済みユーザー

総合スコア0

Flutter

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

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

MVVM

MVVM(Model View ViewModel)は構築上のデザインパターンで、表現ロジック(ViewModel)によってデータ(Model)からページ(View)を分離させます。

Dart

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

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2022/01/02 07:24

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問