[Flutter]Scaffoldのbodyをスクロール出来る(scrollable)ようにするには？

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

Scaffoldのbodyをスクロール出来るようにする方法を紹介します。

方法
使用例

方法

Scaffoldのbodyをスクロール出来るようにするには、SingleChildScrollViewを使います。

具体的には、bodyに指定しているウェジェットをSingleChildScrollViewでラップします。

Scaffold(
  body: SingleChildScrollView(
    child: Widget(),
  ),
);

SingleChildScrollViewを使えば、Scaffoldのbodyをスクロール出来るようにすることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 300,
              color: Colors.blue,
            ),
            Container(
              height: 300,
              color: Colors.yellow,
            ),
            Container(
              height: 300,
              color: Colors.pink,
            ),
            Container(
              height: 300,
              color: Colors.blue,
            ),
            Container(
              height: 300,
              color: Colors.yellow,
            ),
            Container(
              height: 300,
              color: Colors.pink,
            )
          ],
        ),
      ),
    );
  }