Halo semua, kali ini kita akan belajar bagaimana sih mengolah atau memanajemen Rest API di Flutter. Apa saja yang akan kita pelajari kali ini?
- Apa itu Dio?
- Pengujian dengan data API
- Mendefinisikan model class
- Inisialisasi
- Memilih dan menentukan global config
- Mendefinisikan request
- Upload files
- Interceptors
Apa itu Dio ?
Networking library developed by Flutter China. It is powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.
Pengujian dengan data API
Contoh request dan response data API kita menggunakan https://reqres.in/api/users/3
{
"data": {
"id": 3,
"email": "[email protected]",
"first_name": "Emma",
"last_name": "Wong",
"avatar": "https://reqres.in/img/faces/3-image.jpg"
},
"support": {
"url": "https://reqres.in/#support-heading",
"text": "To keep ReqRes free, contributions towards server costs are appreciated!"
}
}
Mendefinisikan model class
Buatlah class “user” dan class “data” seperti berikut :
class User
import 'package:json_annotation/json_annotation.dart';
import 'data.dart';
part 'user.g.dart';
@JsonSerializable()
class User {
User({
required this.data,
});
Data data;
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
}
class Data
import 'package:json_annotation/json_annotation.dart';
part 'data.g.dart';
@JsonSerializable()
class Data {
Data({
required this.id,
required this.email,
required this.firstName,
required this.lastName,
required this.avatar,
});
int id;
String email;
@JsonKey(name: 'first_name')
String firstName;
@JsonKey(name: 'last_name')
String lastName;
String avatar;
factory Data.fromJson(Map<String, dynamic> json) => _$DataFromJson(json);
Map<String, dynamic> toJson() => _$DataToJson(this);
}
Inisialisasi
import 'package:dio/dio.dart';
class ApiClient {
final Dio dio = Dio();
}
Memilih dan Menentukan Global Config
final Dio dio = Dio(
BaseOptions(
baseUrl: 'https://reqres.in/api',
connectTimeout: 5000,
receiveTimeout: 3000,
),
);
Mendefinisikan Request
GET Request
Future<Response> getData(String endpoint, {Map<String, dynamic>? headers, CancelToken? cancelToken}) async {
try {
final response = await dio.get(
Uri.encodeFull(endpoint),
options: Options(headers: headers ?? getHeaders()),
cancelToken: cancelToken,
);
return response;
} catch (e) {
throw handleException(e as Exception);
}
}
Contoh Service
Future<User?> getUser({String? id}) async {
User? user;
try {
final Response userData = await ApiClient.instance.getData('/users/$id');
user = User.fromJson(userData.data);
} on DioError catch (e) {
print('Error sending request ${e.message}!');
}
return user;
}
Contoh Penggunaannya
userInfo = await UserService.instance.getUser(id: '2');
POST Request
Future<Response> postData(String endpoint, dynamic data, {Map<String, dynamic>? headers}) async {
try {
final response = await dio.post(
Uri.encodeFull(endpoint),
data: data,
options: Options(headers: headers ?? getHeaders()),
);
return response;
} catch (e) {
throw handleException(e as Exception);
}
}
PUT Request
Future<Response> putData(String endpoint, dynamic data, {Map<String, dynamic>? headers}) async {
try {
final response = await dio.put(
Uri.encodeFull(endpoint),
data: data,
options: Options(headers: headers ?? getHeaders()),
);
return response;
} catch (e) {
throw handleException(e as Exception);
}
}
DELETE Request
Future<Response> deleteData(String endpoint, {Map<String, dynamic>? headers}) async {
try {
final response = await dio.get(
Uri.encodeFull(endpoint),
options: Options(headers: headers ?? getHeaders()),
);
return response;
} catch (e) {
throw handleException(e as Exception);
}
}
Upload Files
Future<Response> postMultipartData(String endpoint, File file) async {
final Map<String, MultipartFile> multipartData = {
'photo':
await MultipartFile.fromFile(file.uri.path, filename: 'avatar.jpg'),
};
final formData = FormData.fromMap(multipartData);
return postData(endpoint, formData, headers: getHeaders());
}
Interceptors
import 'package:dio/dio.dart';
class Logging extends Interceptor {
@override
void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
print('REQUEST[${options.method}] => PATH: ${options.path}');
return super.onRequest(options, handler);
}
@override
void onResponse(Response response, ResponseInterceptorHandler handler) {
print('RESPONSE[${response.statusCode}] => PATH: ${response.requestOptions.path}');
return super.onResponse(response, handler);
}
@override
void onError(DioError err, ErrorInterceptorHandler handler) {
print('ERROR[${err.response?.statusCode}] => PATH: ${err.requestOptions.path}');
return super.onError(err, handler);
}
}
Kesimpulan
Jadi, networking in flutter menggunakan Dio Package sangat memudahkan developer terutama Mobile Engineer untuk manajemen Rest API. Keep spirit and happy coding 🙂
I’m a result mobile engineer, as well as deep understanding of digital systems.