Dart 颤振中的透明页面路由，用于显示（半透明）页面

有没有可能有一个透明背景的页面路由，这样我就可以在现有页面的顶部显示一个（半透明）的页面

---

是的，当然！一种解决方案是扩展

PageRoute

，并使

不透明

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

---

有关

PageRoute

和不同实现者的更多信息，请转到您也不需要重写任何类，只需使用：

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

---

你需要像这样用不透明度包装你的小部件

不透明度（不透明度：0.25，child:Container（child:Text（'hello world'））

对我来说效果很好！比被接受的答案容易得多这个答案应该标记为被接受，工作完美

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