[Flutter] ListView.separatedで、要素が表示されない時の解決策

やりたいこと

ListView.separatedを使って、表示されている要素間に均等に線を引きたい。

経緯

1. GridView.countを使って、表示したい要素を表示していた。
2. その間にDividerを使って、線を引いていた
3. 要素間の中心に線を引くことができなかった。
4. ListView.separated()を使ってみた。
5. 4を試すと、要素自体が表示されなくなった。
6. 原因はColumn内で使っていたこと、ShrinkWrapを指定していなかったこと

表示されなかったコード

return ListView.separated(
          itemBuilder: (context, index) {
            return Container(
              padding: const EdgeInsets.only(top: 5, bottom: 5),
              alignment: Alignment.centerLeft,
              child: InkWell(
                onTap: () {
                  context.go(
                    RouteConstant.nav.goArticle(
                      article: relations[index],
                      topicId: relations[index].attributes.parent!.single.id,
                      topicTitle: relations[index]
                          .attributes
                          .parent!
                          .single
                          .attributes
                          .title,
                    ),
                  );
                },
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      relations[index].attributes.title,
                      style: Theme.of(context).textTheme.titleMedium!.apply(
                            decoration: TextDecoration.underline,
                          ),
                    ),
                    Text(
                      relations[index].attributes.desc ?? '',
                      style: Theme.of(context)
                          .textTheme
                          .bodyMedium!
                          .merge(AppTextStyle.fontSize_14),
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                    )
                  ],
                ),
              ),
            );
          },
          separatorBuilder: (context, index) {
            return const Divider(height: 0.5);
          },
          itemCount: relations.length,
        );

表示されたコード

return ListView.separated(
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return Container(
              padding: const EdgeInsets.only(top: 5, bottom: 5),
              alignment: Alignment.centerLeft,
              child: InkWell(
                onTap: () {
                  context.go(
                    RouteConstant.nav.goArticle(
                      article: relations[index],
                      topicId: relations[index].attributes.parent!.single.id,
                      topicTitle: relations[index]
                          .attributes
                          .parent!
                          .single
                          .attributes
                          .title,
                    ),
                  );
                },
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      relations[index].attributes.title,
                      style: Theme.of(context).textTheme.titleMedium!.apply(
                            decoration: TextDecoration.underline,
                          ),
                    ),
                    Text(
                      relations[index].attributes.desc ?? '',
                      style: Theme.of(context)
                          .textTheme
                          .bodyMedium!
                          .merge(AppTextStyle.fontSize_14),
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                    )
                  ],
                ),
              ),
            );
          },
          separatorBuilder: (context, index) {
            return const Divider(height: 0.5);
          },
          itemCount: relations.length,
        );

まとめ

前提として、上記のコードは、別クラスにてColumn内で使用されていました。
調べてみると、ListViewはColumn内では使えないようです。
ListViewもColumnも、表示するスペースを最大限取得しようとすることが原因とのことでした。
表示するスペースだけが広がり、中身が表示されなくなるようです。

表示されなかったコードでは、

shrinkWrap: true,

こちらのshrinkWrapを指定していませんでした。
表示されたコードのようにShrinkWrapを指定すると、ListViewは必要最低限のスペースを取得します。

備考

Expandedの引数にListViewを指定する方法でも解決できるそうです。

参考記事

https://www.choge-blog.com/programming/flutterlistview-columnuse/

パラグアイでFlutter勉強してます🇵🇾