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