Flutter中间镂空的二维码扫描控件

1、UI效果图:

2、中间镂空UI:

复制代码
class CenterTransparentMask extends CustomClipper<Path> {
  final double? width;

  CenterTransparentMask({this.width});

  @override
  Path getClip(Size size) {
    final path = Path()
      ..addRect(Rect.fromLTWH(0, 0, size.width,
          size.height + MediaQuery.of(Get.context!).padding.bottom))
      ..addRect(Rect.fromLTWH(
          (size.width - (width ?? 200)) / 2,
          (size.height +
                  MediaQuery.of(Get.context!).padding.bottom -
                  (width ?? 200)) /
              2,
          width ?? 200,
          width ?? 200));

    return path..fillType = PathFillType.evenOdd; 
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}
复制代码
3、扫码UI:
复制代码
class ScanWidget extends StatefulWidget {
  const ScanWidget({super.key});

  @override
  State<ScanWidget> createState() => _ScanWidgetState();
}

class _ScanWidgetState extends State<ScanWidget> with TickerProviderStateMixin {
  late Animation<double> animation;
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    initAnima();
  }

  void initAnima() {
    _controller = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    );

    animation = Tween(begin: -100.0, end: 100.0).animate(_controller)
      ..addListener(() {
        if (mounted) setState(() => {});
      });
    _controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        _scanBorder(),
        _scanCenter(context),
        Transform.translate(
          offset: Offset(0, animation.value),
          child: _scanLine(),
        ),
      ],
    );
  }

  Widget _scanCenter(BuildContext context) {
    return ClipPath(
      clipper: CenterTransparentMask(), 
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
        child: Container(
          color: Colors.black.withOpacity(0.5),
          width: SystemUtil().getScreenWidth(context),
          height: SystemUtil().getScreenHeight(context),
        ),
      ),
    );
  }

  Widget _scanBorder() {
    return Image.asset(
      ImageUtils.getImgPath("img_border", "scan"),
      width: 200,
      height: 200,
    );
  }

  Widget _scanLine() {
    return Image.asset(
      ImageUtils.getImgPath("image_line", "scan"),
      width: 200,
      height: 6,
    );
  }
}

3、图片加载工具类:

复制代码
class ImageUtils {
  static String getImgPath(String name, String moduleName,
      {String format = "png"}) {
    return "assets/images/$moduleName/$name.$format";
  }
}
相关推荐
野犬寒鸦几秒前
力扣hot100:环形链表(快慢指针法)(141)
java·数据结构·算法·leetcode·面试·职场和发展
xiaopengbc2 分钟前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
上官浩仁6 分钟前
springboot synchronized 本地锁入门与实战
java·spring boot·spring
前端AK君7 分钟前
React中台系统如何嵌入到业务系统中
前端
Gogo8167 分钟前
java与node.js对比
java·node.js
Slice_cy8 分钟前
不定高虚拟列表
前端
SmartJavaAI13 分钟前
Java调用Whisper和Vosk语音识别(ASR)模型,实现高效实时语音识别(附源码)
java·人工智能·whisper·语音识别
用户37215742613517 分钟前
Python 高效实现 Word 转 PDF:告别 Office 依赖
java
前端AK君17 分钟前
React组件库如何在vue项目中使用
前端
渣哥22 分钟前
Java ThreadPoolExecutor 动态调整核心线程数:方法与注意事项
java