[Flutter]Card(カード)に画像(image)とテキスト(text)を設定するには？

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

Cardに画像とテキストを表示する方法を紹介します。

方法
使用例

方法

Cardに画像とテキストを表示するには、Containerを使います。

まず、Cardの引数「child」にContainerを指定します。

次に、Containerの引数「decoration」にBoxDecorationを指定し、BoxDecoraitionの引数「image」にDecorationImageを指定します。

DecorationImageの引数「image」にAssetImageもしくはNetworkImageを使って、画像を指定します。

Card(
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('Asset Path'),
      ),
    ),
  ),
),

最後に、Containerのchildに表示するテキストを設定します。

Card(
  child: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('Asset Path'),
      ),
    ),
    child: Text('テキスト'),
  ),
),

これでCardに画像とテキストを表示することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          child: Container(
            height: 300,
            width: 300,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('asset/images/frame.png'),
                fit: BoxFit.fill,
              ),
            ),
            child: Text(
              'Flutter',
              style: TextStyle(
                fontSize: 50,
              ),
            ),
            alignment: Alignment.center,
          ),
        ),
      ),
    );
  }