Flutter 蒙层控件

功能说明

• 新手引导高亮蒙层
• 图片进度条

使用说明

Import the packages:

import 'package:flutter_mask_view/flutter_mask_view.dart';
复制代码

show height-light mask for newer:

 Scaffold(
      body: Stack(
        children: [
          //only display background for demo
          Image.asset(ImagesRes.BG_HOME),
          
          //config
          HeightLightMaskView(
            //控件大小
            maskViewSize: Size(720, 1080),
            //蒙层颜色
            backgroundColor: Colors.blue.withOpacity(0.6),
            //高亮区域颜色
            color: Colors.transparent,
            //设置高亮区域形状，如果width = height = radius 为圆形，否则矩形
            rRect: RRect.fromRectAndRadius(
              Rect.fromLTWH(100, 100, 50, 50),
              Radius.circular(50),
            ),
          )
        ],
      ),
    )
复制代码

more:

          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);
            },
            //是否重绘，默认return false, 如果使用动画，此返回true
            rePaintDelegate: (CustomPainter oldDelegate){
              return false;
            },
          )
复制代码

Display

create image progress bar:

      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 _MaskTestAppState extends State<MaskTestApp>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @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: ImagesRes.IMG,
                  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,
                  ),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}
复制代码

Result:

case 1:

case 2: (png)

仓库地址

PUB

Github