[Flutter]Column(カラム)をスクロール出来る(scrollable)ようにするには？

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

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

方法
使用例
1. 関連

方法

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

具体的には、 ColumnをSingleChildScrollViewの引数「child」に指定します。

SingleChildScrollView(
  child: Column(
    children: [
     ・・・
    ],
  ),
),

これでColumnがスクロール出来るようになります。

使用例

以下は、使用例です。

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