Flutter WiFi配置插件esp_provisioning

Flutter WiFi配置插件esp_provisioning_wifi的使用

介绍

esp_provisioning_wifi 是一个用于通过蓝牙在ESP32设备上配置WiFi的库，使用了Bloc模式。

要求

Android 6 (API level 23)+

确保你的 android/build.gradle 文件中有以下设置：

defaultConfig {
    minSdkVersion 23
}

在你的 android/app/build.gradle 文件中的 repositories 部分添加如下内容：

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

蓝牙权限会由库自动请求。

iOS 13.0+

在你的 ios/Runner/Info.plist 文件中添加以下内容：

<key>NSBluetoothAlwaysUsageDescription</key>
<string>我们的应用程序使用蓝牙来查找、连接和在不同设备之间传输数据。</string>

注意事项

该库是基于 flutter_bloc 的一个封装，底层使用了 flutter_esp_ble_prov。
目前嵌入了 Espressif Android Provisioning library。

完整示例Demo

以下是完整的Flutter应用示例代码，展示了如何使用 esp_provisioning_wifi 插件进行WiFi配置。

import 'package:esp_provisioning_wifi/esp_provisioning_bloc.dart';
import 'package:esp_provisioning_wifi/esp_provisioning_event.dart';
import 'package:esp_provisioning_wifi/esp_provisioning_state.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 提供 EspProvisioningBloc 实例
    return BlocProvider(
      create: (_) => EspProvisioningBloc(),
      child: const MyAppView(),
    );
  }
}

class MyAppView extends StatefulWidget {
  const MyAppView({super.key});

  [@override](/user/override)
  State<MyAppView> createState() => _MyAppViewState();
}

class _MyAppViewState extends State<MyAppView> {
  final defaultPadding = 12.0;
  final defaultDevicePrefix = 'PROV';

  String feedbackMessage = '';

  // 控制器用于获取用户输入
  final prefixController = TextEditingController(text: 'PROV_');
  final proofOfPossessionController = TextEditingController(text: 'abcd1234');
  final passphraseController = TextEditingController();

