Flutter 中的图像泄露

Question

我正在开始学习flutter，并且正在开发一个需要alertDialog 的项目。到目前为止，我已经成功做到了这一点，但是，按照构建的设计，我需要在此弹出窗口中放置泄漏的图像。你能帮我吗？

我在设计中包含了它的外观图像，因为我也分享了我的代码

showDialog(
                      barrierDismissible: false,
                      context: context,
                      builder: (context) {
                        return AlertDialog(
                          backgroundColor: const Color(0xFFFED701),
                          content: Container(
                            height: 400,
                            width: 300,
                            child: Stack(
                              children: [
                                Positioned(
                                  top: -100.0,
                                  left: 30.0,
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(
                                        20.0), // Borda arredondada
                                    child: Image.asset(
                                      'assets/images/higia_popup.png',
                                      height: 200.0,
                                      width: 200.0,
                                    ),
                                  ),
                                ),
                                const Positioned(
                                  top: 130,
                                  left: 0,
                                  right: 0,
                                  child: Text(
                                    'Parabéns!',
                                    style: TextStyle(
                                        fontSize: 24.0,
                                        fontWeight: FontWeight.bold),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                                const Positioned(
                                  top: 170,
                                  left: 0,
                                  right: 0,
                                  child: Text('Você concluiu seu cadastro!',
                                      style: TextStyle(
                                          fontSize: 16.0,
                                          fontWeight: FontWeight.bold),
                                      textAlign: TextAlign.center),
                                ),
                                const Positioned(
                                  top: 210,
                                  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: 270,
                                  left: 0,
                                  right: 0,
                                  child: Text(
                                      'Para prosseguir, clique no botão abaixo!',
                                      style: TextStyle(fontSize: 14.0),
                                      textAlign: TextAlign.justify),
                                ),
                                Positioned(
                                  top: 330,
                                  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,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    );

Answer 1

您可以使用

Stack

小部件来实现它，这是我为您制作的示例。

结果：

代码：

 showDialog(
              context: context,
              builder: (BuildContext context) {
                const avatarRadius = 30.0;
                return const Dialog(
                  child: Stack(
                    clipBehavior: Clip.none,
                    children: [
                      Positioned(
                        left: 0,
                        right: 0,
                        top: -avatarRadius,
                        child: CircleAvatar(
                          radius: avatarRadius,
                          backgroundColor: Colors.red,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(8.0),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            SizedBox(height: avatarRadius),
                            Padding(
                              padding: EdgeInsets.all(8.0),
                              child: Text('Title'),
                            ),
                            Padding(
                              padding: EdgeInsets.all(8.0),
                              child: Text('Description'),
                            ),
                            FlutterLogo(
                              size: 100,
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                );
              },
            );