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

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

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

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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

Q&A

解決済

1回答

279閲覧

【Flutter】APIから取得したデータをCardでリストにしたい!

nomin.

総合スコア2

Flutter

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

Android Studio

Android Studioは、 Google社によって開発された、 Androidのネイティブアプリケーション開発に特化した統合開発ツールです。

Dart

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

0グッド

0クリップ

投稿2023/12/26 17:29

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • APIで取得したデータを元にCardでリストを作る

前提

Flutterでウィキペディアをランダムに表示するという暇つぶしアプリを作っています。
Wikipedia APIから取得したページ名やURLなどをどのようにしてCardにすればいいのかが分からず、教えて頂きたいです。
色々試しすぎてグチャグチャになっていますが初心者なのでお許しください。

該当のソースコード

[readwiki.dart]

dart

1import 'package:flutter/material.dart'; 2import 'package:wikidom/components/appbar.dart'; 3import 'package:wikidom/services/random_get.dart'; 4 5class ReadWiki extends StatefulWidget { 6 const ReadWiki({super.key}); 7 8 9 State<ReadWiki> createState() => _ReadWikiState(); 10} 11 12class _ReadWikiState extends State<ReadWiki> { 13 14 Widget build(BuildContext context) { 15 return Scaffold( 16 appBar: const CustomAppBar(title: "Wikidom"), 17 floatingActionButton: FloatingActionButton( 18 onPressed: () { 19 RandomArticle(); 20 }, 21 child: const Icon(Icons.loop), 22 ), 23 body: SingleChildScrollView( 24 child: Column( 25 children: [ 26 Card( 27 child: SizedBox( 28 height: 100, 29 child: Center( 30 child: ListTile( 31 leading: Image.network('https://placehold.jp/50x50.png'), 32 title: const Text('Wikipedia'), 33 trailing: const Icon(Icons.more_vert), 34 ), 35 ), 36 ), 37 ), 38 ], 39 ), 40 ), 41 ); 42 } 43}

[random_get.dart]

dart

1import 'dart:convert'; 2 3import 'package:flutter/material.dart'; 4import 'package:http/http.dart' as http; 5 6class RandomArticle extends StatefulWidget { 7 RandomArticle({super.key}); 8 9 10 State<RandomArticle> createState() => _RandomArticleState(); 11} 12 13class _RandomArticleState extends State<RandomArticle> { 14 String pageTitle = ""; 15 String imageUrl = ""; 16 String pageUrl = ""; 17 18 Future<void> getRandomArticle() async { 19 final response = await http.get(Uri.parse( 20 'https://ja.wikipedia.org/w/api.php?action=query&format=json&list=random&rnnamespace=0&rnlimit=1')); 21 22 if (response.statusCode == 200) { 23 Map<String, dynamic> data = json.decode(response.body); 24 25 if (data.containsKey('query') && data['query']['random'].length > 0) { 26 var pageId = data['query']['random'][0]['id']; 27 await getArticleDetails(pageId); 28 } 29 } else { 30 // Handle error 31 print('Failed to load random article'); 32 } 33 } 34 35 Future<void> getArticleDetails(int pageId) async { 36 final response = await http.get(Uri.parse( 37 'https://ja.wikipedia.org/w/api.php?action=query&format=json&pageids=$pageId&prop=info|pageimages&pithumbsize=500')); 38 39 if (response.statusCode == 200) { 40 Map<String, dynamic> data = json.decode(response.body); 41 42 if (data.containsKey('query') && data['query']['pages'].length > 0) { 43 var page = data['query']['pages'][pageId.toString()]; 44 setState(() { 45 pageTitle = page['title']; 46 imageUrl = 47 page.containsKey('thumbnail') ? page['thumbnail']['source'] : ''; 48 pageUrl = 'https://ja.wikipedia.org/wiki/$pageTitle'; 49 }); 50 } 51 } else { 52 // Handle error 53 print('Failed to load article details'); 54 } 55 } 56 57 58 Widget build(BuildContext context) { 59 return Card( 60 child: SizedBox( 61 height: 100, 62 child: Center( 63 child: ListTile( 64 leading: Image.network(imageUrl), 65 title: Text(pageTitle), 66 trailing: const Icon(Icons.more_vert), 67 onTap: () {}, 68 ), 69 ), 70 ), 71 ); 72 } 73}

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

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

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

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

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

guest

回答1

0

ベストアンサー

  • ReadWiki側
    まずウィジェットを以下の様にchange callbackに直接ウィジェットを記述してもなんも意味はありません。
    NavigatorのpushやshowDialogを使ってルート上に配置するか、現在のウィジェットの構成に配置するウィジェットを追加配置する必要があります。

dart

1 onPressed: () { 2 RandomArticle(); 3 },
  • RandomArticle側
    データをFutureで取得する場合、FutureBuilderでFutureの状態によって表示する内容を変えるか、Futureが完了した時点でsetStateでState側の再構築指示をするかどちらかを実行する必要があります。
    RandomArticleはsetStateを使っているようですが。
    あとはこのFuture関数を起動する処理を追加する必要もあります。
    なおsetStateを使う方は実装は簡単ですが、該当するウィジェットが存在しない場合の対処をしないと例外が出るので注意が必要です。

ということで、以下の様な修正を加えると、動くとは思います。
onPressed部分の変更。

dart

1 onPressed: () { 2 showDialog( 3 context: context, 4 builder: (context) => RandomArticle(), 5 );

RandomArticleのFutureを起動する処理。

dart

1 2 void initState() { 3 getRandomArticle(); 4 super.initState(); 5 }

投稿2023/12/28 03:00

ta.fu

総合スコア1685

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問