Flutter设备扫描动画插件device_scan_animation的使用

Flutter设备扫描动画插件device_scan_animation的使用

设备扫描动画

一个可以快速添加自定义附近的设备扫描动画的包。

YouTube视频演示

Demo Video

Pub.dev

该插件在pub.dev上可用。

Device Scan Animation Package

使用方法

为了基本的使用,请查看提供的示例。以下是DeviceScanWidget接受的所有参数,用于自定义:

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DeviceScanWidget(
          nodeType: ..., // 可选
          ringColor: ..., // 可选
          ringThickness: ..., // 可选
          nodeColor: ..., // 可选
          onInitialize: () {}, // 可选
          newNodesDuration: ..., // 可选
          duration: ..., // 可选
          scanColor: ..., // 可选
          centerNodeColor: ..., // 可选
          gap: ..., // 可选
          layers: ..., // 可选
          hideNodes: ..., // 可选
        ),
      ),
    );
  }
}

完整示例代码

以下是一个完整的示例代码,展示了如何在Flutter应用中使用device_scan_animation插件。

import 'package:device_scan_animation/device_scan_animation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('设备扫描动画'),
      ),
      body: Center(
        child: DeviceScanWidget(), // 添加设备扫描动画
      ),
    );
  }
}

更多关于Flutter设备扫描动画插件device_scan_animation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter设备扫描动画插件device_scan_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 device_scan_animation Flutter 插件的示例代码。这个插件通常用于创建设备扫描动画效果,比如在蓝牙设备扫描、Wi-Fi设备扫描等场景中。

首先,确保你已经在 pubspec.yaml 文件中添加了 device_scan_animation 依赖:

dependencies:
  flutter:
    sdk: flutter
  device_scan_animation: ^最新版本号  # 替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的 Flutter 应用示例,展示如何使用 device_scan_animation 插件:

import 'package:flutter/material.dart';
import 'package:device_scan_animation/device_scan_animation.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Device Scan Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ScanAnimationPage(),
    );
  }
}

class ScanAnimationPage extends StatefulWidget {
  @override
  _ScanAnimationPageState createState() => _ScanAnimationPageState();
}

class _ScanAnimationPageState extends State<ScanAnimationPage> {
  late DeviceScanController _controller;

  @override
  void initState() {
    super.initState();
    _controller = DeviceScanController(
      duration: const Duration(seconds: 5), // 动画持续时间
      scanAreaSize: Size(300, 300), // 扫描区域大小
      deviceCount: 10, // 设备数量
      scanLineColor: Colors.blue, // 扫描线颜色
      deviceColor: Colors.red, // 设备点颜色
      scanLineSpeed: 1.0, // 扫描线速度
      deviceAnimationDuration: const Duration(milliseconds: 500), // 设备出现动画持续时间
    );

    // 启动动画
    _controller.start();
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放资源
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Device Scan Animation Demo'),
      ),
      body: Center(
        child: DeviceScanAnimation(
          controller: _controller,
          builder: (context, devices) {
            // devices 是一个包含扫描到设备的列表,每个设备是一个 Offset 对象
            return Stack(
              children: List.generate(
                devices.length,
                (index) {
                  final device = devices[index];
                  return Positioned(
                    left: device.dx,
                    top: device.dy,
                    child: Container(
                      width: 10,
                      height: 10,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _controller.deviceColor,
                      ),
                    ),
                  );
                },
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 重启动画
          _controller.reset();
        },
        tooltip: 'Restart Animation',
        child: Icon(Icons.replay),
      ),
    );
  }
}

代码说明:

  1. 依赖导入:在 pubspec.yaml 中添加 device_scan_animation 依赖。
  2. 主应用入口MyApp 类是应用的入口,它配置了一个基本的 Material 应用并设置了主页面为 ScanAnimationPage
  3. 扫描动画页面ScanAnimationPage 是一个有状态组件,它包含了一个 DeviceScanController 实例来控制动画。
  4. 控制器初始化:在 initState 方法中初始化 DeviceScanController 并启动动画。
  5. 动画构建:在 build 方法中使用 DeviceScanAnimation 组件来渲染动画。builder 回调提供了一个设备列表,你可以根据这些设备的位置来绘制它们。
  6. 重置动画:提供了一个浮动操作按钮来重置动画。

请确保你已经安装了最新版本的 device_scan_animation 插件,并根据需要调整动画参数。这个示例展示了基本的设备扫描动画效果,你可以根据实际需求进一步定制动画效果。

回到顶部