Question 108564 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to push a screen and keep the previous one visible?

I am trying to push a MaterialPageRoute using Navigator.of(context).push(...);. The widget being pushed is just a Scaffold with a transparent color as its backgroundColor. However, when the screen is pushed, the transparent color is ignored and the previous screen remains invisible. How can this be fixed?

By the way, the only reason I am using Navigator.of(context).push(...); instead of showDialog(...); is because of bias towards the transition effect when pushing using Navigator.of(context).push(...);

Tags:

2

Answers


  1. 0

    You can try using PageRouteBuilder instead of MaterialPageRoute:

    Navigator.of(context).push(
  PageRouteBuilder(
    opaque: false,
    pageBuilder: (context, animation1, animation2) => NextScreen(),
  ),
);

    It also supports transitions.

    Login or Signup to reply.
  2. 0

    There are different ways to push a transparent route.

    Option 1

    Navigator.of(context).push(
      PageRouteBuilder(
        opaque: false,
        pageBuilder: (BuildContext context, _, __) => const Scaffold(),
      ),
    );

    Option 2

    • Create a Transparent route that extends PageRoute
    
    class TransparentRoute extends PageRoute<void> {
      TransparentRoute({
        required this.builder,
        RouteSettings? settings,
      }) : super(settings: settings, fullscreenDialog: false);
    
      final WidgetBuilder builder;
    
      @override
      bool get opaque => false;
    
      @override
      Color? get barrierColor => null;
    
      @override
      String? get barrierLabel => null;
    
      @override
      bool get maintainState => true;
    
      @override
      Duration get transitionDuration => const Duration(milliseconds: 350);
    
      @override
      Widget buildPage(BuildContext context, Animation<double> animation,
          Animation<double> secondaryAnimation) {
        final result = builder(context);
        return FadeTransition(
          opacity: Tween<double>(begin: 0, end: 1).animate(animation),
          child: Semantics(
            scopesRoute: true,
            explicitChildNodes: true,
            child: result,
          ),
        );
      }
    }
    • Instead of MaterialPageRoute, do a TransitionRoute
    Navigator.of(context).push(
                TransparentRoute(
                  builder: (BuildContext context) => Scaffold(
    backgroundColor: Color(0XFF141010).withOpacity(0.5)
      ),
   ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search