Flutter遮罩视图插件flutter_mask_view的使用

flutter_mask_view 是一个用于在Flutter应用中显示遮罩视图的插件。它可以用来创建引导新用户的功能，或者显示带有进度条的图像。

特性

• 为新用户显示高亮遮罩。
• 创建图像进度条。

使用方法

导入包

首先需要导入 flutter_mask_view 包：

import 'package:flutter_mask_view/flutter_mask_view.dart';

显示高亮遮罩

下面是一个简单的示例，展示了如何为新用户显示高亮遮罩：

Scaffold(
  body: Stack(
    children: [
      // 仅用于演示背景
      Image.asset('path_to_your_image'), 
      
      // 配置
      HeightLightMaskView(
        // 设置视图大小
        maskViewSize: Size(720, 1080),
        // 设置遮罩颜色
        backgroundColor: Colors.blue.withOpacity(0.6),
        // 设置高亮颜色
        color: Colors.transparent,
        // 设置高亮形状
        rRect: RRect.fromRectAndRadius(
          Rect.fromLTWH(100, 100, 50, 50),
          Radius.circular(50),
        ),
      )
    ],
  ),
)

更多自定义选项：

HeightLightMaskView(
  maskViewSize: Size(720, 1080),
  backgroundColor: Colors.blue.withOpacity(0.6),
  color: Colors.transparent,
  // 自定义高亮形状
  pathBuilder: (Size size) {
    return Path()
      ..moveTo(100, 100)
      ..lineTo(50, 150)
      ..lineTo(150, 150);
  },
  // 在高亮视图上绘制内容
  drawAfter: (Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = Colors.red
      ..strokeWidth = 15
      ..style = PaintingStyle.stroke;
    canvas.drawCircle(Offset(150, 150), 50, paint);
  },
  // 是否重绘，默认返回false
  rePaintDelegate: (CustomPainter oldDelegate){
    return false;
  },
)

创建图像进度条

下面是一个创建图像进度条的例子：

ImageProgressMaskView(
  size: Size(360, 840),
  // 背景图片路径
  backgroundRes: 'images/bg.png',
  // 当前进度
  progress: 0.5,
  // 遮罩形状，内置：
  // PathProviders.sRecPathProvider：波浪进度条
  // PathProviders.createWaveProvider：矩形裁剪进度条
  
  // 可以创建更多形状
  pathProvider: PathProviders.createWaveProvider(60, 100),
)

内置形状示例

• 使用 PathProviders.sRecPathProvider 的效果：

• 使用 PathProviders.createWaveProvider 的效果：

动画示例

以下代码展示了如何结合动画控制器来动态更新进度条：

class MaskTestApp extends StatefulWidget {
  [@override](/user/override)
  _MaskTestAppState createState() => _MaskTestAppState();
}

class _MaskTestAppState extends State<MaskTestApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  [@override](/user/override)
  void initState() {
    _controller = AnimationController(duration: Duration(seconds: 5), vsync: this);
    _controller.forward();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (context, child) {
            return Stack(
              alignment: Alignment.center,
              children: [
                ImageProgressMaskView(
                  size: Size(300, 300),
                  backgroundRes: 'images/image.png',
                  progress: _controller.value,
                  pathProvider: PathProviders.createWaveProvider(60, 40),
                  rePaintDelegate: (_) => true,
                ),
                Text(
                  '${(_controller.value * 100).toInt()} %',
                  style: TextStyle(
                    color: Colors.red,
                    fontWeight: FontWeight.bold,
                    fontSize: 30,
                  ),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}