How do calling API in flutter using Dio? How do calling API in flutter using Dio? dart dart

How do calling API in flutter using Dio?


Try something like this:

  final client = Dio();  Future<_yourClass_> getData() async {    final url = 'your-url';    try {      final response = await client.get(url);      if (response.statusCode == 200) {        return _yourClass_.fromJson(response.data);      } else {        print('${response.statusCode} : ${response.data.toString()}');        throw response.statusCode;      }    } catch (error) {      print(error);    }  }... _yourClass_ data = await getData();

If you already has a token, you can add it into dio like this :

Dio()..options.headers['authorization'] = 'Bearer $token';

Of course it depends on authorization type. Also if you don't have token already, you need to make request first to obtain a token (similar as shown above) and then get token from response.data.


Here is a step by step instructions

First create a dio API service and service implement class

import 'package:dio/dio.dart';abstract class HttpService{  void init();  Future<Response> getRequest(String url);}

An Api calling implement class

import 'package:dio/dio.dart';import 'package:getx_news_app_impl/service/http_service.dart';const BASE_URL = "https://newsapi.org/";const API_KEY = "fb12a31181aa4498ba52877978913275";class HttpServiceImpl implements HttpService{  Dio _dio;  @override  Future<Response> getRequest(String url) async{    // TODO: implement getRequest    Response response;    try {      response = await _dio.get(url);    } on DioError catch (e) {      print(e.message);      throw Exception(e.message);    }    return response;  }  initializeInterceptors(){    _dio.interceptors.add(InterceptorsWrapper(      onError: (error){        print(error.message);      },      onRequest: (request){        print("${request.method} | ${request.path}");      },      onResponse: (response){        print("${response.statusCode} ${response.statusMessage} ${response.data}");      }    ));  }  @override  void init() {    _dio = Dio(BaseOptions(      baseUrl: BASE_URL,      headers: {"Authorization" : "Bearer $API_KEY"}    ));    initializeInterceptors();  }}

And using that class call API like this

class NewsRepoImpl implements NewsRepo{  HttpService _httpService;    Future<List<Article>> getNewsHeadline() async{    // TODO: implement getNewsHeadline    try {       final response = await _httpService.getRequest("/v2/top-headlines?country=us");       final parsedResponse = NewsResponse.fromJson(response.data);       return parsedResponse.articles;    } on Exception catch (e) {      print(e);      return null;    }  }  }


import 'package:dio/dio.dart';import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class ContactListWidget extends StatefulWidget {  const ContactListWidget({Key? key}) : super(key: key);  @override  _ContactListWidgetState createState() => _ContactListWidgetState();}class _ContactListWidgetState extends State<ContactListWidget> {  List<dynamic> users = [];  @override  void initState() {    super.initState();    getDio();  }  @override  Widget build(BuildContext context) {    return Scaffold(      body: Container(        child: ListView(          children: users.map((e) {            return Card(              child: Padding(                padding: const EdgeInsets.all(8.0),                child: Row(                 mainAxisAlignment: MainAxisAlignment.spaceEvenly,                 children: [                Expanded(                  flex: 4,                  child: Row(                    crossAxisAlignment: CrossAxisAlignment.start,                    children: [                      Padding(                        padding: const EdgeInsets.all(8.0),                        child: CircleAvatar(                          child: Image.network(e["avatar"]),                        ),                      ),                      Flexible(                        child: Padding(                          padding: const EdgeInsets.all(8.0),                          child: Column(                            crossAxisAlignment: CrossAxisAlignment.start,                            children: [                              Text(e["name"],                                  style: TextStyle(                                    fontWeight: FontWeight.bold,                                    fontSize: 20,                                  )),                              Text(e["title"],maxLines: 1,overflow: TextOverflow.ellipsis,),                              Chip(label: Text(e["role"]),),                            ],                          ),                        ),                      ),                    ],                  ),                ),                Expanded(                  flex: 1,                  child: Text(                    '\$  ${e["balance"].toString() == "null" ? "0" : e["balance"].toString()}',                    style: TextStyle(                      fontWeight: FontWeight.bold,                      fontSize: 20,                    ),                  ),                ),              ],            ),          ),        );      }).toList(),    ),  ),);  }  void getDio() async {    try {      var response = await Dio(BaseOptions(headers: {"Content-Type": "application/json"}))          .get('https://mock-database-f1298.web.app/api/v1/users');      users = response.data["users"];      setState(() {});    } catch (e) {      print(e);    }  }}

Sample Image

<img src="https://i.stack.imgur.com/OvIOH.png">