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";
  }
}
相关推荐
lecepin1 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒1 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿2 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥2 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸2 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin2 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊2 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆2 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js