  // 更新反馈消息
  pushFeedback(String msg) {
    setState(() {
      feedbackMessage = '$feedbackMessage\n$msg';
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocBuilder<EspProvisioningBloc, EspProvisioningState>(
        builder: (context, state) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('ESP BLE Provisioning Example'),
            actions: [
              IconButton(
                  icon: const Icon(Icons.bluetooth),
                  onPressed: () {
                    // 开始扫描BLE设备
                    context.read<EspProvisioningBloc>().add(EspProvisioningEventStart(prefixController.text));
                    pushFeedback('Scanning BLE devices');
                  }),
            ],
          ),
          bottomSheet: SafeArea(
            child: Container(
              width: double.infinity,
              color: Colors.black87,
              padding: EdgeInsets.all(defaultPadding),
              child: Text(
                feedbackMessage,
                style: TextStyle(fontWeight: FontWeight.bold, color: Colors.green.shade600),
              ),
            ),
          ),
          body: SafeArea(
            child: Container(
              padding: EdgeInsets.all(defaultPadding),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Flexible(
                    child: Container(
                      padding: EdgeInsets.all(defaultPadding),
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Flexible(
                            child: Text('设备前缀'),
                          ),
                          Expanded(
                            child: TextField(
                              controller: prefixController,
                              decoration: const InputDecoration(hintText: '输入设备前缀'),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Flexible(
                    child: Container(
                      padding: EdgeInsets.all(defaultPadding),
                      child: const Text('BLE 设备'),
                    ),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: state.bluetoothDevices.length,
                      itemBuilder: (context, i) {
                        return ListTile(
                          title: Text(
                            state.bluetoothDevices[i],
                            style: TextStyle(color: Colors.blue.shade700, fontWeight: FontWeight.bold),
                          ),
                          onTap: () {
                            final bluetoothDevice = state.bluetoothDevices[i];
                            // 选择BLE设备
                            context.read<EspProvisioningBloc>().add(EspProvisioningEventBleSelected(bluetoothDevice, proofOfPossessionController.text));
                            pushFeedback('Scanning WiFi on $bluetoothDevice');
                          },
                        );
                      },
                    ),
                  ),
                  Flexible(
                    child: Container(
                      padding: EdgeInsets.all(defaultPadding),
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Flexible(
                            child: Text('证明所有权'),
                          ),
                          Expanded(
                            child: TextField(
                              controller: proofOfPossessionController,
                              decoration: const InputDecoration(hintText: '输入证明所有权字符串'),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  Flexible(
                    child: Container(
                      padding: EdgeInsets.all(defaultPadding),
                      child: const Text('WiFi 网络'),
                    ),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: state.wifiNetworks.length,
                      itemBuilder: (context, i) {
                        return ListTile(
                          title: Text(
                            state.wifiNetworks[i],
                            style: TextStyle(color: Colors.green.shade700, fontWeight: FontWeight.bold),
                          ),
                          onTap: () async {
                            final wifiNetwork = state.wifiNetworks[i];
                            // 选择WiFi网络并进行配置
                            context.read<EspProvisioningBloc>().add(EspProvisioningEventWifiSelected(state.bluetoothDevice, proofOfPossessionController.text, wifiNetwork, passphraseController.text));
                            pushFeedback('Provisioning WiFi $wifiNetwork on ${state.bluetoothDevice}');
                          },
                        );
                      },
                    ),
                  ),
                  Flexible(
                    child: Container(
                      padding: EdgeInsets.all(defaultPadding),
                      child: Row(
                        mainAxisSize: MainAxisSize.max,
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          const Flexible(
                            child: Text('WiFi 密码'),
                          ),
                          Expanded(
                            child: TextField(
                              controller: passphraseController,
                              decoration: const InputDecoration(hintText: '输入密码'),
                              obscureText: true,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
    });
  }
}

更多关于Flutter WiFi配置插件esp_provisioning_wifi的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼•7 小时前

更多关于Flutter WiFi配置插件esp_provisioning_wifi的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中配置ESP设备WiFi连接时，esp_provisioning_wifi 插件是一个强大的工具。这个插件允许你通过蓝牙或其他方式将WiFi配置信息传输到ESP设备。下面是一个简单的示例，展示了如何在Flutter项目中使用这个插件。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  esp_provisioning_wifi: ^最新版本号

确保你替换了最新版本号为插件的当前最新版本。

2. 导入插件

在你的Flutter项目的Dart文件中（例如main.dart），导入插件：

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

3. 配置WiFi信息

接下来，你需要创建一个函数来配置WiFi信息。以下是一个简单的例子，展示了如何使用插件提供的API：

void configureWiFi() async {
  // 定义WiFi的SSID和密码
  String ssid = "你的WiFi名称";
  String password = "你的WiFi密码";

  // 创建WiFi配置对象
  WifiCredentials wifiCredentials = WifiCredentials(ssid: ssid, password: password);

  // 使用插件的provisioning方法配置WiFi
  try {
    await ESPProvisioningWiFi.provisionDevice(wifiCredentials);
    print("WiFi配置成功！");
  } catch (e) {
    print("WiFi配置失败: $e");
  }
}

4. 触发配置操作

你可以在按钮点击或其他用户交互时触发configureWiFi函数：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ESP WiFi 配置'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: configureWiFi,
            child: Text('配置WiFi'),
          ),
        ),
      ),
    );
  }
}

注意事项

权限：确保你的Flutter应用有必要的权限（如蓝牙权限，如果通过蓝牙进行配置）。
ESP设备：ESP设备需要支持Provisioning功能，并且已经准备好接收配置信息。
错误处理：在实际应用中，添加更多的错误处理和用户反馈是很重要的。

完整代码示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ESP WiFi 配置'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              String ssid = "你的WiFi名称";
              String password = "你的WiFi密码";
              WifiCredentials wifiCredentials = WifiCredentials(ssid: ssid, password: password);

              try {
                await ESPProvisioningWiFi.provisionDevice(wifiCredentials);
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('WiFi配置成功！')));
              } catch (e) {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('WiFi配置失败: $e')));
              }
            },
            child: Text('配置WiFi'),
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何在Flutter应用中集成esp_provisioning_wifi插件，并通过按钮点击来配置ESP设备的WiFi连接。记得替换WiFi的SSID和密码为你的实际值。