Functional specifications

  • Novice boot highlights mask layer
  • Picture progress bar

Directions for use

Import the packages:

import 'package:flutter_mask_view/flutter_mask_view.dart';
Copy the code

show height-light mask for newer:

 Scaffold(
      body: Stack(
        children: [
          //only display background for demo
          Image.asset(ImagesRes.BG_HOME),
          
          //config
          HeightLightMaskView(
            // Control size
            maskViewSize: Size(720.1080),
            // Mask color
            backgroundColor: Colors.blue.withOpacity(0.6),
            // Highlight area colors
            color: Colors.transparent,
            // Set the highlight area shape if width = height = radius is round, otherwise rectangle
            rRect: RRect.fromRectAndRadius(
              Rect.fromLTWH(100.100.50.50),
              Radius.circular(50(), () [(), ()Copy the code

more:

          HeightLightMaskView(
            maskViewSize: Size(720.1080),
            backgroundColor: Colors.blue.withOpacity(0.6),
            color: Colors.transparent,
            // Customize the shape of the mask area
            pathBuilder: (Size size) {
              returnPath() .. moveTo(100.100)
                ..lineTo(50.150)
                ..lineTo(150.150);
            },
            // Create a custom draw on the maskdrawAfter: (Canvas canvas, Size size) { Paint paint = Paint() .. color = Colors.red .. strokeWidth =15
                ..style = PaintingStyle.stroke;
              canvas.drawCircle(Offset(150.150), 50, paint);
            },
            // Whether to redraw, default return false, if animation is used, this returns true
            rePaintDelegate: (CustomPainter oldDelegate){
              return false; },)Copy the code

Display

create image progress bar:

      ImageProgressMaskView(
          size: Size(360.840),
          // Progress image
          backgroundRes: 'images/bg.png'.// Current progress
          progress: 0.5.// Mask shape, built-in two types of mask:
          / / rectangle cover layer: PathProviders sRecPathProvider
          / / water mask layer (configurable wave height and density) : PathProviders. CreateWaveProvider
          
          // Custom progress mask
          pathProvider: PathProviders.createWaveProvider(60.100),),)Copy the code

PathProviders.sRecPathProvider:

PathProviders.createWaveProvider:

Linkage with animation:

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(), () [(). },),),); }}Copy the code

Result:

case 1:

case 2: (png)

The warehouse address

PUB

Github