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

Pillar~

已于 2024-04-10 13:52:01 修改

阅读量608

点赞数 1

文章标签： flutter 前端 java

于 2024-04-10 13:48:13 首次发布

本文链接：https://blog.csdn.net/pillar1066527881/article/details/137593501

版权

本文展示了如何在Flutter中创建带有镂空效果的UI和使用动画的扫码界面，还涉及图片加载工具类的使用。

摘要由CSDN通过智能技术生成

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";
  }
}