When developing an app or web frontend, you often need a backend or public API.
Calling it requires HTTP communication, which Flutter can handle with Dio and Retrofit.
The HTTP package is another option, but Dio and Retrofit make requests more convenient.
In particular, Retrofit's type definitions simplify response handling and can improve productivity.
This article explains using both libraries and why type definitions matter.
Retrofit requires four packages, including Dio and Retrofit.
Three packages are used only during development and belong in dev_dependencies.
Install them with the following commands.
Create a model and interface for a sample API request.
We will use JSONPlaceholder↗, which supplies dummy data.
Start with a basic GET request that has no parameters.
Calling https://jsonplaceholder.typicode.com/users returns the following response.
The IDE may show errors or red underlines after you write the code above.
This means code generation is needed.
Run the following command from the project root.
dart run build_runner build
Check that the following files appear in the relevant directory.
lib/model/user_dto.g.dart
lib/model/user.g.dart
Once the errors disappear, you are ready to call the API.
Add and call the following function in an appropriate location.
import 'dart:developer';import 'package:dio/dio.dart';import 'package:retrofit/retrofit.dart';import 'package:{project명}/model/user/user.dart'; // 작성한 프로젝트의 경로에 맞게 수정해주세요.void runApiExample() { final dio = Dio(); final client = GetUserApi(dio); client.getUsers().then((userList) => { for (final user in userList) {log(user.toJson().toString())} });}
This code makes the API request.
[log] {id: 1, name: Leanne Graham, username: Bret, email: Sincere@april.biz, address: Instance of 'Address', phone: 1-770-736-8031 x56442, website: hildegard.org, company: Instance of 'Company'}
[log] {id: 2, name: Ervin Howell, username: Antonette, email: Shanna@melissa.tv, address: Instance of 'Address', phone: 010-692-6593 x09125, website: anastasia.net, company: Instance of 'Company'}
[log] {id: 3, name: Clementine Bauch, username: Samantha, email: Nathan@yesenia.net, address: Instance of 'Address', phone: 1-463-123-4447, website: ramiro.info, company: Instance of 'Company'}
[log] {id: 4, name: Patricia Lebsack, username: Karianne, email: Julianne.OConner@kory.org, address: Instance of 'Address', phone: 493-170-9623 x156, website: kale.biz, company: Instance of 'Company'}
[log] {id: 5, name: Chelsey Dietrich, username: Kamren, email: Lucio_Hettinger@annie.ca, address: Instance of 'Address', phone: (254)954-1289, website: demarco.info, company: Instance of 'Company'}
[log] {id: 6, name: Mrs. Dennis Schulist, username: Leopoldo_Corkery, email: Karley_Dach@jasper.info, address: Instance of 'Address', phone: 1-477-935-8478 x6430, website: ola.org, company: Instance of 'Company'}
[log] {id: 7, name: Kurtis Weissnat, username: Elwyn.Skiles, email: Telly.Hoeger@billy.biz, address: Instance of 'Address', phone: 210.067.6132, website: elvis.io, company: Instance of 'Company'}
[log] {id: 8, name: Nicholas Runolfsdottir V, username: Maxime_Nienow, email: Sherwood@rosamond.me, address: Instance of 'Address', phone: 586.493.6943 x140, website: jacynthe.com, company: Instance of 'Company'}
[log] {id: 9, name: Glenna Reichert, username: Delphine, email: Chaim_McDermott@dana.io, address: Instance of 'Address', phone: (775)976-6794 x41206, website: conrad.com, company: Instance of 'Company'}
[log] {id: 10, name: Clementina DuBuque, username: Moriah.Stanton, email: Rey.Padberg@karina.biz, address: Instance of 'Address', phone: 024-648-3804, website: ambrose.net, company: Instance of 'Company'}
Renaming a request-interface class may leave errors even after code generation.
Delete the generated d.dart file and generate it again to resolve this.
rm lib/model/user/user.g.dart
dart run build_runner build
We have explored API communication in Flutter with Dio and Retrofit and the importance of type definitions.
Types simplify handling API responses and can improve productivity.
As the response-model field count grows, the code may become long and harder to read.
A tool such as json_to_dart↗ can generate model classes conveniently.