Flutter Retrofit GET | Flutter tutorial on retrofit GET Request Method

Flutter Retrofit GET :

Flutter retrofit GET request method is used to populate data by making a network call.GET is a HTTP Request annotation used to fetch the data there are eight different annotation we will be seeing in coming tutorials.

Annotations are used to specify what type of request we are handling currently which is specified by ‘@’, they are specified on interface methods.

In GET request we don’t provide any values to api and just make a call with api and fetch the results based on the status code.

In most of the apps now a days we have network calls out of which majority calls are of type GET request.

GET request are mostly used to get the default app data for example apps like news paper apps, gold, silver, petrol price apps fetch the data which is common to every one.

 

A sample get request where we have provided a annotation for flutter retrofit GET.

@GET("/indent=2")


Flutter Retrofit GET Video Tutorial :

Go through below tutorial for Retrofit GET implementation in flutter.

 

Project Structure :

The project structure is depicted in the below image showing the folder structure.

flutter retrofit GET

 

pubspec.yaml :

Add dependency’s retrofit and json annotation and provide the latest versions available.

dependencies:
  flutter:
    sdk: flutter
  retrofit: any
  json_annotation: any

 

Add dev dependency retrofit_generator and build_runner

dev_dependencies:
  flutter_test:
    sdk: flutter
  retrofit_generator: any
  build_runner: any

 

post_api.dart :

Specify the base url

baseUrl: "http://www.json-generator.com/api/json/get/cffBLmFKeW?"

 

GET Request Method

@GET("/indent=2")
Future<Post> getTasks();

 

Declare variables name and age

String name;
int age;

 

Declare the constructor with parameters

Post({this.name, this.age});

 

Fetch the data and post the data using the variables

factory Post.fromJson(Map<String, dynamic> json) =>  _$PostFromJson(json);
Map<String, dynamic> toJson() => _$PostToJson(this);

 

Full code for post api

 

import 'package:json_annotation/json_annotation.dart';
import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart';

part 'post_api.g.dart';

@RestApi(baseUrl: "http://www.json-generator.com/api/json/get/cffBLmFKeW?")
abstract class RestClient {
  factory RestClient(Dio dio) = _RestClient;
  @GET("/indent=2")
  Future<Post> getTasks();
}

@JsonSerializable()
class Post{
  String name;
  int age;


  Post({this.name, this.age});

  factory Post.fromJson(Map<String, dynamic> json) =>  _$PostFromJson(json);
  Map<String, dynamic> toJson() => _$PostToJson(this);
}




 

post_api.g.dart :

Generate the file with the retrofit generator to make a flutter retrofit GET request

 

Dart :

pub run build_runner build

Flutter :

flutter pub run build_runner build

 

import 'package:json_annotation/json_annotation.dart';
import 'package:retrofit/retrofit.dart';
import 'package:dio/dio.dart';

part 'post_api.g.dart';

@RestApi(baseUrl: "http://www.json-generator.com/api/json/get/cffBLmFKeW?")
abstract class RestClient {
  factory RestClient(Dio dio) = _RestClient;
  @GET("/indent=2")
  Future<Post> getTasks();
}

@JsonSerializable()
class Post{
  String name;
  int age;


  Post({this.name, this.age});

  factory Post.fromJson(Map<String, dynamic> json) =>  _$PostFromJson(json);
  Map<String, dynamic> toJson() => _$PostToJson(this);
}



main.dart :

Providing the full code for flutter retrofit GET request, we have provided the basic UI using which we can populate the data  on to the screen.

A circular progress indicator is displayed on to the screen until the data is loaded.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_retrofit_get/post_api.dart';

import 'package:dio/dio.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Retrofit Get Call"),
      ),
      body: _buildBody(context),
    );
  }
}

FutureBuilder<Post> _buildBody(BuildContext context) {
  final client = RestClient(Dio(BaseOptions(contentType: "application/json")));
  return FutureBuilder<Post>(
    future: client.getTasks(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        final Post posts = snapshot.data;
        return _buildPosts(context, posts);
      } else {
        return Center(
          child: CircularProgressIndicator(),
        );
      }
    },
  );
}

Widget _buildPosts(BuildContext context, Post posts) {
  return Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[

          Text("Name : "+posts.name,style: TextStyle(fontSize: 30),),
          Text("Age : "+posts.age.toString(),style: TextStyle(fontSize: 30),),
        ],
      ),
  );

}

 

Flutter Retrofit GET Output :

This screen depicts flutter retrofit GET request method

flutter retrofit GET

 

Show Buttons
Hide Buttons
Read previous post:
Android RecyclerView search tutorial for beginners

  Android Recyclerview Search : Android Recyclerview Search is used to filter the data populated through the recycler view.The best...

Close