Flutter串口通信插件serial的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter串口通信插件serial的使用

serial 是一个基于 window.navigator.serial 的封装。该插件本身并不提供额外的API，但可以帮助你在不编写任何JavaScript代码的情况下让 dart:html 包“开箱即用”。

Web Demo

你可以访问 Web Demo 来查看实际效果。

Requirements

为了能够在Web上访问串口，你需要通过HTTPS URL打开你的网页。

注意：此功能仅在安全上下文（HTTPS）中可用，在某些或所有支持的浏览器中。

更多信息请参阅 MDN文档。

Usage

下面是一个简单的示例，展示了如何使用 serial 插件进行串口通信：

示例代码

import 'dart:html';
import 'package:serial/serial.dart';

void main() async {
  // 请求串口
  final port = await window.navigator.serial.requestPort();
  
  if (port != null) {
    // 打开端口，设置波特率为9600
    await port.open(baudRate: 9600);

    // 创建写入器
    final writer = port.writable.writer;

    // 等待写入器准备好
    await writer.ready;
    
    // 发送数据
    await writer.write(Uint8List.fromList('Hello World.'.codeUnits));

    // 关闭写入器
    await writer.close();
  } else {
    print("未选择串口");
  }
}

完整的Flutter应用示例

以下是一个完整的Flutter应用程序示例，它包括了一个主页面和一个用于测试串口通信的功能：

// ignore_for_file: avoid_web_libraries_in_flutter

import 'package:flutter/material.dart';
import 'dart:html';
import 'package:serial/serial.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _status = "未连接";

  Future<void> connectToSerial() async {
    try {
      final port = await window.navigator.serial.requestPort();
      
      if (port != null) {
        await port.open(baudRate: 9600);
        setState(() {
          _status = "已连接";
        });
        
        final writer = port.writable.writer;
        await writer.ready;
        await writer.write(Uint8List.fromList('Hello World.'.codeUnits));
        await writer.close();
      } else {
        setState(() {
          _status = "未选择串口";
        });
      }
    } catch (e) {
      setState(() {
        _status = "连接失败: $e";
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    final theme = ThemeData(
      useMaterial3: true,
      colorSchemeSeed: Colors.purple,
      brightness: Brightness.dark,
      inputDecorationTheme: InputDecorationTheme(
        border: OutlineInputBorder(),
        alignLabelWithHint: true,
        isDense: true,
      ),
    );

    return MaterialApp(
      theme: theme,
      home: Scaffold(
        appBar: AppBar(title: const Text('Serial Communication Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: connectToSerial,
                child: const Text('Connect to Serial Port'),
              ),
              const SizedBox(height: 20),
              Text(_status, style: const TextStyle(fontSize: 18)),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何在一个Flutter应用中集成串口通信，并且可以通过点击按钮来尝试连接到串口设备并发送一条消息。请确保你的应用运行在HTTPS环境下以保证串口访问的安全性。


更多关于Flutter串口通信插件serial的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter串口通信插件serial的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中进行串口通信，你可以使用serial插件。以下是一个基本的示例，展示如何在Flutter应用中实现串口通信。这个示例假定你已经安装了serial插件，并且你的Flutter环境已经配置好。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  serial: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 请求权限

在Android上，你需要请求串口权限。在你的AndroidManifest.xml文件中添加以下权限：

<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.hardware.usb.permission.USB_PERMISSION"/>
<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
<uses-permission android:name="android.permission.BLUETOOTH_SCAN"/>
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT"/>

注意：具体权限可能会根据插件版本和Android API级别的不同而有所变化。

3. 初始化串口通信

在你的Flutter应用中，你可以使用以下代码来初始化串口通信：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late SerialPort _serialPort;
  late SerialPlugin _serialPlugin;
  String _data = "";

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

  void initSerial() async {
    _serialPlugin = SerialPlugin();

    // 获取可用的串口列表
    List<PortInfo> ports = await _serialPlugin.listPorts();
    print("Available Ports: ${ports.map((p) => p.portName).join(", ")}");

    // 假设我们选择第一个串口（实际应用中，你可能需要让用户选择）
    if (ports.isNotEmpty) {
      _serialPort = await _serialPlugin.open(ports[0].portName);

      // 设置串口参数
      _serialPort.setParameters(
        baudRate: 9600,
        dataBits: 8,
        stopBits: StopBits.one,
        parity: Parity.none
      );

      // 监听数据接收
      _serialPort.inputStream.listen((Uint8List data) {
        setState(() {
          _data += String.fromCharCodes(data);
        });
      });
    }
  }

  void sendData(String data) {
    Uint8List bytesToSend = Uint8List.fromList(data.codeUnits);
    _serialPort.outputStream.write(bytesToSend);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Serial Communication'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                decoration: InputDecoration(labelText: 'Send Data'),
                onSubmitted: (value) {
                  sendData(value);
                },
              ),
              Text('Received Data:\n$_data'),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _serialPort.close();
    super.dispose();
  }
}

4. 运行应用

现在，你可以运行你的Flutter应用。如果一切正常，你应该能够看到可用的串口列表，并能够发送和接收数据。

注意事项

  1. 权限处理：在Android 6.0及以上版本中，你需要在运行时请求权限。上面的代码示例没有包含权限请求的逻辑，你可能需要手动添加。
  2. 错误处理：在生产环境中，你应该添加适当的错误处理逻辑，以处理串口通信中可能出现的各种错误。
  3. 平台差异：serial插件可能在不同的平台上有所差异，确保你已经阅读并理解了插件的文档。

希望这个示例能够帮助你在Flutter中实现串口通信。如果你有任何进一步的问题，请随时提问。

回到顶部