[Flutter]バナーを作る

※すみません走り書きです。

以下のような要件のバナーを実装します。

• 画像のアスペクト比が不定な画像を背景にする
• バナー自体は画面幅に合わせる

実装方法

• Cardを使って角丸を表現
• IntrinsicHeightを使ってStack内のchildrenの高さを揃える
• StackでMaterial(type=.transparency)を重ねて、タッチエフェクトを表示

Widget banner(
  ImageProvider image, {
  required VoidCallback onTap,
}) {
  // Cardで囲ってバナーっぽい角丸にします
  return Card(
    // IntrinsicHeightで囲むことで、Stackの中のchildrenの高さに合わせたWidgetを構築
    child: IntrinsicHeight(
      child: Stack(
        children: [
          SizedBox(
            width: double.infinity,
            child: Image(image: image, fit: BoxFit.cover),
          )
          // タッチエフェクトを表示するためにMaterialを重ねます
          Material(
            type: MaterialType.transparency,
            child: InkWell(onTap: onClick),
          ),
        ],
      ),
    ),
  );
}