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); } }}
<img src="https://i.stack.imgur.com/OvIOH.png">