Flutter: Creating an IoT based app to interact with any home electrical equipment (2024)

It always looks cool to control any electrical equipment with a mobile device remotely without even going near it.

Today, we will see how you can give any normal AC power plug, socket or switch a touch of magic using IoT. This will enable us to control any electrical equipment in our house using a mobile device, with the help of an app (of course, built with Flutter) having Bluetooth capability.

So, this article will cover a lot of things:

• Integrating Bluetooth in a Flutter app (for communicating with the IoT device)
• Connecting various modules to Arduino (Bluetooth module and a 5V relay)
• Setting up Arduino (to send and receive signals)

Let’s get started by integrating Bluetooth in a Flutter app.

The final app UI will look like this:

For this project, we will be using a plugin called flutter_bluetooth_serial. There is another awesome plugin for integrating Bluetooth in a Flutter app, flutter_blue.

But for this project, I am using flutter_bluetooth_serial plugin, because it has a lot more features and gives much greater control over the Bluetooth connection while communicating with other devices.

The downside of this plugin is that it only has support for Android as of now. Any iOS developer who wants to contribute to this project can add the iOS support to it (also has an issue open on its GitHub repo for this).

Add the plugin to your pubspec.yaml file:

Defining the basic structure

Create a new Flutter app and add the following to the main.dart file after removing the whole Flutter Demo Counter app code.

This is the basic structure for starting our project. We have to use a StatefulWidget for BluetoothApp class because we will need to mutate the state multiple times during the lifecycle of the app.

Enabling Bluetooth and retrieving devices

Now that we have the basic structure of the app, we can focus on enabling the Bluetooth connection of the user’s device and retrieve the paired devices.

• Initialize some of the variables which would be required ( we will be adding more class member variables as per our necessity, later, while building the app):

• Inside initState() first of all, we have to get the current Bluetooth state. As per the state, request the user to give Bluetooth permissions for enabling Bluetooth on their device if the Bluetooth is not turned on.

Now, we have to define the two functions:

• enableBluetooth() for getting Bluetooth permissions from the user.
• getPairedDevices() for retrieving the paired devices list.

The function implementation for enabling Bluetooth:

The function implementation for retrieving Bluetooth devices list:

• In order to avoid any memory leaks, we will be defining the dispose() method to make sure that the connection is closed and resources are freed.

UI for enabling Bluetooth

So, we have all the methods required for establishing a proper Bluetooth connection with a device, and now we have to map them to some UI widgets.

First of all, we will be adding a Switch widget which can toggle between only two modes on/off.

The code for this component is available below:

Here, the Switch will toggle between on/off depending on whether the Bluetooth connection is enabled/disabled. Irrespective of whether Bluetooth is enabled or disabled by the toggle, getPairedDevices() method is called in order to refresh the device list ( i.e. if the Bluetooth is enabled then the device list will be updated and, if it is disabled then the list content will be made empty).

UI for paired devices list

We will be using a DropdownButton widget for displaying the list of paired devices.

The code for it is:

Defining the method _getDeviceItems() for storing the device names in a list. When there are no devices to store in the list a text written ‘NONE’ is stored as the only item.

Connecting to a device via Bluetooth

Now, comes the main part that is connecting to the Bluetooth device.

• Check if a device is selected from the list.

• If a device is selected, then try to establish the connection.

The listener is set to the connection to track it. This would be helpful while we try to disconnect from the device. The onDone method will be triggered when dispose, finish or close method is called from the connection, all of which causes the connection to disconnect.

Disconnecting from the device

To disconnect from the Bluetooth device, we have to call the close() method on the connection variable.

UI for the connect/disconnect button

The UI for the connect/disconnect button is very simple. The code for it is available below:

Send messages to the Bluetooth device

In this app, we will only be adding on/off functionality, so that a user can turn on or turn off their Bluetooth device from the app.

For turning on the device we will be sending “ 1 “ as the message and for turning off the device we will be sending “ 0 “ as the message.

The code for this functionality is available below:

UI for sending messages via Bluetooth

We will be using two buttons, one for sending ON instruction to the device and the other one for sending OFF instruction to the device.

The code for the UI is available below:

With this all the main functionalities of our Bluetooth app are complete. There can be some UI improvements that can be done in the finished version of the app.

The whole Bluetooth app project is available on GitHub here.

The hardware components required for creating the controlling device are:

• Arduino UNO REV3
• 5V Relay Module (Can be any number of Channels, with more number of channels you will be able to connect more devices)
• HC-05 Bluetooth Transceiver Module
• Jumper wires
• Some electrical wires
• Switch (together with an enclosure)

The module pin configurations and circuit diagram is given below:

NOTE: The connection between the relay and the switch is done in such a way that the relay will function only when the switch is kept in off mode (As the NC or Normally Closed terminal of the relay is connected to the positive terminal of the switch).

When the switch is in on mode manually, it will directly get power from the main supply line.

You can use Arduino Web Editor for uploading the code to your Arduino UNO device. But, before writing and uploading the code you will need to install a plugin on your system, which is used for detecting and connecting to the Arduino device from the Web Editor.

Just follow the steps here, in order to download and set up the Arduino Create Plugin.

After the setup is complete, click on GO TO WEB EDITOR to start writing code for the Arduino device.

You can Sign In using a account in the Arduino Create webpage in order to safely store your projects in the cloud, so that you can access them anywhere and anytime you want.

Click on NEW SKETCH to create a new project.

Now, you can write your program here.

Basically, what we have to do is take the input through Bluetooth from the app and turn on/off the relay connected to the switch.

The code is available below:

Here, the the Arduino signal pin is 8, which is connected to IN2 of the relay.

Connect the Arduino to your system.

You can check whether there is any syntactical mistake in the code by clicking on the checkmark beside the connected device name.

REMEMBER TO DO THIS STEP: Before uploading the code to Arduino, disconnect the wire connected to the RX pin on the Arduino board only (top, right-most wire in the diagram).

Click on the Upload button.

After you get the SUCCESSFUL upload message on the console, reconnect the RX pin wire.

Hoorah! You have finally completed this long project.

Now, you can test whether the Bluetooth functionality of the app is working correctly and controlling the relay.

The GitHub repo of this project is available in the following link:

If you like this project, then please “Star” (⭐️) the GitHub repo.