Read temperature from NodeMCU through mobile app developed on Flutter, on button press

This circuit and programs will help you to send HTTP request from the mobile device through an App to read the temperature from NodeMCU. NTC thermistor is used as the temperature sensor. Temperature will be updated when the “Read temperature” button is pressed. Circuit is done as shown in the following diagram.

Download TemperatureMonitor library from the following link. Unzip and copy the downloaded library to your Arduino libraries folder.

Restart Arduino software and open File -> Examples -> TemperatureMonitor -> TemperatureMonitor

Upload the program to your NodeMCU. Now, create the Mobile App using Flutter. Necessary program files for creating the mobile App on Flutter is given below.

pubspec.yaml

name: timerapp
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0+4

  cupertino_icons: ^0.1.2
  flutter_timer: ^0.0.6

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

main.dart

import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';

class Post
{
  dynamic temperature;

  Post({this.temperature});

  factory Post.fromJson(Map <String, dynamic> json)
  {
    return Post(
      temperature: json['temperature']
    );
  }

  Map toMap()
  {
    var map = new Map<String, dynamic>();
    map["temperature"] = temperature;
    return map;
  }
}

Future <Post> createPost(String url, {Map body}) async
{
  return http.post(url, body: body).then((http.Response response)
  {
    final int statusCode = response.statusCode;

    if(statusCode < 200 || statusCode > 400 || json == null)
      {
        throw new Exception("Failed to fetch");
      }
    return Post.fromJson(json.decode(response.body));
  });
}

void main() => runApp(MyApp());

class MyApp extends StatefulWidget
{
  MyApp({Key key}):super(key:key);

  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp>
{
  String myText = "0";

  static final CREATE_POST_URL = 'http://192.168.4.1/convertDataToJson';

  void changeText(String title)
  {
    setState(() {
      myText = title;
    });
  }

  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: "WEB SERVICE",
      theme: ThemeData(
        primaryColor: Colors.teal,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Temperature Reader'
          ),
        ),
        body: new Center(
          child: new Column(
            children: <Widget>[

              new SizedBox(
                height: 20,
              ),

              new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(
                    "${myText}",
                    style: TextStyle(
                      fontSize: 45,
                    ),
                  ),

                  new Column(
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text("\u2103",
                            style: TextStyle(
                              fontSize: 25,
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ],
              ),

              new SizedBox(
                height: 20,
              ),

              new RaisedButton(
                onPressed: () async
                {
                  Post newPost = new Post(temperature: 0);
                  Post p = await createPost(CREATE_POST_URL);
                  print(p.temperature.toString());
                  changeText(p.temperature.toString());
                },
                color: Colors.pink,

                shape: RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(10),
                ),

                child : const Text(
                    "Read temperature",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15,
                  ),
                ),
                padding: EdgeInsets.only(right: 60, left: 60, top: 20, bottom: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Create and upload the App to your mobile device. Connect your mobile device to NodeMCU through WiFi and open your newly created App on mobile device. Press the “Read temperature” button to get the updated temperature reading.

0 0 vote
Article Rating

Published by

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rozi
Rozi
2 months ago

Hi sir, i’ve problem, i try to run this project, when sensor read more then 100 degree C, but display in application, cannot read. So i change value on thermistor and resistor to be same 100K, but the application still cannot read. I hope u can give me the solution. thx

Rozi
Rozi
2 months ago
Reply to  Paulsin

Yes, sir

But when the temperature rises to more than 100 C, the android application cannot read it.

The display that appears “2734987692.0 C”

In fact, if estimated, the application displays around 130 C

Rozi
Rozi
2 months ago
Reply to  Paulsin

i am using provided code

X