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