[Flutter]Scaffoldの背景(background)に画像(image)を表示するには？

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

Scaffoldの背景に画像を表示する方法を紹介します。

方法
使用例

方法

Scaffoldの背景に画像を表示するには、Stackを使います。

まず、Scaffoldの引数「body」にStackを指定します。

そして、Stackの引数「children」に背景画像とScaffoldで表示するウェジェットを指定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('パス'),
                fit: BoxFit.fill,
              ),
            ),
          ),
          Widget(), //通常表示するウェジェット
        ],
      ),
    );
  }

Stackを使えば、Scaffoldの背景に画像が表示されます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('asset/images/dog-photo.jpg'),
                fit: BoxFit.fill,
              ),
            ),
          ),
          Align(
            alignment: Alignment(0, -0.5),
            child: Container(
              height: 100,
              color: Colors.white,
              child: Text('Hello'),
              alignment: Alignment.center,
            ),
          ),
        ],
      ),
    );
  }