Flutter中的透明页面路由,用于显示(半)透明页面

时间:2019-02-07 11:16:44

标签: dart flutter flutter-layout

是否可以使用具有透明背景的页面路由,以便我可以在现有页面的顶部显示(半)透明页面?

semi-transparent screen transition

3 个答案:

答案 0 :(得分:27)

您也不需要覆盖任何类,只需使用:

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

答案 1 :(得分:2)

是的,绝对可以!一种解决方案是扩展PageRoute并使opaque getter返回false。可能的解决方案如下所示:

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,
      ),
    );
  }
}

请记住,这还将创建自定义过渡动画,并且其行为与更复杂的MaterialPageRoute不同(例如,向后滑动手势不适用于iOS上的当前实现)。

您可以这样使用它:

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

有关PageRoute和其他实施者的更多信息,请转到https://docs.flutter.io/flutter/widgets/PageRoute-class.html

答案 2 :(得分:0)

您需要使用Opacity( opacity: 0.25, child: Container(child:Text('hello world')) )

这样的不透明性来包装小部件