[Flutter]SingleChildScrollViewの背景色を変えるには？

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

SingleChildScrollViewの背景色を変える方法を紹介します。

方法

SingleChildScrollViewの背景色を変えるには、Containerを使います。

まず、SingleChildScrollViewをContainerでラップします。

そして、Containerの引数「color」に色を指定します。

Container(
  color: 色,
  child: SingleChildScrollView(・・・),
),

上記のContainerの引数「color」に指定した色が、SingleChildScrollViewの背景色になります。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 300,
          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,
                    ),
                  ),
              ],
            ),
          ),
        ),
      ),
    );
  }