Flutter网页浏览插件web_blue的使用

Flutter网页浏览插件web_blue的使用

Dart包装器通过dart:js实现对Web Bluetooth API的支持。

特性

  • canUseBlue
  • getAvailability
  • subscribeAvailabilitychanged/unsubscribeAvailabilitychanged
  • getDevices/requestDevice
  • connect/disconnect
  • getPrimaryService/getCharacteristic
  • startNotifications/stopNotifications
  • subscribeValueChanged/unsubscribeValueChanged
  • readValue/writeValueWithResponse

使用方法

canUseBlue

bool canUse = canUseBlue();
print('canUse $canUse');

getAvailability

bool availability = await blue.getAvailability();
print('availability $availability');

subscribeAvailabilitychanged/unsubscribeAvailabilitychanged

final EventListener _handleAvailabilitychanged = allowInterop((Event event) {});
...
blue.subscribeAvailabilitychanged(_handleAvailabilitychanged);
...
blue.unsubscribeAvailabilitychanged(_handleAvailabilitychanged);

getDevices/requestDevice

getDevices

List<BlueDevice> getDevices = await blue.getDevices();
_device = getDevices[0];

requestDevice

BlueDevice requestDevice = await blue.requestDevice(RequestOptions(
  optionalServices: [BlueUUID.getService(WOODEMI_SERV__COMMAND)],
  acceptAllDevices: true,
));
_device = requestDevice;

connect/disconnect

connect

_device?.gatt.connect().then((value) {
  print('device.gatt.connect success');
}).catchError((error) {
  print('device.gatt.connect $error');
});

disconnect

_device?.gatt.disconnect();

getPrimaryService/getCharacteristic

getPrimaryService

_service = await _device!.gatt.getPrimaryService(BlueUUID.getService(WOODEMI_SERV__COMMAND));

getCharacteristic

_characteristic = await _service!.getCharacteristic(BlueUUID.getCharacteristic(WOODEMI_CHAR__COMMAND_REQUEST));

startNotifications/stopNotifications

startNotifications

await _characteristic!.startNotifications();

stopNotifications

await _characteristic!.stopNotifications();

subscribeValueChanged/unsubscribeValueChanged

subscribeValueChanged

final EventListener _handleValueChanged = allowInterop((event) {});
...
_characteristic!.subscribeValueChanged(_handleValueChanged);
...
_characteristic!.unsubscribeValueChanged(_handleValueChanged);

readValue/writeValueWithResponse

readValue

var byteData = await _characteristic!.readValue();

writeValueWithResponse

_characteristic!.writeValueWithResponse(Uint8List.fromList([0x01, 0x0A, 0x00, 0x00, 0x00, 0x01]));

示例代码

// ignore_for_file: avoid_print, avoid_web_libraries_in_flutter

import 'dart:html' show Event, EventListener;
import 'dart:js' show allowInterop;
import 'dart:js_util' show getProperty;

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

import 'woodemi_notepad_page.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('web_blue example'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              child: const Text('canUse'),
              onPressed: () {
                bool canUse = canUseBlue();
                print('canUse $canUse');
              },
            ),
            ElevatedButton(
              child: const Text('getAvailability'),
              onPressed: () async {
                bool availability = await blue.getAvailability();
                print('availability $availability');
              },
            ),
            ElevatedButton(
              child: const Text('subscribeAvailabilitychanged'),
              onPressed: () async {
                blue.subscribeAvailabilitychanged(_handleAvailabilitychanged);
                print('subscribeAvailabilitychanged success');
              },
            ),
            ElevatedButton(
              child: const Text('unsubscribeAvailabilitychanged'),
              onPressed: () async {
                blue.unsubscribeAvailabilitychanged(_handleAvailabilitychanged);
                print('unsubscribeAvailabilitychanged success');
              },
            ),
            ElevatedButton(
              child: const Text('Woodemi Notepad'),
              onPressed: () {
                var route = MaterialPageRoute(builder: (context) {
                  return const WoodemiNotepadPage();
                });
                Navigator.of(context).push(route);
              },
            ),
          ],
        ),
      ),
    );
  }
}

final EventListener _handleAvailabilitychanged = allowInterop((Event event) {
  print('_handleAvailabilitychanged $event');
  bool available = getProperty(event, 'value');
  print('available $available');
});

更多关于Flutter网页浏览插件web_blue的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网页浏览插件web_blue的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


关于Flutter中的web_blue插件（假设这里指的是用于网页浏览的某个Flutter插件，因为实际上web_blue并不是一个广为人知的Flutter插件名称，但我会基于你的要求模拟一个类似的场景），通常这类插件会提供一个WebView组件来嵌入和显示网页内容。以下是一个基于Flutter的WebView插件（例如webview_flutter，这是Flutter官方提供的插件）的使用示例代码。虽然这不是web_blue，但原理是相似的。

首先，确保你已经在pubspec.yaml文件中添加了相应的依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.4  # 使用时请检查最新版本

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

接下来是示例代码，展示如何在Flutter应用中使用WebView：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: WebView(
        initialUrl: 'https://www.example.com', // 初始加载的URL
        javascriptMode: JavascriptMode.unrestricted, // 允许JavaScript执行
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          // 可以在这里执行更多WebView控制操作，比如加载本地HTML文件
          // _controller.loadUrl(Uri.dataFromString(
          //     '<html><body><h1>Hello, world!</h1></body></html>',
          //     mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
          //     .toString());
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
        navigationDelegate: (NavigationRequest request) {
          if (request.url.startsWith('https://www.unwanted-site.com')) {
            // 阻止导航到某些URL
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 示例：在WebView中执行JavaScript代码
          String result = await _controller.evaluateJavascript('document.title');
          print('Page title is $result');
        },
        tooltip: 'Execute JS',
        child: Icon(Icons.code),
      ),
    );
  }
}

这个示例展示了如何使用webview_flutter插件来创建一个简单的WebView应用。你可以加载一个初始URL，控制JavaScript的执行，监听页面加载完成事件，以及通过navigationDelegate来拦截和处理导航请求。

如果你使用的确实是web_blue插件（尽管这不是一个标准或广为人知的插件名），那么你应该查阅该插件的官方文档或GitHub仓库以获取具体的用法和API参考。通常，这类插件的使用方式大同小异，主要差异在于API的细节和可用的配置选项。

回到顶部