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