I’m trying to make an app for monitoring water level using flutter on android studio (hedge hog). What I understand is that the work I am doing lies in an IoT category. I have made an UI for water level indicator. I also know about blynk app. Point is I want to make an app just like blynk that resembles my UI that I made, so that I can monitor water level. I have also done work on esp module. i have controlled Leds and relays using Esp module. The UI of mobile app has different types of features, but what I want to achieve is how to recieve/send data between esp and mobile app. One thing I know that I have to use an app like blynk app, but I don’t understand how to make.
what I understand is listed below: Basic knowledge of Flutter so that I can make a UI. Understanding of Esp module to control Leds and relays
Following is my code of UI
import 'package:flutter/material.dart';
class RowWithTwoColumns extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Transform.translate(
offset: const Offset(20, 40),
child:
//Image.asset('assets/images/blue_1.png',width: 30,),),
Image.asset(
'assets/images/blue_1.png',
width: 30,
),
),
Transform.translate(
offset: const Offset(20, 80),
child: Image.asset(
'assets/images/green.png',
width: 30,
),
),
Transform.translate(
offset: const Offset(20, 120),
child: Image.asset(
'assets/images/green.png',
width: 30,
),
),
Transform.translate(
offset: const Offset(20, 160),
child: Image.asset(
'assets/images/green.png',
width: 30,
),
),
Transform.translate(
offset: const Offset(20, 200),
child: Image.asset(
'assets/images/red_1.png',
width: 30,
),
),
Transform.translate(
offset: const Offset(20, 240),
child: Image.asset(
'assets/images/red_1.png',
width: 30,
),
),
Transform.translate(
offset: const Offset(20, 280),
child: Image.asset(
'assets/images/red_1.png',
width: 30,
),
),
Transform.translate(
offset: const Offset(20, 300),
child: Text(
'WATER\nLEVEL',
textAlign: TextAlign.center,
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Transform.translate(
offset: const Offset(20, 40),
child: Text(
'100 %',
style: TextStyle(fontSize: 20),
),
),
Transform.translate(
offset: const Offset(20, 80),
child: Text(
'90 %',
style: TextStyle(fontSize: 20),
),
),
Transform.translate(
offset: const Offset(20, 123),
child: Text(
'75 %',
style: TextStyle(fontSize: 20),
),
),
Transform.translate(
offset: const Offset(20, 163),
child: Text(
'60 %',
style: TextStyle(fontSize: 20),
),
),
Transform.translate(
offset: const Offset(20, 204),
child: Text(
'45 %',
style: TextStyle(fontSize: 20),
),
),
Transform.translate(
offset: const Offset(20, 243),
child: Text(
'30 %',
style: TextStyle(fontSize: 20),
),
),
Transform.translate(
offset: const Offset(20, 285),
child: Text(
'15 %',
style: TextStyle(fontSize: 20),
),
),
],
),
Column(mainAxisAlignment: MainAxisAlignment.start, children: [
Transform.translate(
offset: const Offset(0, 32),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 55),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 75),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 98),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 120),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 137),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 162),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 175),
child: Text(
'ON \n NOTIFY',
textAlign: TextAlign.center,
),
),
]),
Column(mainAxisAlignment: MainAxisAlignment.start, children: [
Transform.translate(
offset: const Offset(0, 32),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 55),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 75),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 98),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 120),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 137),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 162),
child: SwitchScreen(),
),
Transform.translate(
offset: const Offset(0, 175),
child: Text(
'OFF \n NOTIFY',
textAlign: TextAlign.center,
),
),
]),
],
),
),
appBar: AppBar(
title: Text(
'Water Level Indicator',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.blueAccent,
centerTitle: true,
)),
);
}
}
class SwitchScreen extends StatefulWidget {
@override
SwitchClass createState() => new SwitchClass();
}
class SwitchClass extends State {
bool isSwitched = false;
void toggleSwitch(bool value) {
if (isSwitched == false) {
setState(() {
isSwitched = true;
});
} else {
setState(() {
isSwitched = false;
});
}
}
@override
Widget build(BuildContext context) {
return Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Transform.scale(
scale: 1,
child: Switch(
onChanged: toggleSwitch,
value: isSwitched,
)),
]);
}
}
following is my UI image
Screenshot_20240426-163923.png
I have tried to get an idea of creating alternative of blynk app using different platforms including the following tutorial whose link I’m sharing but since I’m beginner in esp and cloud that’s why I found it difficult to grasp.
https://www.instructables.com/Build-Your-Own-IoT-Platform-Using-Nodejs-and-ESP82/
If any of the respected member could give me a line of action so I would be glad
