This guide shows how to create a web-only Flutter application that talks to a BleuIO USB BLE dongle directly from the browser. The app is a minimal console: click Connect, send AT commands like AT+CENTRAL or AT+GAPSCAN=3, and watch responses appear in real time. Treat it as a starting point for richer BLE web apps—dashboards, scanners, or device tools—without native installs.
- Flutter (stable) with web support enabled
- A BleuIO USB BLE dongle
The focus is Flutter for the web. Instead of a mobile build, you’ll run Flutter in the browser and use the Web Serial API to communicate with BleuIO. The included script acts as an example of how to open the serial port, send AT commands, and stream lines back into a Flutter UI. You can use the same pattern to build any BLE-adjacent web app: scan for devices, filter output, parse manufacturer data, or add visualizations—completely in Flutter Web.
How it worksFlutter Web can call browser APIs through dart:html and dart:js_util. The app asks Chrome/Edge to show the serial-port picker, opens the selected BleuIO port at 115200, and writes commands terminated by \r\n. A small pre-newline and micro delays are used so commands don’t concatenate (avoiding errors like AT+CENTRALA). A read loop collects bytes, splits them into lines, and renders them into a console-style panel. Everything runs locally in the browser; nothing is recorded or sent to a server.
From Terminal, create a project that targets only the web so you don’t see iOS/Android code-sign prompts:
flutter create --platforms=web bleuio-flutter
cd bleuio-flutterYou’ll run exclusively against Chrome (or Edge). No mobile setup is needed.
Select Chrome as the build targetUse Chrome so the Web Serial API is available:
flutter run -d chromeIf you use an IDE, choose Chrome (web) in the device selector. Safari is not supported for Web Serial.
Add the example scriptOpen lib/main.dart and replace its contents with the example from the repository. That file defines a tiny Web-Serial service (connect, writeLine, continuous read loop) and a simple UI with a status, quick command buttons, a custom command input, and a full-width terminal output.
Click Connect BleuIO and choose your dongle. Send ATI to verify, then AT+CENTRAL to enter central role, and AT+GAPSCAN=3 to perform a three-second scan. The responses stream into the on-page console immediately. Because it’s just AT over serial, you can experiment with any command that BleuIO supports.
The script is intentionally small so you can lift it into other projects. The service wraps Web Serial and exposes a line stream you can subscribe to from widgets. The UI is a single page that prints lines to a terminal-style view and keeps the scroll pinned to the bottom.
Extending this into a BLE web appOnce you’re comfortable with the console, you can add features that turn it into a BLE tool. Start by parsing common outputs such as GAP scan lines into structured objects with fields like address, RSSI, and name. Add filters and search to highlight target devices.
Use casesThis web-only approach is ideal for demos, workshops, and quick bring-up labs where you want a zero-install experience. It’s handy for field diagnostics when you need to peek at advertisements, confirm firmware state, or prove connectivity from any machine with Chrome. It also serves as a foundation for privacy-respecting dashboards that only read broadcast data and never require native packaging.
Source code & demoRepository:https://github.com/smart-sensor-devices-ab/bleuio-flutter
Live demo (open in Chrome/Edge, connect your dongle, and try AT commands):https://smart-sensor-devices-ab.github.io/bleuio-flutter/
Output, hosted and real timeThe live page streams output as soon as the device is connected. You can keep the tab open as a lightweight serial console while developing other features.
Flutter Web is a great fit for BLE-adjacent tooling when you want the reach of a URL and the feel of a native UI. Start with the example console today, then grow it into the BLE web application your project needs.
Comments