[Flutter]SingleChildScrollViewの高さを変えるには？

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

SingleChildScrollViewの高さを変える方法を紹介します。

方法

SingleChildScrollViewの高さを変えるには、ContainerもしくはSizedBoxを使います。

まず、SingleChildScrollViewをContainerもしくはSizedBoxでラップします。

そして、ContainerもしくはSizedBoxの引数「height」に高さを指定します。

Container(
  height: 高さ,
  child: SingleChildScrollView(・・・),
),

ラップしたContainerもしくはSizedBoxの引数「height」に指定した高さが、SingleChildScrollViewの高さになります。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 200,
          color: Colors.blue,
          child: SingleChildScrollView(
            child: Column(
              children: [
                for (var i = 0; i < 20; i++)
                  Text(
                    'Product $i',
                    style: TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }