如何在 Flutter 中使用具有不同 Position 和 showDialog 的堆栈中的多个小部件

Question

I have a popup to refer a friend in my app, in this popup i am using image.

Image as Below.

So in this image bottom have tap to refer and T&C Apply, so i have to set the button on both TAP TO REFER and * T&C Apply So how i can do this.

I have already set the close button on top right corner.

Below is my Popup Code.

Future<bool> referCard() async {
    return await showDialog(
            context: context,
            builder: (context) => Center(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Stack(
                      children: [
                        Image.asset(
                          "assets/images/ref_card.jpg",
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Material(
                              color: Colors.transparent,
                              child: IconButton(
                                icon: Icon(
                                  Icons.close,
                                  color: Colors.grey,
                                ),
                                onPressed: () {
                                  Navigator.pop(context);
                                },
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                )) ??
        false;
  }

Please Help Me. Thank You.

Answer 1

So this is what I achieved based on how I understood your question.

Note: Wrap your parent widget with Material and I also cropped your image to obtain your illustration image

Also I user a black container color as the background:see the comment

 showDialog(
                            context: context,
                            builder: (context) => Center(
                              child: Material(
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Stack(
                                    children: [
                                      Container(color: Colors.black,),///black container as background
                                      Padding(
                                        padding: const EdgeInsets.symmetric(horizontal: 12.0),
                                        child: Column(
                                          children: [

                                            Row(
                                              mainAxisAlignment: MainAxisAlignment.end,
                                              children: [
                                                Material(
                                                  color: Colors.transparent,
                                                  child: IconButton(
                                                    icon: Icon(
                                                      Icons.close,
                                                      color: Colors.grey,
                                                    ),
                                                    onPressed: () {
                                                      Navigator.pop(context);
                                                    },
                                                  ),
                                                )
                                              ],
                                            ),

                                            Center(
                                              child: Image.asset("assets/v.jpg"),
                                            ),

                                            const Center(

                                                child: Text(

                                                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit", style: TextStyle(color: Colors.white, fontSize: 28.0),textAlign: TextAlign.center,)),

                                            const SizedBox(
                                              height: 10.0,
                                            ),
                                             Center(
                                               child: Container(
                                                 height: 50,
                                                 width: 160,
                                                 decoration: BoxDecoration(
                                                   color: Colors.green,
                                                    borderRadius: BorderRadius.circular(8.0)
                                                 ),
                                                 child: const Center(child: Text("Tap to Refer", style: TextStyle(color: Colors.black, fontSize: 28),)),
                                               ),
                                             ),

                                            SizedBox(height: 10.0,),
                                            Center(child: Text("*T&C Apply", style: TextStyle(color: Colors.white, fontSize: 28),)),

                                          ],
                                        ),
                                      )
                                    ],
                                  ),
                                ),
                              ),
                            ))

Here is the appearance

Answer 2

    Container(
height:400,//use your height and width
width:300
          alignment: Alignment.bottomCenter,
          decoration: BoxDecoration(
              image: DecorationImage(
                  fit: BoxFit.cover,
                  image: AssetImage('assets/images/ref_card'))),
          child: Padding(
            padding: const EdgeInsets.only(bottom: 20),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton(onPressed: () {}, child: Text('TO REFER')),
                TextButton(onPressed: () {}, child: Text('*T&C Apply')),
              ],
            ),
          ),
        );