Retrofit API calling in flutter

In the mobile app development lifecycle, communicating with the server(via API) to fetch or store data is one of the basic needs.

So, in today’s blog let’s check Retrofit API calling in a flutter.

I hope you’re all familiar with Android/iOS, and you’ve even heard of Retrofit and Alamofire.

Check out more about our Flutter app development.

We use network calls in almost every app, and they’ve become an integral part of app functioning.

To call Rest APIs by sending dynamic headers, parameters, print requests, and responses in a more custom and secured way “Retrofit” is the best solution.

Let’s start the steps for Retrofit API calling in a flutter

Step1: Create a flutter project.

Step2: Add the below dependencies in pubspec.yaml file

dependencies:
retrofit: ^1.3.4+1
built_value: ^7.1.0
<span class="hljs-attr">logger:</span> <span class="hljs-string">any</span> <span class="hljs-comment">#for logging purpose</span>

dev_dependencies:
retrofit_generator: ^1.3.7+5
build_runner: ^1.10.0
built_value_generator: ^7.1.0

dependencies:

retrofit: ^1.3.4+1

built_value: ^7.1.0

logger: any #for logging purpose

dev_dependencies:

retrofit_generator: ^1.3.7+5

build_runner: ^1.10.0

built_value_generator: ^7.1.0

Now, run the command “flutter pub get” to download the dependencies.

Step3: Now, let’s create an abstract API request class.

import 'package:dio/dio.dart';
import 'package:flutter_app/Model/User.dart';
import 'package:retrofit/http.dart';
part 'api_client.g.dart';

@RestApi(baseUrl: "https://jsonplaceholder.typicode.com/")
abstract class ApiClient {
  factory ApiClient(Dio dio, {String baseUrl}) = _ApiClient;

  @GET('todos/')
  Future<List<User>> getUsers();


@POST('user/Api/v1/user/login')                                         //login
Future<Response> getLogin([
  @Header("DeviceId") String deviceId,
  @Header("AuthorizedToken") String authenticationKey,
  @Header("Version") String version,
  @QueryMap() Map<String, String> param,
]);
}

import 'package:dio/dio.dart';

import 'package:flutter_app/Model/User.dart';

import 'package:retrofit/http.dart';

part 'api_client.g.dart';

@RestApi(baseUrl: "https://jsonplaceholder.typicode.com/")

abstract class ApiClient {

factory ApiClient(Dio dio, {String baseUrl}) = _ApiClient;

@GET('todos/')

Future<List<User>> getUsers();

@POST('user/Api/v1/user/login') //login

Future<Response> getLogin([

@Header("DeviceId") String deviceId,

@Header("AuthorizedToken") String authenticationKey,

@Header("Version") String version,

@QueryMap() Map<String, String> param,

]);

}

Right now, you will observe some errors in the file in “part ‘api_client.g.dart’ ” and _ApiClient.

We need to run a command and generate an “api_client.g.dart” file.

Step4: Now run the command in the terminal

flutter pub run build_runner build

The above command will generate the api_client.g.dart file & contains all data about creating Retrofit instance and fetching data from the network.

You should never modify the code in api_client.g.dart file by hand.

If you made any changes in ApiClient then also run the command to update part file.

Step5: Now, create a model class to store the API data.

