[Flutter] 横向きのListViewと縦向きのListViewを組み合わせて使う

できたもの

ソースコード

https://github.com/popy1017/flutter_horizontal_list_view

やり方

横向きのListViewを縦向きに複数個並べる

横向きのListViewを垂直方向に複数個並べたい時は、ListView(またはColumn)のような要素を縦に並べる要素にListView(scrollDirection: Axis.horizontal)を複数個配置する。
その際、横向きのListViewを高さを制限するための要素(Container,SizedBoxなどのheightを指定する)でラップしてあげないとエラーが出るため注意が必要。

参考

      // Error: Horizontal viewport was given unbounded height.
      // ColumnのmainAxisSizeを指定しても同じ
      body: Column( // ← ListViewの場合も同じエラーが出る
        children: [
          ListView(
            scrollDirection: Axis.horizontal,
            children: [
              Text('Hello, '),
              Text('World!'),
            ],
          ),
        ],
      ),

横向きのListViewと一緒に縦向きのListViewも並べる

縦向きのListViewに以下のプロパティを指定する。

ListView( 
  children: _children,
  shrinkWrap: true,                 // <= 追加
  physics: ClampingScrollPhysics(), // <= 追加
),

参考記事

ListViewのネストについて

https://stackoverflow.com/questions/45270900/how-to-implement-nested-listview-in-flutter

shrinkWrapとは何か

https://stackoverflow.com/questions/54007073/what-does-the-shrink-wrap-property-do-in-flutter

ClampingScrollPhysicsとは

https://api.flutter.dev/flutter/widgets/ClampingScrollPhysics-class.html