Position Modal (topCenter, bottomCenter)?

[André Pinto]

Please Help!

Expected behavior
I'm using the Modal and I want to position it on the topCenter or bottomCenter and it always does center of screen.

Is it possible? (see image)

Or having the background non-clickable so I can still make it the screen height and be able to click on the backdrop to dismiss.

Thanks in advance

[Cagatay Ulusoy]

Thanks for your feedback. It is not possible now, but it will be possible. It is on the roadmap.

[André Pinto]

Thanks for the update! Cheers

[Cagatay Ulusoy]

@aPinix I have started to working on customizing the modal layout and positioning. The next release will be all about modal type customization, including bottomsheet, dialog and side sheets.

[Cagatay Ulusoy]

@aPinix

This is a sneak peek for the next update.

Introducing a new custom modal will be like this:

class TopNotificationModalSheet extends WoltModalType {
  const TopNotificationModalSheet()
      : super(
          shapeBorder: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(24)),
          ),
          isDragEnabled: false,
          shouldForceContentToMaxHeight: false,
        );

  @override
  String routeLabel(BuildContext context) {
    final MaterialLocalizations localizations = MaterialLocalizations.of(context);
    return localizations.dialogLabel;
  }

  @override
  BoxConstraints modalContentBoxConstraints(Size availableSize) {
    return BoxConstraints(
      minWidth: availableSize.width - 64,
      maxWidth: availableSize.width - 64,
      minHeight: 0,
      maxHeight: availableSize.height * 0.6,
    );
  }

  @override
  Offset modalContentOffset(Size availableSize, Size modalContentSize) {
    return const Offset(32, 48);
  }

  @override
  Widget buildTransitions(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
      ) {
    // Combined slide and fade transition.
    return FadeTransition(
      opacity: animation,
      child: SlideTransition(
        position: animation.drive(
          Tween(
            begin: const Offset(0.0, -0.1),  // Modified to start slightly above the screen
            end: Offset.zero,
          ).chain(CurveTween(curve: Curves.easeOutQuad)),  // Smoother curve for easing out
        ),
        child: child,
      ),
    );
  }
}

custom_modal.mov

[Cagatay Ulusoy]

Fixed in #235