Flutter开发求助：如何在AlertDialog中实现溢出图片效果

你当前的代码已经用Stack和Positioned尝试放置溢出图片，但AlertDialog默认会裁剪超出边界的内容，导致图片无法正常溢出显示。以下是修改后的代码，解决这个问题：

showDialog(
  barrierDismissible: false,
  context: context,
  builder: (context) {
    return AlertDialog(
      backgroundColor: const Color(0xFFFED701),
      // 关闭裁剪，允许内容溢出弹窗边界
      clipBehavior: Clip.none,
      // 调整content内边距，给顶部溢出的图片留出显示空间
      contentPadding: const EdgeInsets.only(top: 100, left: 16, right: 16, bottom: 16),
      content: Container(
        height: 400,
        width: 300,
        child: Stack(
          children: [
            Positioned(
              top: -100.0,
              left: 30.0,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20.0),
                child: Image.asset(
                  'assets/images/higia_popup.png',
                  height: 200.0,
                  width: 200.0,
                ),
              ),
            ),
            const Positioned(
              top: 30,
              left: 0,
              right: 0,
              child: Text(
                'Parabéns!',
                style: TextStyle(
                    fontSize: 24.0,
                    fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
            ),
            const Positioned(
              top: 70,
              left: 0,
              right: 0,
              child: Text('Você concluiu seu cadastro!',
                  style: TextStyle(
                      fontSize: 16.0,
                      fontWeight: FontWeight.bold),
                  textAlign: TextAlign.center),
            ),
            const Positioned(
              top: 110,
              left: 0,
              right: 0,
              child: Text(
                  'Meu nome é Hígia, e serei sua assistente virtual de triagem!',
                  style: TextStyle(fontSize: 14.0),
                  textAlign: TextAlign.justify),
            ),
            const Positioned(
              top: 170,
              left: 0,
              right: 0,
              child: Text(
                  'Para prosseguir, clique no botão abaixo!',
                  style: TextStyle(fontSize: 14.0),
                  textAlign: TextAlign.justify),
            ),
            Positioned(
              top: 230,
              left: 0,
              right: 0,
              child: Center(
                child: ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/home');
                  },
                  style: ElevatedButton.styleFrom(
                    shape: RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.circular(6.0),
                    ),
                    backgroundColor: const Color.fromRGBO(
                        58, 148, 209, 1.0),
                    padding: const EdgeInsets.symmetric(
                        vertical: 5.0, horizontal: 10.0),
                  ),
                  child: const SizedBox(
                    width: 348,
                    height: 28,
                    child: Text(
                      'Ir para Home',
                      style: TextStyle(
                          fontSize: 20,
                          color: Colors.white),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  },
);

关键改动说明： #

1. clipBehavior: Clip.none：AlertDialog默认使用Clip.hardEdge裁剪超出边界的内容，设置为Clip.none后，图片就能突破弹窗边界显示。
2. 调整contentPadding：增加顶部内边距，避免溢出的图片遮挡弹窗内的文字内容，同时保证弹窗内部布局的合理性。
3. 修改Positioned组件的top值：由于content顶部内边距增加了100，所有文字和按钮的top位置需要对应减少，确保它们在弹窗内的布局位置正确。

内容的提问来源于stack exchange，提问作者Caio Cunha