[Flutter]SingleChildScrollViewを横スクロール(horizontal scroll)にするには？

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

SingleChildScrollViewを横スクロールにする方法を紹介します。

方法
使用例

方法

SingleChildScrollViewを横スクロールにするには、引数「scrollDirection」を使います。

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

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Widget(),
),

引数「scrollDirection」を使えば、SingleChildScrollViewを横スクロールにすることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              Container(height: 200, width: 200, color: Colors.blue),
              Container(height: 200, width: 200, color: Colors.yellow),
              Container(height: 200, width: 200, color: Colors.pink),
              Container(height: 200, width: 200, color: Colors.blue),
              Container(height: 200, width: 200, color: Colors.yellow),
              Container(height: 200, width: 200, color: Colors.pink),
            ],
          ),
        ),
      ),
    );
  }