【Flutter】画像の右上に削除ボタンを配置する

完成図

const double size = 300;
const double padding = 20;

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            SizedBox(
              width: size,
              height: size,
              child: Stack(
                alignment: Alignment.topRight,
                children: [
                  Container(
                    //color: Colors.red[100],
                    child: Padding(
                      padding: const EdgeInsets.all(padding),
                      child: Image.network(
                        'https://www.apple.com/v/apple-events/home/n/images/november-2020/meta/og__fodnljjkwl6y.png?202011081645',
                        width: size,
                        height: size,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  CircleAvatar(
                    radius: padding,
                    backgroundColor: Colors.black,
                    child: IconButton(
                      icon: Icon(Icons.close),
                      onPressed: () {},
                      splashRadius: 0.1,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

方針

• Widget(画像と削除ボタン)を重ねる → Stack widget を使う
• 削除ボタンを右上に配置する → Stack.alignment = Alignment.topRight
• 削除ボタンを画像から少しはみ出たところに配置する → Paddingを駆使

レイアウト確認用コード

const double size = 300;
const double padding = 50;

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            SizedBox(
              width: size,
              height: size,
              child: Stack(
                alignment: Alignment.topRight,
                children: [
                  Container(
                    color: Colors.red[100],
                    child: Padding(
                      padding: const EdgeInsets.all(padding),
                      child: Image.network(
                        'https://www.apple.com/v/apple-events/home/n/images/november-2020/meta/og__fodnljjkwl6y.png?202011081645',
                        width: size,
                        height: size,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  CircleAvatar(
                    radius: padding,
                    backgroundColor: Colors.white.withOpacity(0.7),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

参考記事

Flutter: To put a circle image in a corner - Stack Overflow