FlutterのListViewでCardウィジェットが表示されない

Flutterの勉強で、人物一覧みたいなのを、それぞれカードで横スライドで表示させたいです。
ListViewで、scrollDirection: Axis.horizontal　を使って、カード達を横にスクロールさせるイメージです。
しかし、Cardウィジェットが表示されず、原因がわからず困っています。

参考は以下の記事です。
https://www.flutter-study.dev/widgets/list-view-widget
これを応用して、Cardと組み合わせて、横スクロールを実験してみました。

▼main.dart

import 'package:flutter/material.dart';
import './src/foot_mark_icons.dart';
import './common/widgets/select_cast_widget.dart';
import './common/widgets/listview_ horizon_cast.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // bool dark = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Project',
      theme: ThemeData(
        accentColor: Color(0x673AB7),
        scaffoldBackgroundColor: Color(0xffEAE8EB),
      ),
      // theme: ThemeData.light(),
      // darkTheme: ThemeData.dark(),
      home: Home(),
      // initialRoute: '/',
      routes: <String, WidgetBuilder>{
        '/main': (BuildContext context) => Home(),
        '/footmark': (BuildContext context) => PageFootMark()
      },
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: Scaffold(
      //アプリバー
      appBar: AppBar(
        title: Text("呼ぶ"),
        backgroundColor: Color(0xFF42A5F5),
        leading: IconButton(
          icon: Icon(FootMark.icon_footmark),
          onPressed: () => Navigator.of(context).pushNamed("/footmark"),
        ),
      ),
      //コンテンツ
      body: Column(children: <Widget>[
        Container(
          child: Image.asset('../images/Home-bunner-media.jpg'),
        ),
        Column(children: <Widget>[
          Container(
            child: SelectCast(),
          ),
          Container(
            child: ListViewHorizonCast(),
          ),
        ])
      ]),
    ));
  }
}

▼ 今回作ってみたListViewHorizonCastのウィジェット
この中のカードが表示されない

import 'package:flutter/material.dart';

class ListViewHorizonCast extends StatelessWidget {
  final List<Map<String, dynamic>> listItems = [
    {
      'text': 'Item 1',
      'color': Colors.blue[600],
    },
    {
      'text': 'Item 2',
      'color': Colors.blue[300],
    },
    {
      'text': 'Item 3',
      'color': Colors.blue[100],
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
　　　　　//▼このContainerのプロパティは効いている
        Container(
          color: Colors.white,
          height: 125,
          margin: EdgeInsets.only(top: 10.0),
　　　　　　//▼ここから表示されてないっぽい
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: listItems.length,
            itemBuilder: (context, index) {
              return Card(
                child: Column(
                  children: [
                    ListTile(
                      leading: Image.asset('../images/sample.jpg'),
                      title: Text(listItems[index]['text']),
                      subtitle: Text('subtitle'),
                      trailing: Icon(Icons.more_vert),
                    ),
                  ],
                ),
                color: listItems[index]['color'],
              );
            },
          ),
        ),
      ],
    );
  }
}

コメントアウトに書いた通りで、Cardの中身の写真やテキストが表示されません。
コンソールのエラーは無しです。

原因の特定のやり方も分からずで、どのように対処したら良いでしょうか？
情報不足でしたら、言ってください。
よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

おそらく、横スクロールなのにListView内の要素に幅が指定されていないのが原因ではないでしょうか?
以下のように、要素に適当な幅を指定して試してみてください。

dart
1class ListViewHorizonCast extends StatelessWidget {
2  final List<Map<String, dynamic>> listItems = [
3    {
4      'text': 'Item 1',
5      'color': Colors.blue[600],
6    },
7    {
8      'text': 'Item 2',
9      'color': Colors.blue[300],
10    },
11    {
12      'text': 'Item 3',
13      'color': Colors.blue[100],
14    },
15  ];
16
17  @override
18  Widget build(BuildContext context) {
19    return Column(
20      children: <Widget>[
21        Container(
22          color: Colors.white,
23          height: 125,
24          margin: EdgeInsets.only(top: 10.0),
25          child: ListView.builder(
26            scrollDirection: Axis.horizontal,
27            itemCount: listItems.length,
28            itemBuilder: (context, index) {
29              return Card(
30                //▼ここで要素の幅を指定する
31                child: SizedBox(
32                  width: 300,
33                  child: Column(
34                    children: [
35                      ListTile
36                        leading: Image.asset('../images/sample.jpg'),
37                        title: Text(listItems[index]['text']),
38                        subtitle: Text('subtitle'),
39                        trailing: Icon(Icons.more_vert),
40                      ),
41                    ],
42                  ),
43                ),
44                color: listItems[index]['color'],
45              );
46            },
47          ),
48        ),
49      ],
50    );
51  }
52}