How to avoid the default page transition animation when using Navigator.pop?

[l-7-l]

Thank you friend, I set pageTransition in the global theme, but it will also be affected when using Navigator.pop(context) to close the modall sheet. How to prevent the modall sheet from using page transition?

Screen_recording_20240329_162144.webm

go router config:

part of "../router.dart";

//
@TypedShellRoute<ShippingShellRoutes>(
  routes: [
    AddShippingAddressRoute.route,
    EditShippingAddressRoute.route,
    ShippingAddressesRoute.route,
    SelectRegionRoute.route
  ],
)
@immutable
class ShippingShellRoutes extends ShellRouteData {
  static final List<NavigatorObserver> $observers = [_sheetTransitionObserver];

  static const String $restorationScopeId = 'shippingShell';

  @override
  Page<void> pageBuilder(
    BuildContext context,
    GoRouterState state,
    Widget navigator,
  ) {
    return ModalSheetPage(
      key: state.pageKey,
      child: _SheetShell(
        transitionObserver: _sheetTransitionObserver,
        navigator: navigator,
      ),
    );
  }
}

@immutable
class AddShippingAddressRoute extends GoRouteData {
  const AddShippingAddressRoute();

  static const route = TypedGoRoute<AddShippingAddressRoute>(
    path: "/shipping-addresses/new",
    name: 'AddShippingAddress',
  );

  @override
  Page<void> buildPage(BuildContext context, GoRouterState state) {
    return ScrollableNavigationSheetPage(
      key: state.pageKey,
      physics: const StretchingSheetPhysics(parent: SnappingSheetPhysics()),
      child: const ShippingAddressEditorPage(),
    );
  }
}

@immutable
class EditShippingAddressRoute extends GoRouteData {
  const EditShippingAddressRoute({required this.id});

  final Id id;

  static const route = TypedGoRoute<EditShippingAddressRoute>(
    path: "/shipping-addresses/:id",
    name: 'EditShippingAddress',
  );

  @override
  Widget build(BuildContext context, GoRouterState state) {
    return ShippingAddressEditorPage(id: id);
  }
}

@immutable
class ShippingAddressesRoute extends GoRouteData {
  const ShippingAddressesRoute();

  static const route = TypedGoRoute<ShippingAddressesRoute>(
    path: '/shipping-addresses',
    name: 'ShippingAddresses',
  );

  @override
  Page<void> buildPage(BuildContext context, GoRouterState state) {
    return DraggableNavigationSheetPage(
      key: state.pageKey,
      child: const ShippingAddressesPage(),
    );
  }
}

@immutable
class SelectRegionRoute extends GoRouteData {
  const SelectRegionRoute();

  static const route = TypedGoRoute<SelectRegionRoute>(
    path: '/select-region',
    name: 'SelectRegion',
  );

  @override
  Page<void> buildPage(BuildContext context, GoRouterState state) {
    return DraggableNavigationSheetPage(
      key: state.pageKey,
      physics: const ClampingSheetPhysics(parent: SnappingSheetPhysics()),
      child: const SelectRegionPage(),
    );
  }
}

class _SheetShell extends StatelessWidget {
  const _SheetShell({
    required this.transitionObserver,
    required this.navigator,
  });

  final NavigationSheetTransitionObserver transitionObserver;
  final Widget navigator;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: SheetDismissible(
        child: NavigationSheet(
          transitionObserver: transitionObserver,
          keyboardDismissBehavior:
              const SheetKeyboardDismissBehavior.onDragDown(
            isContentScrollAware: true,
          ),
          child: Material(
            color: Theme.of(context).colorScheme.surface,
            borderRadius: Round.md,
            clipBehavior: Clip.antiAlias,
            child: navigator,
          ),
        ),
      ),
    );
  }
}

[fujidaiti]

It seems like in the video, the sheet closed with the regular transition animation the first time, but a different animation was used the second time. Did you close the sheet in a different way the first time and the second time?

[l-7-l]

Thanks Reply.
The first time is to click on the mask or drag down, and the second time is to click on the X icon, which will trigger Navigator.pop(context);

[fujidaiti]

I think that Navigator.of(context, rootNavigator:true).pop() could solve the problem.

[l-7-l]

Thank you and wish you a good day