flutter页面添加透明遮罩-Toy模板网

这篇具有很好参考价值的文章主要介绍了flutter页面添加透明遮罩。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

flutter页面添加透明遮罩,flutter
路由工具

import 'package:test/main.dart';
import 'package:flutter/material.dart';

import 'circle_page_route.dart';

class NavigatorUtil {
  static push(Widget page, {BuildContext context}) {
    return Navigator.push(context ?? navigatorKey.currentContext,
        MaterialPageRoute(builder: (context) => page));
  }

  /// 透明页面
  static pushTransparentRoute(Widget page, {BuildContext context}) {
    return Navigator.push(context ?? navigatorKey.currentContext,
        TransparentRoute(builder: (context) => page));
  }

  /// 透明关闭页面
  static pushTransparentReplacement(Widget page, {BuildContext context}) {
    return Navigator.pushReplacement(context ?? navigatorKey.currentContext,
        TransparentRoute(builder: (context) => page));
  }

  /// 关闭所有页面
  static pushReplacement(
    Widget page, {
    BuildContext context,
  }) {
    Navigator.pushReplacement(context ?? navigatorKey.currentContext,
        MaterialPageRoute(builder: (context) => page));
  }

  /// 跳转并且无法返回到上一页
  static pushAndNoBack(Widget page, {BuildContext context}) {
    return Navigator.pushAndRemoveUntil(
        context ?? navigatorKey.currentContext,
        MaterialPageRoute(builder: (context) => page),
        (route) => route == null);
  }

  /// 返回上一页
  static pop<T extends Object>({BuildContext context, T value}) {
    Navigator.pop(
        context == null ? navigatorKey.currentContext : context, value);
  }

  /// 删除指定路由
  static removeRoute(Widget page, {BuildContext context}) {
    return Navigator.removeRoute(context ?? navigatorKey.currentContext,
        MaterialPageRoute(builder: (context) => page));
  }
}

路由

//透明路由
class TransparentRoute extends PageRoute<void> {

  TransparentRoute({
    @required this.builder,
  });

  final WidgetBuilder builder;

  @override
  Duration get transitionDuration => Duration(milliseconds: 100);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.white.withOpacity(0.1);

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return Container(
      child: builder(context),
    );
  }
}

// 孔雀开屏动画效果路由
class CirclePageRoute extends PageRoute {
  CirclePageRoute({
    @required this.builder,
  });

  final WidgetBuilder builder;

  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.white.withOpacity(0.1);

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return Container(
      child: builder(context),
    );
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return ClipPath(
          clipper: CirclePath(animation.value),
          child: child,
        );
      },
      child: builder(context),
    );
  }
}

透明遮罩页面显示文章来源地址https://www.toymoban.com/news/detail-561218.html

//在需要遮罩的页面的initState()函数中使用
@override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
     NavigatorUtil.pushTransparentRoute(PushArticleGuidePage(
          itemType: 1,
        ));
    });
  }