Flutter蓝牙后端界面管理插件ble_backend_screens的使用

Flutter蓝牙后端界面管理插件ble_backend_screens的使用

BLE后端屏幕

ble_backend_screens 插件提供了 status 和 scanner 屏幕，可以帮助你创建使用 ble_backend 库的例子。

使用方法

只需实现 PeripheralScreen 并按如下方式使用：

ScannerScreen(
    bleCentral: bleCentral,
    bleScanner: bleCentral.createScanner(serviceIds: serviceIds),
    createStatusScreen: (bleCentral) => 
        StatusScreen(bleCentral: bleCentral),
    createPeripheralScreen: (blePeripheral) => 
        PeripheralScreen(blePeripheral: blePeripheral))

完整示例代码

以下是一个完整的示例代码，展示了如何使用 ble_backend_screens 插件。

import 'package:flutter/material.dart';
import 'package:ble_backend_factory/ble_central.dart';
import 'package:ble_backend_screens/status_screen.dart';
import 'package:ble_backend_screens/scanner_screen.dart';
import 'package:ble_backend_screens_example/screens/peripheral_screen.dart'; // 假设这是你的PeripheralScreen实现

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ble backend screens example',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.light,
        ),
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.dark,
        ),
      ),
      home: ScannerScreen(
        bleCentral: bleCentral, // 假设你已经初始化了bleCentral
        bleScanner: bleCentral.createScanner(serviceIds: []), // 假设serviceIds为空列表
        createStatusScreen: (bleCentral) => 
            StatusScreen(bleCentral: bleCentral),
        createPeripheralScreen: (blePeripheral) => 
            PeripheralScreen(
              blePeripheral: blePeripheral,
              bleConnector: blePeripheral.createConnector(),
            ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

代码解释

  • 导入必要的库：

    import 'package:flutter/material.dart';
import 'package:ble_backend_factory/ble_central.dart';
import 'package:ble_backend_screens/status_screen.dart';
import 'package:ble_backend_screens/scanner_screen.dart';
import 'package:ble_backend_screens_example/screens/peripheral_screen.dart';

    这些导入语句引入了所有必要的库，包括 flutter 的核心库、蓝牙中央库 ble_backend_factory 和 ble_backend_screens 中的屏幕组件。

  • 主函数：

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

    这是应用的入口点，运行 MyApp 类。

  • MyApp类：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ble backend screens example',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.light,
        ),
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.indigo,
          brightness: Brightness.dark,
        ),
      ),
      home: ScannerScreen(
        bleCentral: bleCentral, // 假设你已经初始化了bleCentral
        bleScanner: bleCentral.createScanner(serviceIds: []), // 假设serviceIds为空列表
        createStatusScreen: (bleCentral) => 
            StatusScreen(bleCentral: bleCentral),
        createPeripheralScreen: (blePeripheral) => 
            PeripheralScreen(
              blePeripheral: blePeripheral,
              bleConnector: blePeripheral.createConnector(),
            ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

更多关于Flutter蓝牙后端界面管理插件ble_backend_screens的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter蓝牙后端界面管理插件ble_backend_screens的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


ble_backend_screens 是一个用于管理 Flutter 应用中蓝牙后端界面的插件。它可以帮助开发者快速集成和管理蓝牙连接的界面，简化蓝牙设备的扫描、连接、数据传输等操作。以下是使用 ble_backend_screens 插件的基本步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 ble_backend_screens 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  ble_backend_screens: ^1.0.0  # 请使用最新版本

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

2. 初始化插件

在你的 Flutter 应用中初始化 ble_backend_screens 插件。通常可以在 main.dart 中进行初始化：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BLE Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BleBackendScreens(),  // 使用 BleBackendScreens 作为主界面
    );
  }
}

3. 使用插件提供的界面

ble_backend_screens 插件提供了多个现成的界面，你可以直接使用这些界面来管理蓝牙设备。

  • 扫描设备界面：用于扫描附近的蓝牙设备。
  • 设备详情界面：显示已连接设备的详细信息，并提供数据传输等功能。

示例：扫描蓝牙设备

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

class ScanDevicesScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('扫描蓝牙设备'),
      ),
      body: BleScanScreen(
        onDeviceSelected: (device) {
          // 处理设备选择逻辑
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => DeviceDetailScreen(device: device),
            ),
          );
        },
      ),
    );
  }
}

示例：显示设备详情

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

class DeviceDetailScreen extends StatelessWidget {
  final BleDevice device;

  DeviceDetailScreen({required this.device});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('设备详情'),
      ),
      body: BleDeviceDetailScreen(
        device: device,
        onDataReceived: (data) {
          // 处理接收到的数据
          print('Received data: $data');
        },
        onSendData: (data) {
          // 处理发送数据逻辑
          print('Sending data: $data');
        },
      ),
    );
  }
}

4. 处理蓝牙连接和数据传输

ble_backend_screens 插件会自动处理蓝牙连接和数据传输的逻辑，你只需要在回调函数中处理接收到的数据或发送数据即可。

5. 权限配置

确保在 AndroidManifest.xml 和 Info.plist 中配置了必要的蓝牙权限。

AndroidManifest.xml:

<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Info.plist:

<key>NSBluetoothAlwaysUsageDescription</key>
<string>需要蓝牙权限来扫描和连接设备</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要位置权限来扫描蓝牙设备</string>
回到顶部