How to implement a Custom dialog box in flutter?

In Flutter, there are several ways to display a custom dialog box. One of the most common ways is by using the `Dialog` class which is a parent class to `AlertDialog` class. The `Dialog` widget has an argument called “shape” which can be used to shape the edges of the dialog box.

Using Dialog Class

The following code sample demonstrates how to create a custom dialog box using the `Dialog` class:

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: [
        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);

Using showGeneralDialog method

The following code sample demonstrates how to create a custom dialog box using the `showGeneralDialog` 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 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,
        ),
      );
    },
  );
}

Explanation

The `showGeneralDialog` method is a more flexible way to display a custom dialog box. It allows you to specify the barrier label, whether the dialog can be dismissed by tapping outside of it, the transition duration and animation for showing and hiding the dialog.

The page builder callback returns the actual widget that will be shown in the dialog. In this case, we’re using a `Center` widget with a `Container` child that has a fixed height and width. The container also has a margin to give it some space around it.

Finally, the transition builder callback is used to create an animation for showing and hiding the dialog. In this case, we’re using a `SlideTransition` to slide in the widget from either side of the screen.

Conclusion

In conclusion, implementing a custom dialog box in Flutter can be achieved using the `Dialog` class or the `showGeneralDialog` method. The latter provides more flexibility and is suitable for creating more complex dialogs with animations and transitions.