How to make an IoT app using Flutter, Firebase and NodeMCU ESP8266?
By: Rushank Shah
Tags: Firebase, Internet of Things, Nodemcu, Flutter

Step 2: Setup the Flutter App

1.Start a new Flutter project in Android Studio (or using CLI) and name it whatever you want. Here, I will name it iot_app.

2. Remove all the boilerplate code provided by Flutter and just create a Stateless Widget which returns a MaterialApp.

void main() {

runApp(MyApp());

}



class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.purple,

visualDensity: VisualDensity.adaptivePlatformDensity,

),

home: HomePage());

}

}

3. Next we will create the Layout of the app. The HomePage would be a Stateful Widget as we are going to change the On/Off button state in runtime.

4.The design of the app is pretty minimalistic. I’ve just added a Simple AppBar and a RaisedButton at the Centre of the screen.

class HomePage extends StatefulWidget {

@override

_HomePageState createState() => _HomePageState();

}



class _HomePageState extends State<HomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(

'IOT App',

),

),

body: Center(

child: RaisedButton(

child: Text(

'On'

)

),

),

);

}

}

5. Next Step is to integrate Firebase in our Flutter app. You can refer this article to follow the steps. (Only follow the steps till integrating Firebase with Flutter. Don’t integrate Cloud Firestore with the app.)

6. After integrating Firebase in our project, we will add the Firebase Realtime Database package to manipulate data in the database. You can find it over here.

7. I will add the GoogleFonts package to style my text but you may skip that part.

dependencies:

flutter:

sdk: flutter

cupertino_icons: ^0.1.3

google_fonts: ^1.1.0

firebase_database: ^3.1.6

8. Above are the final dependencies for my project in pubspec.yaml. (GoogleFonts is not mandatory and CupertinoIcons is the default package provided by Flutter.)

Now let’s start building up the app 😄

1.To connect to the database, we will need a reference to our database. For that first import the Firebase from firebase_database package.

import 'package:firebase_database/firebase_database.dart';

2. Next step is to get a reference to the firebase database. We will keep the reference a global variable in _HomePageState class.

final DBref = FirebaseDatabase.instance.reference();

3. We will need two more variables. Namely ledStatus (int) and isLoading (boolean). The ledStatus is the variable which we will use to manage the status of the LED in our app so that our app knows whether the LED is on or off and isLoading is used so that when the app starts we can read the ledStatus from the database and show an indicator while we get the status of the LED.

int ledStatus = 0;

bool isLoading = false;

4. When the app starts, we need to know the status of the LED so that we can show appropriate text on the button. We will override the initState function of the HomePage and add a functionality to fetch the status of the LED from the database. This is how you can implement the getLEDStatus function :

getLEDStatus() async {

await DBref.child('LED_STATUS').once().then((DataSnapshot snapshot) {

ledStatus = snapshot.value;

print(ledStatus);

});



setState(() {

isLoading = false;

});

}



@override

void initState() {

isLoading = true;

getLEDStatus();

super.initState();

}

5. Next we will change the body of our Scaffold to update with our variables and we will call a function in the onPressed of the RaisedButton. The final build function would look something like this:

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(

'IOT App',

style:

GoogleFonts.montserrat(fontSize: 25, fontStyle: FontStyle.italic),

),

),

body: Center(

child: isLoading

? CircularProgressIndicator()

: RaisedButton(

child: Text(

ledStatus == 0 ? 'On' : 'Off',

style: GoogleFonts.nunito(

fontSize: 20, fontWeight: FontWeight.w300),

),

onPressed: () {

buttonPressed();

},

),

),

);

}

6. Next we will write the buttonPressed function. In this function we will use the ledStatus variable to change the state of the button and send data to the database. This is how you can implement the function:

void buttonPressed() {

ledStatus == 0

? DBref.child('LED_STATUS').set(1)

: DBref.child('LED_STATUS').set(0);

if (ledStatus == 0) {

setState(() {

ledStatus = 1;

});

} else {

setState(() {

ledStatus = 0;

});

}

}

The app is now ready 🥳. You can now run the app and see the LED status variable in the firebase console live.

You can find the complete code here.