Search code examples
flutterbackground-imageflutter-alertdialog

flutter alertdialog with background image


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