showRoundedModalBottomSheet<T> function

Future<T?> showRoundedModalBottomSheet<T>({
  1. required BuildContext context,
  2. required WidgetBuilder builder,
  3. Color color = Colors.white,
  4. double radius = 10.0,
  5. bool autoResize = false,
  6. bool dismissOnTap = false,
  7. double? topInset,
  8. bool rootNavigator = false,
})

Below is the usage for this function, you'll only have to import this file radius takes a double and will be the radius to the rounded corners of this modal color will color the modal itself, the default being Colors.white builder takes the content of the modal, if you're using Column or a similar widget, remember to set mainAxisSize: MainAxisSize.min so it will only take the needed space.

This newer version also fixes the issue of keyboard overlap based on this gist.

showRoundedModalBottomSheet(
   context: context,
   radius: 10.0,  // This is the default
   color: Colors.white,  // Also default
   builder: (context) => ???,
);

Implementation

Future<T?> showRoundedModalBottomSheet<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  Color color = Colors.white,
  double radius = 10.0,
  bool autoResize = false,
  bool dismissOnTap = false,
  double? topInset,
  bool rootNavigator = false,
}) {
  assert(context != null);
  assert(builder != null);
  assert(radius != null && radius > 0.0);
  assert(color != null && color != Colors.transparent);
  return Navigator.of(context, rootNavigator: rootNavigator).push<T>(
    RoundedCornerModalRoute<T>(
      builder: builder,
      color: color,
      radius: radius,
      autoResize: autoResize,
      dismissOnTap: dismissOnTap,
      topInset: topInset ?? MediaQuery.of(context).padding.top,
      barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
    ),
  );
}