[Flutter]SingleChildScrollViewを横幅いっぱいにするには？

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

SingleChildScrollViewを横幅いっぱいにする方法を紹介します。

方法

SingleChildScrollViewを横幅いっぱいにするには、ContainerもしくはSizedBoxを使います。

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

そして、ContainerもしくはSizedBoxの引数「width」に「double.infinity」を指定します。

Container( //SizedBoxでも同じ
  width: double.infinity,
  child: SingleChildScrollView(・・・),
),

ContainerもしくはSizedBoxの引数「width」に「double.infinity」を指定することで、ラップしたSingleChildScrollViewを横幅いっぱいにできます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: double.infinity,
          height: 200,
          child: SingleChildScrollView(
            child: Column(
              children: [
                for (var i = 0; i < 20; i++)
                  Container(
                    height: 30,
                    color: i.isEven ? Colors.blue : Colors.yellow,
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }