Flutterで取得したいデータが、要望より少なかった時の挙動

Flutterで、5つの画像データを取得したいとき、フロント画面では5つの箱を灰色(グレーアウト)で用意しておいて、
取得後、箱に画像をレンダリングすると言った動きを作りたいです。
しかし、データが3つ分しかなかった場合に、残り２つは灰色のまま、という書き方をしたいのですが、そうなるとエラーになってしまい上手く行きません。
▼理想図

flutter
1class WantData extends StatefulWidget {
2  @override
3  _WantDataState createState() => _WantDataState();
4}
5
6class _WantDataState extends State<WantData> {
7  bool _alreadyDisposed = false;
8  Map<String, Object> _myProfileItems;
9  List<Map<String, dynamic>> _dataGroup;
10
11  @override
12  void initState() {
13    super.initState();
14    setState(() => _loadData());
15  }
16
17  @override
18  void setState(Function fn) {
19    if (_alreadyDisposed) return;
20    super.setState(fn);
21  }
22
23  @override
24  void dispose() {
25    _alreadyDisposed = true;
26    super.dispose();
27  }
28
29  @override
30  void didChangeDependencies() {
31    super.didChangeDependencies();
32    if (_myProfileItems == null) {
33      _loadData();
34    }
35  }
36
37  void _loadData() {
38    _dataGroup = [
39      {
40        'img': 'https://example.com/AAA',
41      },
42      {
43        'img': 'https://example.com/BBB',
44      },
45      {
46        'img': 'https://example.com/CCC',
47      },
48    ];
49  }
50
51  @override
52  Widget build(BuildContext context) {
53    return Column(
54      crossAxisAlignment: CrossAxisAlignment.center,
55      children: [
56        //ファミリー
57        Card(
58            color: Colors.white,
59            margin: EdgeInsets.symmetric(vertical: 5.0),
60            child: Column(
61              children: [
62                SizedBox(
63                    width: double.infinity,
64                    height: 50,
65                    child: Row(
66                      mainAxisAlignment: MainAxisAlignment.center,
67                      children: [
68                        ListView.builder(
69                            shrinkWrap: true,
70                            scrollDirection: Axis.horizontal,
71                            itemCount: 5,
72                            itemBuilder: (context, index) {
73                              return Container(
74                                  width: 50,
75                                  height: 50,
76                                  decoration: DottedDecoration(
77                                      shape: Shape.box,
78                                      color: Colors.grey[300],
79                                      borderRadius: BorderRadius.circular(25)),
80                                      child: _dataGroup[index]['img'] == null
81                                      ? Icon(
82                                          Icons.favorite,
83                                          color: Colors.grey[300],
84                                          size: 30,
85                                        )
86                                      : Image.network(_dataGroup[index]['img'])
87                                          );
88                            }),
89                      ],
90                    )),
91              ],
92            ))
93      ],
94    );
95  }
96}
97

実際にAPI通してデータをとってきているわけではなく、データ直打ちですが(おいおいはAPIも通してサーバーから取得してみたいと思っています)、
このように書くと画像は３つ分取れるのですが、残り２つの部分が赤の虎がらでRangeErrorが吐き出されてしまいます。

この場合、どのように実現できるのでしょうか？

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

回答1件

ベストアンサー

Widgetを出し分ける部分を、こうしてみてはどうでしょうか?

diff
1- child: _dataGroup[index]['img'] == null
2+ child: index >= _dataGroup.length
3    ? Icon(
4        Icons.favorite,
5        color: Colors.grey[300],
6        size: 30,
7      )
8    : Image.network(_dataGroup[index]['img'])