[Flutter]Containerのchildをスクロールできるよう(scrollable)にするには？

[Flutter]Containerのchildをスクロールできるようにするには？

Flutter

2021.10.31

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

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

方法

Containerのchildをスクロロールできるようにするには、childに「SignleChildScrollView」を指定します。

そして、SingleChildScrollViewの引数「child」にContainer内に表示するウェジェットを指定します。

Container(
  child: SingleChildScrollView(
    child: /*ウェジェット*/,
  ),
),

これでContainerのchildをスクロールできるようになります。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(border: Border.all()),
          height: 200,
          width: 200,
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  height: 200,
                  width: 200,
                  color: Colors.pink,
                ),
                Container(
                  height: 200,
                  width: 200,
                  color: Colors.yellow,
                ),
                Container(
                  height: 200,
                  width: 200,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }