body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f2f2f2;
}
h1, h2, p {
margin-bottom: 20px;
}
code {
background-color: #f2f2f2;
padding: 5px;
}
.code-block {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
Node JS GET REST API | Flutter Node JS Backend | Fetch Data using API | Flutter Tutorial
Introduction
In this tutorial, we will learn how to create a REST API using Node.js and how to fetch data from this API in a Flutter app. We will create a simple Node.js backend that exposes a GET endpoint and then build a Flutter app that consumes this API to fetch and display data.
Creating a Node.js REST API
First, we need to create a Node.js backend that will serve as our API. We can use the express framework to create a simple REST API. Make sure to have Node.js and npm installed on your system.
const express = require('express');
const app = express();
app.get('/api/data', (req, res) => {
const data = {
id: 1,
name: 'John Doe',
email: 'john.doe@example.com'
};
res.json(data);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Fetching Data in a Flutter App
Now that we have our Node.js backend set up, we can move on to building a Flutter app that will consume the API and display the fetched data. We can use the http package in Flutter to make network requests to our Node.js server.
import 'package:http/http.dart' as http;
import 'dart:convert';
Future<Map> fetchData() async {
final response = await http.get('http://localhost:3000/api/data');
if (response.statusCode == 200) {
return json.decode(response.body);
} else {
throw Exception('Failed to load data');
}
}
Conclusion
In this tutorial, we learned how to create a simple Node.js backend that serves a REST API and how to fetch data from this API in a Flutter app. We used the express framework to create the backend and the http package in Flutter to make network requests. This is just a basic example, but it should give you a good starting point for building more complex applications.
well explained brother keep it up.❤❤
flutter: {pname: 333333333, pprice: 33333333, pdesc: 33333333}
flutter: ClientException with SocketException: The remote computer refused the network connection.
flutter: (OS Error: The remote computer refused the network connection.
flutter: , errno = 1225), address = localhost, port = 64025, uri=http://localhost/api/add_product
i get this problem, the request isn't posted in my humble opinion. could ya plz tell ?
I if run the code after doing everything, i get an error of "type null is not a subtype of a type bool"
If you really want to learn using NodeJS with Flutter you should avoid this channel.
my fetch data screen keeps on loading continously but fetch api is working fine in thunderclient what should i do now ?
🔥🔥
Plz can i have source code
Please continue this tutorial.. It's splendid
bhai is code ka source code de do pta nhi kha error aa rha hai (iska nhi ) >>>> iska https://www.youtube.com/watch?v=AOpsCgjOIW8 Flutter fetch data from API | Flutter HTTP Get Request | Flutter API call | Flutter Rest API iska source code de do please