flutter alertdialog with background image

Issue

Folloing is my alert dialog box code, i need to set an background image for the alert dialog instead of blue color, need to show a design

AlertDialog(
                  backgroundColor: Colors.blue,
                  titlePadding: EdgeInsets.all(0),
                  contentPadding: EdgeInsets.all(0),
                  title: Container(
                    decoration: BoxDecoration(
                        color: profile_edit_toolbar_color,
                        borderRadius: BorderRadius.all(Radius.circular(8))),
                    width: MediaQuery.of(context).size.width * 0.7,
                    height: MediaQuery.of(context).size.height * 0.5,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Padding(
                              padding: const EdgeInsets.all(18),
                              child: Text(
                                'Select countries to show',
                                style: TextStyle(
                                    color: Colors.yellow[300],
                                    fontSize: 20,
                                    fontFamily: fontFamily_3),
                                // style: CustomStyle.balooCustom(20, Colors.white)
                              ),
                            ),
                            IconButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                                icon: Icon(
                                  Icons.close,
                                  size: 25,
                                  color: Colors.white,
                                )),
                          ],
                        ),
                        Row(
                          children: [
                            Expanded(
                                child: Container(
                              height: 120,
                              child: DisplayCountriesForm(
                                countriesList: eventResponse.countriesList,
                                num: 0,
                                displayCountries: displayCountries,
                                onValueChanged: (updatedList) {
                                },
                              ),
                            )),
                            Expanded(
                                child: Container(
                              height: 120,
                              child: DisplayCountriesForm(
                                countriesList: eventResponse.countriesList,
                                num: 1,
                                displayCountries: displayCountries,
                                onValueChanged: (updatedList) {
                                },
                              ),
                            )),
                            Expanded(
                                child: Container(
                              height: 120,
                              child: DisplayCountriesForm(
                                countriesList: eventResponse.countriesList,
                                num: 2,
                                displayCountries: displayCountries,
                                onValueChanged: (updatedList) {
                                },
                              ),
                            )),
                          ],
                        ),
                      ],
                    ),
                  ),
                );

Solution

Try below code I have add background image of the alert dialog hope your problem is solved , Use your widget also and change background image on your need

     TextButton(
              child: Text('Pressed Me'),
              onPressed: () => showDialog(
                context: context,
                builder: (context) => AlertDialog(
                  content: Stack(
                    alignment: Alignment.center,
                    children: <Widget>[
                      Image.network(
                        'https://www.kindpng.com/picc/m/355-3557482_flutter-logo-png-transparent-png.png',
                      ),
                      Text(
                        'Add Your Text Here',
                        style: TextStyle(
                          fontSize: 24,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ), 

Your Result Screen-> enter image description here

Answered By – Ravindra S. Patil

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *