【flutter】横スクロールをするには？

こんにちは。
今回は、横スクロールを実装する方法を紹介します。

方法

Rowの要素を横スクロールするには、SingleChildScrollViewを使います。

まず、RowをSingleChildScrollViewでラップします。

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

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink, //背景の色を選択
        title: const Text("Flutter!!!!"), //タイトルを表示
      ),
      body: SingleChildScrollView(//スクロール
        scrollDirection: Axis.horizontal,//スクロールの方向、水平
        child: Row(
          children: [
            Container(
              height: 200,
              width: 200,
              decoration: const BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
            ),
            Container(
              height: 200,
              width: 200,
              decoration: const BoxDecoration(
                color: Colors.yellow,
                shape: BoxShape.circle,
              ),
            ),
            Container(
              height: 200,
              width: 200,
              decoration: const BoxDecoration(
                color: Colors.black,
                shape: BoxShape.circle,
              ),
            ),
            Container(
              height: 200,
              width: 200,
              decoration: const BoxDecoration(
                color: Colors.green,
                shape: BoxShape.circle,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

実行例