In this section, we are going to learn how we can access the REST API in the Flutter app. Today, most of the apps use remote data using APIs. So, this section will be the important part for those developers who want to make their carrier in Flutter.<\/p>\n\n\n\n
Flutter provides http package<\/strong> to use http resources. The http package uses await<\/strong> and async<\/strong> features and provides many high-level methods such as read, get, post, put, head, and delete methods for sending and receiving data from remote locations. These methods simplify the development of REST-based mobile applications.<\/p>\n\n\n\n The detail explanation of the core methods of the http package are as follows:<\/p>\n\n\n\n Read:<\/strong> This method is used to read or retrieve the representation of resources. It requests the specified url by using the get method and returns the response as Future<String>.<\/p>\n\n\n\n Get:<\/strong> This method requests the specified url from the get method and returns a response as Future<response>. Here, the response is a class, which holds the response information.<\/p>\n\n\n\n Post:<\/strong> This method is used to submit the data to the specified resources. It requests the specified url by posting the given data and return a response as Future<response>.<\/p>\n\n\n\n Put:<\/strong> This method is utilized for update capabilities. It updates all the current representation of the target resource with the request payloads. This method request the specified url and returns a response as Future<response><\/strong>.<\/p>\n\n\n\n Head:<\/strong> It is similar to the Get method, but without the response body.<\/p>\n\n\n\n Delete:<\/strong> This method is used to remove all the specified resources.<\/p>\n\n\n\n The http package also provides a standard http client class<\/strong> that supports the persistent connection. This class is useful when a lot of requests to be made on a particular server. It should be closed properly using the close<\/strong>() method. Otherwise, it works as an http class. The following code explains it more clearly.<\/a><\/a><\/a><\/p>\n\n\n\n To fetch<\/strong> data from the internet, you need to follow these necessary steps:<\/p>\n\n\n\n Step 1:<\/strong> Install the latest http package and add it to the project.<\/p>\n\n\n\n To install the http package, open the\u00a0pubspec.yaml<\/strong>\u00a0file in your project folder and add http package in the\u00a0dependency<\/strong>\u00a0section. You can get the latest http package\u00a0here\u00a0and add it like:<\/a><\/a><\/a><\/p>\n\n\n\n You can import<\/strong> the http package as:<\/a><\/a><\/a><\/p>\n\n\n\n Step 2:<\/strong> Next, make a network request by using the http package.<\/p>\n\n\n\n In this step, you need to make a network request by using the http.get()<\/strong> method<\/a><\/a><\/a><\/p>\n\n\n\n In the above code, the Future<\/strong> is a class that contains an object. The object represents a potential value or error.<\/p>\n\n\n\n Step 3:<\/strong> Now, convert the response getting from network request into a custom Dart object.<\/p>\n\n\n\n First, you need to create a Post class<\/strong>. The Post class received data from the network request and includes a factory constructor, which creates Post from JSON. You can create a Post class as below:<\/a><\/a><\/a><\/p>\n\n\n\n Now, you have to convert the http.response<\/strong> to a Post. The following code updates the fetchPost() <\/strong>function for returning a Future<Post>.<\/a><\/a><\/a><\/p>\n\n\n\n Step 4:<\/strong> Now, fetch the data with Flutter. You can call the fetch method in the initState()<\/strong>. The following code explains how you can fetch the data.<\/a><\/a><\/a><\/p>\n\n\n\n Step 5:<\/strong> Finally, display the data. You can display the data by using the FutureBuilder<\/strong> widget. This widget can work easily with async data sources.<\/a><\/a><\/a><\/p>\n\n\n\n Let us see the complete code to understand how Flutter works with REST API to fetch data from the network. You can learn more in detail from here.<\/a><\/a><\/a> <\/span><\/p>\n\n\n\n The JSON file is shown below.<\/a><\/a><\/a><\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" In this section, we are going to learn how we can access the REST API in the Flutter app. Today, most of the apps use remote data using APIs. So, this section will be the important part for those developers who want to make their carrier in Flutter. Flutter provides http package to use http resources. The […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[599],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2123"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2123"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2123\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}var client = new http.Client(); \ntry { \n print(await client.get('https:\/\/www.javatpoint.com\/')); \n} \nfinally { \n client.close(); \n} <\/code><\/pre>\n\n\n\ndependencies: \n http: <latest_version> <\/code><\/pre>\n\n\n\nimport 'package:http\/http.dart' as http; <\/code><\/pre>\n\n\n\nFuture<http.Response> fetchPost() { \n return http.get('https:\/\/jsonplaceholder.typicode.com\/posts\/1'); \n} <\/code><\/pre>\n\n\n\nclass Post { \n final int userId; \n final int id; \n final String title; \n final String body; \n \n Post({this.userId, this.id, this.title, this. description}); \n \n factory Post.fromJson(Map<String, dynamic> json) { \n return Post( \n userId: json['userId'], \n id: json['id'], \n title: json['title'], \n description: json['description'], \n ); \n } \n} <\/code><\/pre>\n\n\n\nFuture<Post> fetchPost() async { \n final response = await http.get( Give the link of JSON file'); \n \n if (response.statusCode == 200) { \n \/\/ If the server returns an OK response, then parse the JSON. \n return Post.fromJson(json.decode(response.body)); \n } else { \n \/\/ If the response was umexpected, throw an error. \n throw Exception('Failed to load post'); \n } \n} <\/code><\/pre>\n\n\n\nclass _MyAppState extends State<MyApp> { \n Future<Post> post; \n \n @override \n void initState() { \n super.initState(); \n post = fetchPost(); \n } <\/code><\/pre>\n\n\n\nFutureBuilder<Post>( \n future: post, \n builder: (context, abc) { \n if (abc.hasData) { \n return Text(abc.data.title); \n } else if (abc.hasError) { \n return Text(\"${abc.error}\"); \n } \n \n \/\/ By default, it show a loading spinner. \n return CircularProgressIndicator(); \n }, \n); <\/code><\/pre>\n\n\n\nimport 'dart:async'; \nimport 'dart:convert'; \n \nimport 'package:flutter\/material.dart'; \nimport 'package:http\/http.dart' as http; \n \nvoid main() => runApp(MyApp()); \n \nclass MyApp extends StatefulWidget { \n MyApp({Key key}) : super(key: key); \n \n @override \n _MyAppState createState() => _MyAppState(); \n} \n \nclass _MyAppState extends State<MyApp> { \nFuture<Post> post; \n \n @override \n void initState() { \n super.initState(); \n post = fetchPost(); \n } \n \n @override \n Widget build(BuildContext context) { \n return MaterialApp( \n title: 'Flutter REST API Example', \n theme: ThemeData( \n primarySwatch: Colors.green, \n ), \n home: Scaffold( \n appBar: AppBar( \n title: Text('Flutter REST API Example'), \n ), \n body: Center( \n child: FutureBuilder<Post>( \n future: post, \n builder: (context, abc) { \n if (abc.hasData) { \n return Text(abc.data.title); \n } else if (abc.hasError) { \n return Text(\"${abc.error}\"); \n } \n \n \/\/ By default, it show a loading spinner. \n return CircularProgressIndicator(); \n }, \n ), \n ), \n ), \n ); \n } \n} \n \nFuture<Post> fetchPost() async { \n final response = await http.get('Give your JSON file web link.'); \n \n if (response.statusCode == 200) { \n \/\/ If the call to the server was successful (returns OK), parse the JSON. \n return Post.fromJson(json.decode(response.body)); \n } else { \n \/\/ If that call was not successful (response was unexpected), it throw an error. \n throw Exception('Failed to load post'); \n } \n} \n \nclass Post { \n final int userId; \n final int id; \n final String title; \n final String description; \n \n Post({this.userId, this.id, this.title, this. description}); \n \n factory Post.fromJson(Map<String, dynamic> json) { \n return Post( \n userId: json['userId'], \n id: json['id'], \n title: json['title'], \n description: json[' description'], \n ); \n } \n} <\/code><\/pre>\n\n\n\n[ \n { \n \"userId\": 01, \n \"id\": 1, \n \"title\": \"iPhone\", \n \"description\": \"iPhone is the very stylist phone ever\" \n }, \n { \n \"userId\": 02, \n \"id\": 2, \n \"title\": \"Pixel\", \n \"description\": \"Pixel is the most feature phone ever\" \n }, \n { \n \"userId\": 03, \n \"id\": 3, \n \"title\": \"Laptop\", \n \"description\": \"Laptop is most popular development tool\" \n }, \n { \n \"userId\": 04, \n \"id\": 4, \n \"title\": \"Tablet\", \n \"description\": \"Tablet is the most useful device used for meeting\" \n } \n]<\/code><\/pre>\n\n\n\n