Send WiFi Credentials to ESP32 with Flutter using SmartConfig

In this blog I will try to explain how to use esp_smartconfig library in Flutter to create a mobile application that sends WiFi credentials to an unprovisioned ESP32 device using the SmartConfig protocol. This article also serves as a written version of my YouTube video on the same topic:

I originally wrote esp_smartconfig while working on one of my private projects. The package is fully open-source and available on GitHub. There are other packages on pub.dev that serve the same purpose. Even at the time I created this one, alternatives existed. However, I found them somewhat complex and not very user-friendly. Maybe they’ve improved since then, but there’s one key difference with my package: it’s written entirely in pure Dart, while most others use platform-specific languages like Java or Kotlin.

This makes my package more flexible and easier to integrate into any Flutter project. You can use it on any Dart-supported platform – except for the web, since browsers don’t support raw socket access.

Setting Up the Flutter Project

Let’s start by creating a new Flutter project. Open your terminal and navigate to the directory where you want to create the project. Run the following command:

flutter create --template app --platforms android --description "SmartConfig demo" --org com.abobija esp_smartconfig_demo

This command creates a new Flutter project named esp_smartconfig_demo, configured for the Android platform. If you want to support both Android and iOS, simply remove the --platforms android flag. Navigate into the project directory:

cd esp_smartconfig_demo

Add the esp_smartconfig package to the project:

flutter pub add esp_smartconfig

Now, open the project in your favorite code editor and make sure that you have created main.dart and provisioning_screen.dart files with the following code:

Testing the Application

Before testing the app, ensure that your ESP32 device is powered on and ready to receive WiFi credentials.

1. Open the app and enter your WiFi network name (SSID) and password.
2. Press the “Start provisioning” button.

The app should now send the credentials to the ESP32. Once successful, the device will connect to your wireless network.

You should also receive confirmation from the ESP32, including its IP and MAC address.

At this point, your ESP32 is connected to the router and can communicate with other devices on the local network – or even access the internet.

Where is the code for the ESP32?

On the ESP32 side, if you are using ESP-IDF, you can use a basic SmartConfig provisioning example.

If you are using Arduino platform, you can use WiFi.beginSmartConfig() method:

#include "WiFi.h"

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_AP_STA);
  WiFi.beginSmartConfig();

  Serial.println("Waiting for SmartConfig.");
  while (!WiFi.smartConfigDone()) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("SmartConfig done.");

  Serial.println("Waiting for WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("WiFi Connected.");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());
}

void loop() {
}

Conclusion

Using the SmartConfig protocol with Flutter and ESP32 makes WiFi provisioning fast and user-friendly, especially for headless or IoT devices. With the help of the esp_smartconfig Dart package, you can easily build a cross-platform mobile app to send WiFi credentials without needing any platform-specific code.

I hope this guide helped you get started. If you have questions or run into issues, feel free to check out the package on GitHub or leave a comment on the YouTube video.