{"id":18928707,"url":"https://github.com/hamidhosen42/flutter-rest-api","last_synced_at":"2026-03-09T17:13:31.565Z","repository":{"id":65110253,"uuid":"582100384","full_name":"hamidhosen42/Flutter-REST-API","owner":"hamidhosen42","description":"To make REST API requests in Flutter, you can use the http package. This package provides a simple way to make HTTP requests.","archived":false,"fork":false,"pushed_at":"2023-02-04T03:01:38.000Z","size":831,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T22:05:28.796Z","etag":null,"topics":["api","rest","rest-api","restful","restful-api"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hamidhosen42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-12-25T17:15:21.000Z","updated_at":"2024-10-31T16:41:22.000Z","dependencies_parsed_at":"2023-02-18T13:16:25.411Z","dependency_job_id":null,"html_url":"https://github.com/hamidhosen42/Flutter-REST-API","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hamidhosen42/Flutter-REST-API","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2FFlutter-REST-API","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2FFlutter-REST-API/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2FFlutter-REST-API/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2FFlutter-REST-API/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hamidhosen42","download_url":"https://codeload.github.com/hamidhosen42/Flutter-REST-API/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamidhosen42%2FFlutter-REST-API/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273707148,"owners_count":25153705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-05T02:00:09.113Z","response_time":402,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","rest","rest-api","restful","restful-api"],"created_at":"2024-11-08T11:27:16.089Z","updated_at":"2026-03-09T17:13:31.520Z","avatar_url":"https://github.com/hamidhosen42.png","language":"Dart","readme":"### Important Link :\n- [Fake Store API](https://fakestoreapi.com/)\n- [Test your front-end against a real API](https://reqres.in/)\n- [JSON-VIEWeR](http://jsonviewer.stack.hu/)\n- [http: ^0.13.5](https://pub.dev/packages/http)\n- [{JSON} Placeholder](https://jsonplaceholder.typicode.com/)\n- [Fetch data from the internet](https://docs.flutter.dev/cookbook/networking/fetch-data)\n\n\n## Screenshots\n\u003cimg src=\"./assets/get_api_screen1.png\" width=200\u003e \u003cimg src=\"./assets/get_api_screen2.png\" width=200\u003e \u003cimg src=\"./assets/get_api_screen3.png\" width=200\u003e \n\u003cimg src=\"./assets/get_api_screen4.png\" width=200\u003e\u003cimg src=\"./assets/get_api_screen4.png\" width=200\u003e \u003cimg src=\"./assets/post_sign_in_screen.png\" width=200\u003e \n\u003cimg src=\"./assets/post_sign_up_screen.png\" width=200\u003e \u003cimg src=\"./assets/pos_api_upload_image.png\" width=200\u003e \n\n### What is Server and Client?\n\n- A server is a computer or system that provides resources, data, services, or programs to other computers, known as clients, over a network.\n\n- Google\n- Food Panda\n- FaceBook\n- WhatsApp\n\n### what are APIs?\n\n- API application programming interface\n- Allow communication between client and server\n\n### What are REST APIs?\n\n- The representation state transfer (REST) architecture is perhaps the most populer approach to build APIs.\n- REST relies on a client/server approach which separates front and back ends of the API\n\n### USing HHTP Methods for RESTful Services\n\n- GET\n- POST\n- UPDATE\n- PUT\n- DELETE\n\n### How to create APIs? (Technologies used to build API's)\n\n- Node.Js\n- Laravel\n\n## =========== JSON STRUCTURE =============\n\n- JSON stands for JavaScript Object Notation\n- JSON is a lightweight data-interchange format\n- JSON is plain text written in JavaScript object notation\n- JSON is used to send data between computers\n- JSON is language independent \\*\n\n### JSON Values :\n\n- a string\n- a number\n- an object\n- an array\n- a boolean\n- null\n\n### JSON STRUCTURE\n\n```\n\"name\":\"Hamid Hosen\",\n\"ID\":\"2323\n```\n\n### REST API packages\n\n- http: ^0.13.5\n\n### JSON DATA LOAD\n\n```\n// ignore_for_file: prefer_const_constructors, depend_on_referenced_packages, unused_local_variable, prefer_const_literals_to_create_immutables, prefer_interpolation_to_compose_strings\n\nimport 'dart:convert';\n\nimport 'package:flutter/material.dart';\nimport 'package:flutter_rest_api/Models/post_model.dart';\nimport 'package:http/http.dart' as http;\n\nclass HomeScreen extends StatefulWidget {\n  const HomeScreen({super.key});\n\n  @override\n  State\u003cHomeScreen\u003e createState() =\u003e _HomeScreenState();\n}\n\nclass _HomeScreenState extends State\u003cHomeScreen\u003e {\n  List\u003cPostsModel\u003e postList = [];\n\n  Future\u003cList\u003cPostsModel\u003e\u003e getPostApi() async {\n    final response =\n        await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));\n    var data = jsonDecode(response.body.toString());\n\n    if (response.statusCode == 200) {\n      postList.clear();\n\n      for (var i in data) {\n        postList.add(PostsModel.fromJson(i));\n      }\n\n      ///-------------- or -----------\n\n      \u003c!-- for (var i in data) {\n        Photos photos = Photos(\n            albumId: i['albumId'],\n            id: i['id'],\n            title:i['title'],\n            url: i['url'],\n            thumbnailUrl: i['thumbnailUrl']);\n        photosList.add(photos);\n      } --\u003e\n\n      return postList;\n    } else {\n      return postList;\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(\"Rest APi\"),\n        centerTitle: true,\n      ),\n      body: Column(\n        mainAxisAlignment: MainAxisAlignment.center,\n        crossAxisAlignment: CrossAxisAlignment.center,\n        children: [\n          Expanded(\n            child: FutureBuilder(\n              future: getPostApi(),\n              builder: (context, snapshot) {\n                if (!snapshot.hasData) {\n                  return Center(child: CircularProgressIndicator());\n                } else {\n                  return ListView.builder(\n                    shrinkWrap: true, //! must be writen-----------\n                    itemCount: postList.length,\n                    itemBuilder: (context, index) {\n                      return Card(\n                        color: Colors.grey[200],\n                        shadowColor: Colors.deepOrange,\n                        child: Padding(\n                          padding: const EdgeInsets.all(10.0),\n                          child: Column(\n                            mainAxisAlignment: MainAxisAlignment.start,\n                            crossAxisAlignment: CrossAxisAlignment.start,\n                            children: [\n                              \n                              Text(\"Titile:\" + postList[index].title.toString(),\n                                  textAlign: TextAlign.justify),\n                              Text(\n                                \"Body\",\n                                style: TextStyle(fontWeight: FontWeight.bold),\n                              ),\n                              Text(\"Body:\" + postList[index].body.toString(),\n                                  textAlign: TextAlign.justify),\n                            ],\n                          ),\n                        ),\n                      );\n                    },\n                  );\n                }\n              },\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n```\n### JSON MOdel\n\n```\n// ignore_for_file: unnecessary_new, prefer_collection_literals, unnecessary_this\n\nclass PostsModel {\n  int? userId;\n  int? id;\n  String? title;\n  String? body;\n\n  PostsModel({this.userId, this.id, this.title, this.body});\n\n  PostsModel.fromJson(Map\u003cString, dynamic\u003e json) {\n    userId = json['userId'];\n    id = json['id'];\n    title = json['title'];\n    body = json['body'];\n  }\n\n  Map\u003cString, dynamic\u003e toJson() {\n    final Map\u003cString, dynamic\u003e data = new Map\u003cString, dynamic\u003e();\n    data['userId'] = this.userId;\n    data['id'] = this.id;\n    data['title'] = this.title;\n    data['body'] = this.body;\n    return data;\n  }\n}\n```\n\n### Building List with Complex JSON Data WithOut Model Flutter Get API Call\n\n```\n// 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\n\nimport 'dart:convert';\n\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart' as http;\n\nclass HomeScreen4 extends StatefulWidget {\n  const HomeScreen4({super.key});\n\n  @override\n  State\u003cHomeScreen4\u003e createState() =\u003e _HomeScreenState();\n}\n\nclass _HomeScreenState extends State\u003cHomeScreen4\u003e {\n  var data;\n\n  Future\u003cvoid\u003e getUserApi() async {\n    final response =\n        await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));\n\n    if (response.statusCode == 200) {\n      data = jsonDecode(response.body.toString());\n    } else {}\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(\"Rest APi\"),\n        centerTitle: true,\n      ),\n      body: Column(\n        mainAxisAlignment: MainAxisAlignment.center,\n        crossAxisAlignment: CrossAxisAlignment.center,\n        children: [\n          Expanded(\n            child: FutureBuilder(\n              future: getUserApi(),\n              builder: (context, snapshot) {\n                if (snapshot.connectionState == ConnectionState.waiting) {\n                  return Center(child: CircularProgressIndicator());\n                } else {\n                  return ListView.builder(\n                    itemCount: data.length,\n                    itemBuilder: (context, index) {\n                      return Card(\n                        child: Column(\n                          children: [\n                            ReusbaleRow(\n                              title: 'Name',\n                              value: data[index]['name'].toString(),\n                            ),\n                            ReusbaleRow(\n                              title: 'Username',\n                              value: data[index]['username'].toString(),\n                            ),\n                            ReusbaleRow(\n                              title: 'Address',\n                              value:\n                                  data[index]['address']['street'].toString(),\n                            ),\n                            ReusbaleRow(\n                              title: 'Lat',\n                              value: data[index]['address']['geo']['lat']\n                                  .toString(),\n                            ),\n                            ReusbaleRow(\n                              title: 'Lat',\n                              value: data[index]['address']['geo']['lng']\n                                  .toString(),\n                            ),\n                          ],\n                        ),\n                      );\n                    },\n                  );\n                }\n              },\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n\nclass ReusbaleRow extends StatelessWidget {\n  String title, value;\n  ReusbaleRow({Key? key, required this.title, required this.value})\n      : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Padding(\n      padding: const EdgeInsets.all(8.0),\n      child: Row(\n        mainAxisAlignment: MainAxisAlignment.spaceBetween,\n        children: [\n          Text(title),\n          Text(value),\n        ],\n      ),\n    );\n  }\n}\n```\n\n### ====================== POST APIS ==================\n\n### Login and Sign Up with REST API\n\n```\n// ignore_for_file: prefer_final_fields, prefer_const_constructors, unused_local_variable, avoid_print\nimport 'dart:convert';\n\nimport 'package:flutter/material.dart';\nimport 'package:http/http.dart';\n\nclass SignInScreen extends StatefulWidget {\n  const SignInScreen({super.key});\n\n  @override\n  State\u003cSignInScreen\u003e createState() =\u003e _SignUpScreenState();\n}\n\nclass _SignUpScreenState extends State\u003cSignInScreen\u003e {\n  TextEditingController _emailController = TextEditingController();\n  TextEditingController _passwordController = TextEditingController();\n  final _formKey = GlobalKey\u003cFormState\u003e();\n\n  void login(String email, password) async {\n    try {\n      Response response = await post(\n          Uri.parse(\"https://reqres.in/api/login\"),\n          body: {\"email\": email, \"password\": password});\n\n      if (response.statusCode == 200) {\n        var data = jsonDecode(response.body.toString());\n        print(data);\n        print(\"Account create successfuly\");\n      } else {\n        print(\"Failed\");\n      }\n    } catch (e) {\n      print(e.toString());\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(\"Sign In API\"),\n        centerTitle: true,\n      ),\n      body: Padding(\n        padding: const EdgeInsets.symmetric(horizontal: 20),\n        child: SingleChildScrollView(\n          child: Column(\n            mainAxisAlignment: MainAxisAlignment.center,\n            crossAxisAlignment: CrossAxisAlignment.center,\n            children: [\n              SizedBox(\n                height: 200,\n              ),\n              Form(\n                key: _formKey,\n                child: Column(\n                  children: [\n                    TextFormField(\n                      onChanged: (value) {\n                        //Do something with the user input.\n                      },\n                      validator: (value) {\n                        if (value == null || value.isEmpty) {\n                          return \"Enter Email\";\n                        } else {\n                          return null;\n                        }\n                      },\n                      controller: _emailController,\n                      keyboardType: TextInputType.emailAddress,\n                      decoration: InputDecoration(\n                        hintText: 'Enter your email',\n                        suffixIcon: Icon(\n                          Icons.email_outlined,\n                          color: Colors.deepPurple,\n                        ),\n                        prefixIcon: Icon(\n                          Icons.person,\n                          color: Colors.deepPurple,\n                        ),\n                        contentPadding:\n                            EdgeInsets.symmetric(vertical: 20, horizontal: 20),\n                        border: OutlineInputBorder(\n                          borderRadius: BorderRadius.all(Radius.circular(10)),\n                        ),\n                        enabledBorder: OutlineInputBorder(\n                          borderSide:\n                              BorderSide(color: Colors.deepPurple, width: 1),\n                          borderRadius: BorderRadius.all(Radius.circular(10)),\n                        ),\n                        focusedBorder: OutlineInputBorder(\n                          borderSide:\n                              BorderSide(color: Colors.deepPurple, width: 2),\n                          borderRadius: BorderRadius.all(Radius.circular(10)),\n                        ),\n                      ),\n                    ),\n                    SizedBox(\n                      height: 10,\n                    ),\n                    TextFormField(\n                      onChanged: (value) {\n                        //Do something with the user input.\n                      },\n                      validator: (value) {\n                        if (value == null || value.isEmpty) {\n                          return \"Enter Password\";\n                        } else {\n                          return null;\n                        }\n                      },\n                      controller: _passwordController,\n                      keyboardType: TextInputType.text,\n                      obscureText: true,\n                      decoration: InputDecoration(\n                        hintText: 'Enter your password',\n                        suffixIcon: Icon(\n                          Icons.remove_red_eye_sharp,\n                          color: Colors.deepPurple,\n                        ),\n                        prefixIcon: Icon(\n                          Icons.lock_open_outlined,\n                          color: Colors.deepPurple,\n                        ),\n                        contentPadding:\n                            EdgeInsets.symmetric(vertical: 20, horizontal: 20),\n                        border: OutlineInputBorder(\n                          borderRadius: BorderRadius.all(Radius.circular(10)),\n                        ),\n                        enabledBorder: OutlineInputBorder(\n                          borderSide:\n                              BorderSide(color: Colors.deepPurple, width: 1),\n                          borderRadius: BorderRadius.all(Radius.circular(10)),\n                        ),\n                        focusedBorder: OutlineInputBorder(\n                          borderSide:\n                              BorderSide(color: Colors.deepPurple, width: 2),\n                          borderRadius: BorderRadius.all(Radius.circular(10)),\n                        ),\n                      ),\n                    ),\n                  ],\n                ),\n              ),\n              SizedBox(\n                height: 20,\n              ),\n              GestureDetector(\n                onTap: () {\n                  login(_emailController.text.toString(),\n                      _passwordController.text.toString());\n                },\n                child: Container(\n                  height: 50,\n                  decoration: BoxDecoration(\n                      color: Colors.deepPurple,\n                      borderRadius: BorderRadius.circular(10)),\n                  child: Center(\n                      child: Text(\n                    \"Sign In\",\n                    style: TextStyle(\n                        color: Colors.white,\n                        fontWeight: FontWeight.bold,\n                        fontSize: 22),\n                  )),\n                ),\n              ),\n            ],\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n### Upload Image\n\n```\n// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables, unused_field, avoid_unnecessary_containers, unused_local_variable, avoid_print, unnecessary_new\n\nimport 'dart:io';\n\nimport 'package:flutter/material.dart';\nimport 'package:image_picker/image_picker.dart';\nimport 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';\nimport 'package:http/http.dart' as http;\n\nclass UploadImageScreen extends StatefulWidget {\n  const UploadImageScreen({super.key});\n\n  @override\n  State\u003cUploadImageScreen\u003e createState() =\u003e _UploadImageScreenState();\n}\n\nclass _UploadImageScreenState extends State\u003cUploadImageScreen\u003e {\n  File? image;\n  final _picker = ImagePicker();\n  bool showSpinner = false;\n\n  Future getImage() async {\n    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);\n\n    if (pickedFile != null) {\n      image = File(pickedFile.path);\n      setState(() {});\n    } else {\n      print(\"No image selected\");\n    }\n  }\n\n  Future\u003cvoid\u003e uploadImage() async {\n    setState(() {\n      showSpinner = true;\n    });\n\n    var stream = new http.ByteStream(image!.openRead());\n    stream.cast();\n\n    var length = await image!.length();\n\n    var uri = Uri.parse(\"https://fakestoreapi.com/products\");\n\n    var request = new http.MultipartRequest('POST', uri);\n\n    request.fields['title'] = \"Static title\";\n\n    var multiport = new http.MultipartFile('image', stream, length);\n\n    request.files.add(multiport);\n\n    var response = await request.send();\n\n    print(response.stream.toString());\n    if (response.statusCode == 200) {\n      setState(() {\n        showSpinner = false;\n      });\n      print('image uploaded');\n    } else {\n      print('failed');\n      setState(() {\n        showSpinner = false;\n      });\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return ModalProgressHUD(\n      inAsyncCall: showSpinner,\n      child: Scaffold(\n        appBar: AppBar(\n          title: Text(\"Upload Image\"),\n          centerTitle: true,\n        ),\n        body: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          crossAxisAlignment: CrossAxisAlignment.center,\n          children: [\n            GestureDetector(\n              onTap: () {\n                getImage();\n              },\n              child: Container(\n                child: image == null\n                    ? Center(\n                        child: Text(\"Pick Image\"),\n                      )\n                    : Container(\n                        child: Center(\n                          child: Image.file(\n                            File(image!.path).absolute,\n                            height: 100,\n                            width: 100,\n                            fit: BoxFit.cover,\n                          ),\n                        ),\n                      ),\n              ),\n            ),\n            SizedBox(\n              height: 150,\n            ),\n            GestureDetector(\n              onTap: () {\n                uploadImage();\n              },\n              child: Container(\n                height: 50,\n                width: 200,\n                color: Colors.green,\n                child: Center(child: Text('Upload')),\n              ),\n            )\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamidhosen42%2Fflutter-rest-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamidhosen42%2Fflutter-rest-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamidhosen42%2Fflutter-rest-api/lists"}