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

Question

実現したいこと

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

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

前提

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

該当のソースコード

[readwiki.dart]

import 'package:flutter/material.dart';
import 'package:wikidom/components/appbar.dart';
import 'package:wikidom/services/random_get.dart';

class ReadWiki extends StatefulWidget {
  const ReadWiki({super.key});

  @override
  State<ReadWiki> createState() => _ReadWikiState();
}

class _ReadWikiState extends State<ReadWiki> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(title: "Wikidom"),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          RandomArticle();
        },
        child: const Icon(Icons.loop),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Card(
              child: SizedBox(
                height: 100,
                child: Center(
                  child: ListTile(
                    leading: Image.network('https://placehold.jp/50x50.png'),
                    title: const Text('Wikipedia'),
                    trailing: const Icon(Icons.more_vert),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[random_get.dart]

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class RandomArticle extends StatefulWidget {
  RandomArticle({super.key});

  @override
  State<RandomArticle> createState() => _RandomArticleState();
}

class _RandomArticleState extends State<RandomArticle> {
  String pageTitle = "";
  String imageUrl = "";
  String pageUrl = "";

  Future<void> getRandomArticle() async {
    final response = await http.get(Uri.parse(
        'https://ja.wikipedia.org/w/api.php?action=query&format=json&list=random&rnnamespace=0&rnlimit=1'));

    if (response.statusCode == 200) {
      Map<String, dynamic> data = json.decode(response.body);

      if (data.containsKey('query') && data['query']['random'].length > 0) {
        var pageId = data['query']['random'][0]['id'];
        await getArticleDetails(pageId);
      }
    } else {
      // Handle error
      print('Failed to load random article');
    }
  }

  Future<void> getArticleDetails(int pageId) async {
    final response = await http.get(Uri.parse(
        'https://ja.wikipedia.org/w/api.php?action=query&format=json&pageids=$pageId&prop=info|pageimages&pithumbsize=500'));

    if (response.statusCode == 200) {
      Map<String, dynamic> data = json.decode(response.body);

      if (data.containsKey('query') && data['query']['pages'].length > 0) {
        var page = data['query']['pages'][pageId.toString()];
        setState(() {
          pageTitle = page['title'];
          imageUrl =
              page.containsKey('thumbnail') ? page['thumbnail']['source'] : '';
          pageUrl = 'https://ja.wikipedia.org/wiki/$pageTitle';
        });
      }
    } else {
      // Handle error
      print('Failed to load article details');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: SizedBox(
        height: 100,
        child: Center(
          child: ListTile(
            leading: Image.network(imageUrl),
            title: Text(pageTitle),
            trailing: const Icon(Icons.more_vert),
            onTap: () {},
          ),
        ),
      ),
    );
  }
}

Answer 1

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

        onPressed: () {
          RandomArticle();
        },

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

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

        onPressed: () {
          showDialog(
            context: context,
            builder: (context) => RandomArticle(),
          );

RandomArticleのFutureを起動する処理。

  @override
  void initState() {
    getRandomArticle();
    super.initState();
  }