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

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

Containerのchildを横にスクロールするようにする方法を紹介します。

方法

Containerのchildを横にスクロールするようにするには、まずContainerのchildにSngleChildScrollViewを指定します。

次に、Containerの内でスクロールしたいウェジェットを、SignleChildScrollViewのchildに指定します。

Container(
  child: SingleChildScrollView(
    child: /*横スクロールするウェジェット*/,
  ),
),

そして、SingleChildScrollViewの引数「scrollDirection」に「Axis.horizontal」を指定します。

Container(
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: /*横スクロールしたいウェジェット*/,
  ),
),

これでContainerのchildを横スクロールにすることが出来ます。

使用例

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