[Flutter]横スクロール(horizontal scroll)のCard(カード)のリスト(list)を表示するには？

どうも、ちょげ(@chogetarou)です。

横スクロールのCardのリストを表示する方法を紹介します。

方法
1. ListView
2. ListView.builder
使用例

方法

横スクロールのCardのリストを表示するには、ListViewもしくはListView.builderを使います。

具体的には、ListViewもしくはListView.builderの引数「scrollDirection」に「Axis.horizontal」を指定します。

ListView

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Card(),
    Card(),
    Card(),
    ・・・
  ],
),

ListView.builder

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemBuilder: (context, index) {
    return Card();
  },
  itemCount: _count,
),

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 200,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, index) {
              return Card(
                color: index % 2 == 1 ? Colors.blue : Colors.green,
                child: Container(
                  width: 200,
                ),
              );
            },
            itemCount: 10,
          ),
        ),
      ),
    );
  }