やたら時間をかけて悩んでしまったので備忘録。

やりたいこと

画像の上に、指定されたpaddingに合わせて画像を重ねたい。。

試したこと

Stackを使えばちょろい

重ねる＝Stack使えばすぐ実現すると思ってた。
こんな感じで実装。

Stack(
   fit: StackFit.passthrough,
   children: [
      Image.asset('背景になる画像', fit: BoxFit.fill),
      Padding(
         padding: const EdgeInsets.all(10),//指定されたpadding
         child: Row(
            children: [
               Image.asset(
                   '重ねる画像',
                    fit: BoxFit.fill,
               ),
               Text('hoge')
            ]),
          ),
   ],
),

問題点

端末に合わせて背景になる画像の大きさが変わったとき、paddingの大きさも変わってしまう。
親ウィジェットの大きさを取得することができるLayoutBuilderを使えば解決する？

結論：DecorationImageを使用する

Container(
    padding:const EdgeInsets.all(5.0),//指定されたpadding
    decoration: BoxDecoration(
        image:DecorationImage(
            image:AssetImage('背景になる画像'),
            fit:BoxFit.fill,
        )
   ),
   child: Row(
        mainAxisSize:MainAxisSize.min,
        children: [
            Image.asset(
                '重ねる画像',
                fit: BoxFit.fill,
            ),
            Text('hoge')
       ],
   ),
)

指定されたpaddingで実装しても縦幅が自動的に変化した。

まとめ

調べてみたらいろんなサイトでDecorationImageについて紹介していた（調べ方が悪くなかなか辿り着けなかった）。
Containerってなんでもできて(?)すごい。。