Flutter API Get Request Example

Hi friends,

In this post, we will learn how to Flutter API Get Request Example. i explained simply step by step how to use get api in flutter. Here you will learn Simple How to api request flutter. This tutorial will give you simple example How to get Request api example in flutter.

I will give you simple Example of api get request example flutter.

So let's see bellow example:

Step 1 : Create Flutter Project

Follow along with the setup, you will be creating an Flutter app.

- $flutter create flutter_get_request_example

Navigate to the project directory:

- $cd flutter_get_request_example

Open pubspec.yaml in your code editor and add below plugin:

dependencies:
    flutter:
        sdk: flutter

        http: ^0.12.0+2

Step 2 : Handl GET Request

Create a http_service.dart file in the lib directory

import 'dart:convert';
// ignore: import_of_legacy_library_into_null_safe
import 'package:http/http.dart';
import 'post_model.dart';

class HttpService {
    final String postsURL = "https://jsonplaceholder.typicode.com/posts";

    Future> getPosts() async {
        Response res = await get(postsURL);

        if (res.statusCode == 200) {
            List body = jsonDecode(res.body);

            List posts = body
                .map(
                    (dynamic item) => Post.fromJson(item),
                )
              .toList();
          
            return posts;
        } else {
          throw "Sorry! Unable to get post.";
        }
    }
}

Then, create a post_model.dart file in the lib directory.

import 'package:flutter/foundation.dart';
class Post {
    final int userId;
    final int id;
    final String title;
    final String body;

    Post({
        required this.userId,
        required this.id,
        required this.title,
        required this.body,
    });

    factory Post.fromJson(Map json) {
        return Post(
            userId: json['userId'] as int,
            id: json['id'] as int,
            title: json['title'] as String,
            body: json['body'] as String,
        );
    }
}

Step 3 : Display Post Data

Next, create a posts.dart file in the lib directory

import 'package:flutter/material.dart';
import 'http_service.dart';
import 'post_model.dart';

class PostsPage extends StatelessWidget {
    final HttpService httpService = HttpService();

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("Api get request"),
            ),
            body: FutureBuilder(
                future: httpService.getPosts(),
                builder: (BuildContext context, AsyncSnapshot> snapshot) {
                    if (snapshot.hasData) {
                        List? posts = snapshot.data;
                        return ListView(
                            children: posts!
                                .map(
                                    (Post post) => ListTile(
                                        title: Text(post.title),
                                        subtitle: Text("${post.userId}"),
                                    ),
                                )
                                .toList(),
                        );
                    } else {
                        return Center(child: CircularProgressIndicator());
                    }
                },
            ),
        );
    }
}

Open lib/main.dart and modify it to use PostsPage:

import 'package:flutter/material.dart';
import 'posts.dart';

void main() {
    runApp(MyApp());
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'HTTP',
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
                primarySwatch: Colors.blue,
                visualDensity: VisualDensity.adaptivePlatformDensity,
            ),
            home: PostsPage(),
        );
    }
}

Step 4 : Run this Debug App

Output

I hope it will help you....