flutter页面添加透明遮罩_flutter 遮罩层-优快云博客

本文链接：https://blog.youkuaiyun.com/androidhyf/article/details/131696797

该代码段展示了在Flutter中如何实现不同类型的路由跳转，包括常规路由、透明路由、替换路由、无返回路由以及自定义动画路由。同时，还包括了页面的关闭和管理方法，如pop和removeRoute。特别地，TransparentRoute和CirclePageRoute分别实现了透明遮罩效果和孔雀开屏动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
路由工具

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

透明遮罩页面显示

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