[Flutter]ContainerのBoxDecorationで画像(image)を設定するには？

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

Containerのdecorationで画像を設定する方法を紹介します。

方法

ContainerのBoxDecorationで画像を設定するには、引数「image」と「DecortionImage」を使います。

まず、DecorationImageをBoxDecorationの引数「image」に指定します。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(),
  ),
),

そして、DecorationImageの引数「image」に、NetworkImageやAssetImageなどを指定します。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('image_path'),
    ),
  ),
),

これでBoxDecorationで画像を設定できます。

ポイントとしては、1度DecorationImageを指定する点です。

BoxDecorationの引数「image」に、NetworkImageやAssetImageを直接指定できないので、注意してください。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: NetworkImage(
                'https://cdn.pixabay.com/photo/2018/05/11/08/11/pet-3389729__480.jpg',
              ),
            ),
          ),
          width: 300,
          height: 300,
        ),
      ),
    );
  }