How to implement a Custom dialog box in flutter?

Question

I'm new to flutter and need to create a gallery app that needs a custom dialog box to show the selected image. How can I implement that?

Answer 1

Use Dialog class which is a parent class to AlertDialog class in Flutter. Dialog widget has a argument , "shape" which you can use to shape the Edges of the Dialog box.

Here is a code sample:

 Dialog errorDialog = Dialog(   shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), //this right here   child: Container(     height: 300.0,     width: 300.0,         child: Column(       mainAxisAlignment: MainAxisAlignment.center,       children: <Widget>[         Padding(           padding:  EdgeInsets.all(15.0),           child: Text('Cool', style: TextStyle(color: Colors.red),),         ),         Padding(           padding: EdgeInsets.all(15.0),           child: Text('Awesome', style: TextStyle(color: Colors.red),),         ),         Padding(padding: EdgeInsets.only(top: 50.0)),         TextButton(onPressed: () {           Navigator.of(context).pop();         },             child: Text('Got It!', style: TextStyle(color: Colors.purple, fontSize: 18.0),))       ],     ),   ), ); showDialog(context: context, builder: (BuildContext context) => errorDialog);} 

Answer 2

Screenshot (Null Safe):

---

Code:

Just call this method:

void showCustomDialog(BuildContext context) {   showGeneralDialog(     context: context,     barrierLabel: "Barrier",     barrierDismissible: true,     barrierColor: Colors.black.withOpacity(0.5),     transitionDuration: Duration(milliseconds: 700),     pageBuilder: (_, __, ___) {       return Center(         child: Container(           height: 240,           child: SizedBox.expand(child: FlutterLogo()),           margin: EdgeInsets.symmetric(horizontal: 20),           decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(40)),         ),       );     },     transitionBuilder: (_, anim, __, child) {       Tween<Offset> tween;       if (anim.status == AnimationStatus.reverse) {         tween = Tween(begin: Offset(-1, 0), end: Offset.zero);       } else {         tween = Tween(begin: Offset(1, 0), end: Offset.zero);       }          return SlideTransition(         position: tween.animate(anim),         child: FadeTransition(           opacity: anim,           child: child,         ),       );     },   ); }