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

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

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

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

Q&A

0回答

2261閲覧

【Flutter】APIで取得した値を更新したいのですが、providerの使い方がわからないです。

lightfull

総合スコア11

Flutter

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

0グッド

0クリップ

投稿2020/07/18 15:25

見様見真似で、FlutterでAPIで取得した値で、Listviewを表示することはできるのですが、
providerの使い方が理解できず、リストの更新ができません。
やりたいことは、Listviewの一番下まで来た時に、次のデータを読み込んで、リストに追加したいです。
ListViewの無限スクロールについては、https://flutter.ctrnost.com/tutorial/tutorial06/ を見て理解していますが、
providerとFutureがからんでて、さっぱり理解できません。
一体なんのオブジェクトを更新?すれば、ListViewの中身が再描画されるのでしょうか??

public.yamlに以下を追加(なにか足りなかったらごめんなさい)

dependencies: chopper: ^3.0.1+1 provider: ^4.0.4

main.dart

flutter

1import 'dart:convert'; 2 3import 'package:flutter/material.dart'; 4import 'package:chopper/chopper.dart'; 5import 'package:provider/provider.dart'; 6import 'items_api_service.dart'; 7 8void main() => runApp(MyApp()); 9 10class MyApp extends StatelessWidget { 11 @override 12 Widget build(BuildContext context) { 13 return MaterialApp( 14 home: Provider<ItemsApiService>( 15 create: (_) => ItemsApiService.create(), 16 dispose: (context, ItemsApiService service) => service.client.dispose(), 17 child: Itemlist(), 18 )); 19 } 20} 21 22class Itemlist extends StatelessWidget { 23 @override 24 Widget build(BuildContext context) { 25 return Scaffold( 26 appBar: AppBar( 27 title: Text('API Test'), 28 ), 29 body: _buildBody(context), 30 ); 31 } 32 33 FutureBuilder<Response> _buildBody(BuildContext context) { 34 return FutureBuilder<Response>( 35 future: Provider.of<ItemsApiService>(context).getSearchPosts("flutter"), 36 builder: (context, snapshot) { 37 if (snapshot.connectionState == ConnectionState.done) { 38 if (snapshot.data.bodyString.length > 2) { 39 final List posts = json.decode(snapshot.data.bodyString); 40 return _buildPosts(context, posts); 41 } else { 42 return Text('記事がありませんでした。'); 43 } 44 } else { 45 return Center( 46 child: CircularProgressIndicator(), 47 ); 48 } 49 }, 50 ); 51 } 52 53 ListView _buildPosts(BuildContext context, List posts) { 54 print(posts[1]); 55 return ListView.builder( 56 itemCount: posts.length, 57 padding: EdgeInsets.all(2), 58 itemBuilder: (context, index) { 59 return Card( 60 elevation: 2, 61 child: ListTile( 62 title: Text( 63 posts[index]['title'], 64 style: TextStyle(fontWeight: FontWeight.bold), 65 ), 66 onTap: () => {}), 67 ); 68 }, 69 ); 70 } 71} 72

items_api_service.dart

flutter

1import 'package:chopper/chopper.dart'; 2 3part 'items_api_service.chopper.dart'; 4 5@ChopperApi(baseUrl: '/v2') 6abstract class ItemsApiService extends ChopperService { 7 @Get(path: "/items?per_page=50") 8 Future<Response> getPosts(); 9 10 @Get(path: "/items?query={str}&per_page=50") 11 Future<Response> getSearchPosts( 12 @Path('str') String str, 13 ); 14 15 @Get(path: "/tags/{tag}/items?per_page=50") 16 Future<Response> getTagPosts( 17 @Path('tag') String str, 18 ); 19 20 static ItemsApiService create() { 21 final client = ChopperClient( 22 // The first part of the URL is now here 23 baseUrl: 'https://qiita.com/api', 24 services: [ 25 // The generated implementation 26 _$ItemsApiService(), 27 ], 28 // Converts data to & from JSON and adds the application/json header. 29 converter: JsonConverter(), 30 ); 31 32 // The generated class with the ChopperClient passed in 33 return _$ItemsApiService(client); 34 } 35} 36

上記をlibの下に作成して、以下を実行して、Chopper用のファイルを作成してください。

flutter packages pub run build_runner build --delete-conflicting-outputs

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問