Transparent PageRoute in Flutter for displaying a (semi-) transparent page

Question

Would it be possible to have a page route with a transparent background so I can show a (semi-)transparent page on top of an existing page?

Answer 1

You also don't need to override any class, simply use:

Navigator.of(context).push(   PageRouteBuilder(     opaque: false, // set to false     pageBuilder: (_, __, ___) => Page2(),   ), ); 

Answer 2

Yes, definitely! One solution would be to extend PageRoute and make the opaque getter return false. A possible solution could look like the following:

import 'package:flutter/widgets.dart';  class TransparentRoute extends PageRoute<void> {   TransparentRoute({     @required this.builder,     RouteSettings settings,   })  : assert(builder != null),         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 => 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,       ),     );   } } 

Keep in mind that this would also create a custom transition animation and behave differently than the more complex MaterialPageRoute (e.g. the swipe-back gesture would not work with the current implementation on iOS).

You could use it like this:

Navigator.of(context).push(     TransparentRoute(builder: (BuildContext context) => YourSecondPage()) ); 

For more info on the PageRoute and the different implementers, head over to https://docs.flutter.io/flutter/widgets/PageRoute-class.html