https://github.com/hamidhosen42/flutter-rest-api
To make REST API requests in Flutter, you can use the http package. This package provides a simple way to make HTTP requests.
https://github.com/hamidhosen42/flutter-rest-api
api rest rest-api restful restful-api
Last synced: about 1 month ago
JSON representation
To make REST API requests in Flutter, you can use the http package. This package provides a simple way to make HTTP requests.
- Host: GitHub
- URL: https://github.com/hamidhosen42/flutter-rest-api
- Owner: hamidhosen42
- Created: 2022-12-25T17:15:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-04T03:01:38.000Z (about 3 years ago)
- Last Synced: 2025-04-05T22:05:28.796Z (about 1 year ago)
- Topics: api, rest, rest-api, restful, restful-api
- Language: Dart
- Homepage:
- Size: 812 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Important Link :
- [Fake Store API](https://fakestoreapi.com/)
- [Test your front-end against a real API](https://reqres.in/)
- [JSON-VIEWeR](http://jsonviewer.stack.hu/)
- [http: ^0.13.5](https://pub.dev/packages/http)
- [{JSON} Placeholder](https://jsonplaceholder.typicode.com/)
- [Fetch data from the internet](https://docs.flutter.dev/cookbook/networking/fetch-data)
## Screenshots
### What is Server and Client?
- A server is a computer or system that provides resources, data, services, or programs to other computers, known as clients, over a network.
- Google
- Food Panda
- FaceBook
- WhatsApp
### what are APIs?
- API application programming interface
- Allow communication between client and server
### What are REST APIs?
- The representation state transfer (REST) architecture is perhaps the most populer approach to build APIs.
- REST relies on a client/server approach which separates front and back ends of the API
### USing HHTP Methods for RESTful Services
- GET
- POST
- UPDATE
- PUT
- DELETE
### How to create APIs? (Technologies used to build API's)
- Node.Js
- Laravel
## =========== JSON STRUCTURE =============
- JSON stands for JavaScript Object Notation
- JSON is a lightweight data-interchange format
- JSON is plain text written in JavaScript object notation
- JSON is used to send data between computers
- JSON is language independent \*
### JSON Values :
- a string
- a number
- an object
- an array
- a boolean
- null
### JSON STRUCTURE
```
"name":"Hamid Hosen",
"ID":"2323
```
### REST API packages
- http: ^0.13.5
### JSON DATA LOAD
```
// ignore_for_file: prefer_const_constructors, depend_on_referenced_packages, unused_local_variable, prefer_const_literals_to_create_immutables, prefer_interpolation_to_compose_strings
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_rest_api/Models/post_model.dart';
import 'package:http/http.dart' as http;
class HomeScreen extends StatefulWidget {
const HomeScreen({super.key});
@override
State createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
List postList = [];
Future> getPostApi() async {
final response =
await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
var data = jsonDecode(response.body.toString());
if (response.statusCode == 200) {
postList.clear();
for (var i in data) {
postList.add(PostsModel.fromJson(i));
}
///-------------- or -----------
return postList;
} else {
return postList;
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Rest APi"),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: FutureBuilder(
future: getPostApi(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
} else {
return ListView.builder(
shrinkWrap: true, //! must be writen-----------
itemCount: postList.length,
itemBuilder: (context, index) {
return Card(
color: Colors.grey[200],
shadowColor: Colors.deepOrange,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Titile:" + postList[index].title.toString(),
textAlign: TextAlign.justify),
Text(
"Body",
style: TextStyle(fontWeight: FontWeight.bold),
),
Text("Body:" + postList[index].body.toString(),
textAlign: TextAlign.justify),
],
),
),
);
},
);
}
},
),
),
],
),
);
}
}
```
### JSON MOdel
```
// ignore_for_file: unnecessary_new, prefer_collection_literals, unnecessary_this
class PostsModel {
int? userId;
int? id;
String? title;
String? body;
PostsModel({this.userId, this.id, this.title, this.body});
PostsModel.fromJson(Map json) {
userId = json['userId'];
id = json['id'];
title = json['title'];
body = json['body'];
}
Map toJson() {
final Map data = new Map();
data['userId'] = this.userId;
data['id'] = this.id;
data['title'] = this.title;
data['body'] = this.body;
return data;
}
}
```
### Building List with Complex JSON Data WithOut Model Flutter Get API Call
```
// ignore_for_file: prefer_const_constructors, depend_on_referenced_packages, unused_local_variable, prefer_const_literals_to_create_immutables, prefer_interpolation_to_compose_strings, unnecessary_new, prefer_collection_literals, unnecessary_this, avoid_unnecessary_containers, prefer_typing_uninitialized_variables, must_be_immutable
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class HomeScreen4 extends StatefulWidget {
const HomeScreen4({super.key});
@override
State createState() => _HomeScreenState();
}
class _HomeScreenState extends State {
var data;
Future getUserApi() async {
final response =
await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
if (response.statusCode == 200) {
data = jsonDecode(response.body.toString());
} else {}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Rest APi"),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: FutureBuilder(
future: getUserApi(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else {
return ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return Card(
child: Column(
children: [
ReusbaleRow(
title: 'Name',
value: data[index]['name'].toString(),
),
ReusbaleRow(
title: 'Username',
value: data[index]['username'].toString(),
),
ReusbaleRow(
title: 'Address',
value:
data[index]['address']['street'].toString(),
),
ReusbaleRow(
title: 'Lat',
value: data[index]['address']['geo']['lat']
.toString(),
),
ReusbaleRow(
title: 'Lat',
value: data[index]['address']['geo']['lng']
.toString(),
),
],
),
);
},
);
}
},
),
),
],
),
);
}
}
class ReusbaleRow extends StatelessWidget {
String title, value;
ReusbaleRow({Key? key, required this.title, required this.value})
: super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(title),
Text(value),
],
),
);
}
}
```
### ====================== POST APIS ==================
### Login and Sign Up with REST API
```
// ignore_for_file: prefer_final_fields, prefer_const_constructors, unused_local_variable, avoid_print
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart';
class SignInScreen extends StatefulWidget {
const SignInScreen({super.key});
@override
State createState() => _SignUpScreenState();
}
class _SignUpScreenState extends State {
TextEditingController _emailController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
final _formKey = GlobalKey();
void login(String email, password) async {
try {
Response response = await post(
Uri.parse("https://reqres.in/api/login"),
body: {"email": email, "password": password});
if (response.statusCode == 200) {
var data = jsonDecode(response.body.toString());
print(data);
print("Account create successfuly");
} else {
print("Failed");
}
} catch (e) {
print(e.toString());
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sign In API"),
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
height: 200,
),
Form(
key: _formKey,
child: Column(
children: [
TextFormField(
onChanged: (value) {
//Do something with the user input.
},
validator: (value) {
if (value == null || value.isEmpty) {
return "Enter Email";
} else {
return null;
}
},
controller: _emailController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: 'Enter your email',
suffixIcon: Icon(
Icons.email_outlined,
color: Colors.deepPurple,
),
prefixIcon: Icon(
Icons.person,
color: Colors.deepPurple,
),
contentPadding:
EdgeInsets.symmetric(vertical: 20, horizontal: 20),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.deepPurple, width: 1),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.deepPurple, width: 2),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
),
SizedBox(
height: 10,
),
TextFormField(
onChanged: (value) {
//Do something with the user input.
},
validator: (value) {
if (value == null || value.isEmpty) {
return "Enter Password";
} else {
return null;
}
},
controller: _passwordController,
keyboardType: TextInputType.text,
obscureText: true,
decoration: InputDecoration(
hintText: 'Enter your password',
suffixIcon: Icon(
Icons.remove_red_eye_sharp,
color: Colors.deepPurple,
),
prefixIcon: Icon(
Icons.lock_open_outlined,
color: Colors.deepPurple,
),
contentPadding:
EdgeInsets.symmetric(vertical: 20, horizontal: 20),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.deepPurple, width: 1),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.deepPurple, width: 2),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
),
),
],
),
),
SizedBox(
height: 20,
),
GestureDetector(
onTap: () {
login(_emailController.text.toString(),
_passwordController.text.toString());
},
child: Container(
height: 50,
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(10)),
child: Center(
child: Text(
"Sign In",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 22),
)),
),
),
],
),
),
),
);
}
}
```
### Upload Image
```
// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, unused_field, avoid_unnecessary_containers, unused_local_variable, avoid_print, unnecessary_new
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';
import 'package:http/http.dart' as http;
class UploadImageScreen extends StatefulWidget {
const UploadImageScreen({super.key});
@override
State createState() => _UploadImageScreenState();
}
class _UploadImageScreenState extends State {
File? image;
final _picker = ImagePicker();
bool showSpinner = false;
Future getImage() async {
final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
if (pickedFile != null) {
image = File(pickedFile.path);
setState(() {});
} else {
print("No image selected");
}
}
Future uploadImage() async {
setState(() {
showSpinner = true;
});
var stream = new http.ByteStream(image!.openRead());
stream.cast();
var length = await image!.length();
var uri = Uri.parse("https://fakestoreapi.com/products");
var request = new http.MultipartRequest('POST', uri);
request.fields['title'] = "Static title";
var multiport = new http.MultipartFile('image', stream, length);
request.files.add(multiport);
var response = await request.send();
print(response.stream.toString());
if (response.statusCode == 200) {
setState(() {
showSpinner = false;
});
print('image uploaded');
} else {
print('failed');
setState(() {
showSpinner = false;
});
}
}
@override
Widget build(BuildContext context) {
return ModalProgressHUD(
inAsyncCall: showSpinner,
child: Scaffold(
appBar: AppBar(
title: Text("Upload Image"),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GestureDetector(
onTap: () {
getImage();
},
child: Container(
child: image == null
? Center(
child: Text("Pick Image"),
)
: Container(
child: Center(
child: Image.file(
File(image!.path).absolute,
height: 100,
width: 100,
fit: BoxFit.cover,
),
),
),
),
),
SizedBox(
height: 150,
),
GestureDetector(
onTap: () {
uploadImage();
},
child: Container(
height: 50,
width: 200,
color: Colors.green,
child: Center(child: Text('Upload')),
),
)
],
),
),
);
}
}
```