showModal<T> function

Future<T?> showModal<T>(BuildContext context, WidgetBuilder builder, { bool barrierDismissible = true, bool useRootNavigator = true, })

Displays a modal dialog centred on screen with a fade + scale transition.

Returns the value passed to Navigator.pop, or null if dismissed.

Implementation

Future<T?> showModal<T>(
  BuildContext context,
  WidgetBuilder builder, {
  bool barrierDismissible = true,
  bool useRootNavigator = true,
}) {
  final themeData = Theme.of(context);
  return showGeneralDialog<T>(
    context: context,
    barrierColor: const Color.fromRGBO(11, 13, 18, 0.45),
    barrierDismissible: barrierDismissible,
    barrierLabel: 'Dismiss',
    transitionDuration: const Duration(milliseconds: 300),
    useRootNavigator: useRootNavigator,
    transitionBuilder: (_, animation, _, child) {
      final curved = CurvedAnimation(
        parent: animation,
        curve: const Cubic(0.2, 0, 0, 1),
        reverseCurve: const Cubic(0.4, 0, 1, 1),
      );
      return FadeTransition(
        opacity: curved,
        child: ScaleTransition(
          scale: Tween<double>(begin: 0.95, end: 1).animate(curved),
          child: child,
        ),
      );
    },
    pageBuilder:
        (context, _, _) => Theme(
          data: themeData,
          child: SafeArea(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(Spacing.s4),
                child: builder(context),
              ),
            ),
          ),
        ),
  );
}