Flutter Retrofit GET | Flutter tutorial on retrofit GET Request Method

Flutter Retrofit GET :

Elevate your Flutter app’s networking capabilities with Retrofit’s potent GET method. This comprehensive guide delves into implementing and optimizing Retrofit GET requests in Flutter, empowering developers to seamlessly integrate APIs with efficient and scalable solutions.

Explore real-world examples and unleash the full potential of Flutter Retrofit for unparalleled performance and user experience

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 :

Explore the tutorial below for a comprehensive walkthrough of Retrofit implementation in Flutter.

 

Project Structure :

The below image illustrates the project structure, revealing the organized folder layout.

 

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 illustrates the flutter Retrofit request method in action.

If you have any questions about the implementation of Retrofit GET tutorial, feel free to drop them in the comments section below. If you found this tutorial helpful, please give it a thumbs up and share it to stay informed about upcoming important updates