import 'dart:convert';
List<User> userFromJson(String str) => List<User>.from(json.decode(str).map((x) => User.fromJson(x)));
String userToJson(List<User> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class User {
  User({
    this.userId,
    this.id,
    this.title,
    this.completed,
  });
  int userId;
  int id;
  String title;
  bool completed;
  factory User.fromJson(Map<String, dynamic> json) => User(
    userId: json["userId"],
    id: json["id"],
    title: json["title"],
    completed: json["completed"],
  );
  Map<String, dynamic> toJson() => {
    "userId": userId,
    "id": id,
    "title": title,
    "completed": completed,
  };
}

import 'dart:convert';

List<User> userFromJson(String str) => List<User>.from(json.decode(str).map((x) => User.fromJson(x)));

String userToJson(List<User> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class User {

User({

this.userId,

this.id,

this.title,

this.completed,

});

int userId;

int id;

String title;

bool completed;

factory User.fromJson(Map<String, dynamic> json) => User(

userId: json["userId"],

id: json["id"],

title: json["title"],

completed: json["completed"],

);

Map<String, dynamic> toJson() => {

"userId": userId,

"id": id,

"title": title,

"completed": completed,

};

}

Step6: Then, call the get method from your main.dart class.

  FutureBuilder<List<User>> _buildBody(BuildContext context) {
    final client = ApiClient(Dio(BaseOptions(contentType: "application/json")));
    return FutureBuilder<List<User>>(

      future: client.getUsers(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          final List<User> posts = snapshot.data;
          return _buildPosts(context, posts);
        } else {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

FutureBuilder<List<User>> _buildBody(BuildContext context) {

final client = ApiClient(Dio(BaseOptions(contentType: "application/json")));

return FutureBuilder<List<User>>(

future: client.getUsers(),

builder: (context, snapshot) {

if (snapshot.connectionState == ConnectionState.done) {

final List<User> posts = snapshot.data;

return _buildPosts(context, posts);

} else {

return Center(

child: CircularProgressIndicator(),

);

}

);

}

Please find below the complete code for main.dart class.

import 'dart:collection';

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

import 'Model/User.dart';
import 'Retrofit/api_client.dart';


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

class MyApp extends StatelessWidget {
// to set the root of app.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'API Demo Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    super.initState();

  }


  Future getPostApiCall() async{
    final client = ApiClient(Dio(BaseOptions(contentType: "application/json")));
    Map<String, String> createDoc = new HashMap();
    createDoc['username'] = "shikha";
    createDoc['password'] = "shikha";
    // final response = client.getLogin('123','abc','',createDoc);
    final response = client.getUsers();
    final user = userFromJson(response.toString());
    print(user);
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("Flutter - Retrofit Implementation"),
      ),
      body: _buildBody(context),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {

        },
        label:Icon(Icons.cancel),
        backgroundColor: Colors.green,
      ),
    );
  }

  // build list view & manage states
  FutureBuilder<List<User>> _buildBody(BuildContext context) {
    final client = ApiClient(Dio(BaseOptions(contentType: "application/json")));
    return FutureBuilder<List<User>>(

      future: client.getUsers(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          final List<User> posts = snapshot.data;
          return _buildPosts(context, posts);
        } else {
          return Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

  // build list view & its tile
  ListView _buildPosts(BuildContext context, List<User> posts) {
    return ListView.builder(
      itemCount: posts.length,
      padding: EdgeInsets.all(8),
      itemBuilder: (context, index) {
        return Card(
          elevation: 4,
          child: ListTile(
            title: Text(
              posts[index].title,
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            subtitle: Text(posts[index].completed.toString()),
          ),
        );
      },
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

import 'dart:collection';

import 'package:dio/dio.dart';

import 'package:flutter/material.dart';

import 'Model/User.dart';

import 'Retrofit/api_client.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

// to set the root of app.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.green,

visualDensity: VisualDensity.adaptivePlatformDensity,

home: MyHomePage(title: 'API Demo Page'),

);

}

class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

void initState() {

super.initState();

}

Future getPostApiCall() async{

final client = ApiClient(Dio(BaseOptions(contentType: "application/json")));

Map<String, String> createDoc = new HashMap();

createDoc['username'] = "shikha";

createDoc['password'] = "shikha";

// final response = client.getLogin('123','abc','',createDoc);

final response = client.getUsers();

final user = userFromJson(response.toString());

print(user);

}

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.white,

appBar: AppBar(

title: Text("Flutter - Retrofit Implementation"),

body: _buildBody(context),

floatingActionButton: FloatingActionButton.extended(

onPressed: () {

label:Icon(Icons.cancel),

backgroundColor: Colors.green,

);

}

// build list view & manage states

FutureBuilder<List<User>> _buildBody(BuildContext context) {

final client = ApiClient(Dio(BaseOptions(contentType: "application/json")));

return FutureBuilder<List<User>>(

future: client.getUsers(),

builder: (context, snapshot) {

if (snapshot.connectionState == ConnectionState.done) {

final List<User> posts = snapshot.data;

return _buildPosts(context, posts);

} else {

return Center(

child: CircularProgressIndicator(),

);

}

);

}

// build list view & its tile

ListView _buildPosts(BuildContext context, List<User> posts) {

return ListView.builder(

itemCount: posts.length,

padding: EdgeInsets.all(8),

itemBuilder: (context, index) {

return Card(

elevation: 4,

child: ListTile(

title: Text(

posts[index].title,

style: TextStyle(fontWeight: FontWeight.bold),

subtitle: Text(posts[index].completed.toString()),

);

}

Finally, you can run the code, and see the below results.

For more details and methods you can refer to the doc here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you for a better understanding of Retrofit API calling in flutter.

Thanks for reading 🙂

Shikha Melkani 28 April 2023

. . .

Retrofit API calling in flutter

Let’s start the steps for Retrofit API calling in a flutter

Leave a Comment Cancel Reply

Message Sent!