How to add an image over top of the dialog in a Flutter?

Question

I am trying to design my dialog like in the picture below.

However, I can't seem to wrap my head around how to do it. Because I am new started in Flutter.

Below is my code:

showDialog(
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return Dialog(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0)), //this right here
        child: Wrap(
          children: [
            Container(
              child: Padding(
                padding: const EdgeInsets.only(
                  right: 16,
                  left: 16,
                  top: 32,
                  bottom: 16,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Lottie.asset(
                      "assets/animations/no_connection.json",
                      height: 180,
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    CustomText(
                      "description",
                      fontWeight: FontWeight.bold,
                      fontSize: 14,
                    ),
                    SizedBox(
                      height: 32,
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        SizedBox(
                          width: 120.0,
                          child: ElevatedButton(
                            style: ButtonStyle(
                              backgroundColor:
                              MaterialStateProperty.all(kOrange),
                            ),
                            onPressed: () async {
                              getData();
                              getVipStatus();
                              Navigator.of(context).pop();
                            },
                            child: FittedBox(
                              fit: BoxFit.fitWidth,
                              child: CustomText(
                                "try",
                                color: Colors.black,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      );
    });

I am a beginner in Flutter programming language, I used to work with Java. I put my code in the description section and I try to use the photo inside the frame, the photo will move to the top of the frame. I have shown an example of it in the description section.

@YeasinSheikh - Have you seen a sample code in this regard in the stack-overflow? — Amin, Oct 29 '22 at 10:24

score 2 · Accepted Answer · answered Oct 29 '22 at 10:28

2

You can follow this snippet

showDialog(
    context: context,
    builder: (context) {
      final size = MediaQuery.of(context).size;
      return Center(
        child: Dialog(
            backgroundColor: Colors.transparent, //must have
            elevation: 0,
            child: SizedBox(
              height: size.height * .6,
              child: Stack(
                children: [
                  Positioned(
                      top: (size.height * .2) / 2,
                      child: Container(
                        height: size.height * .5,
                        width: size.width * .9,
                        color: Colors.red,
                      )),
                  Align(
                    alignment: Alignment.topCenter,
                    child: Container(
                      height: size.height * .2,
                      width: size.height * .2,
                      decoration: ShapeDecoration(
                        shape: CircleBorder(),
                        color: Colors.yellow,
                      ),
                    ),
                  ),
                ],
              ),
            )),
      );
    },
  );

It will provide like below, play with the value

answered Oct 29 '22 at 10:28

Md. Yeasin Sheikh

54,221
7
29
56

how can set Border Radius on my shape , so I set it up on 'child: Dialog' but does not work – Amin Oct 29 '22 at 10:41
use `decoration:BoxDecoration with borderRadius – Md. Yeasin Sheikh Oct 29 '22 at 10:43
I can't use 'decoration' in 'Child' i must make a container but doesn't work – Amin Oct 29 '22 at 10:52
1

Replace last Container with `Align( alignment: Alignment.topCenter, child: Container( height: size.height * .2, width: size.height * .2, decoration: BoxDecoration( borderRadius: BorderRadius.circular(14), ), child: Text(""), ), ),` – Md. Yeasin Sheikh Oct 29 '22 at 10:55
- how can using expanded because not responsive on other phones – Amin Oct 29 '22 at 15:48
also when i want to make a little size top image doesn't work are you have any idea for this issue – Amin Oct 29 '22 at 16:30
play with `size` value, the ratio – Md. Yeasin Sheikh Oct 29 '22 at 16:44
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/249158/discussion-between-amin-and-yeasin-sheikh). – Amin Oct 29 '22 at 22:02

How to add an image over top of the dialog in a Flutter?

1 Answers1