Pada tutorial ini kita akan coba membahas cara Get data API di Flutter menggunakan http package. API (Application Programming Interface) merupakan suatu aplikasi yang memungkinkan untuk berkomunikasi antar aplikasi lainnya. Format dari response API umumnya JSON atau XML, namun format JSON lebih disukai karena sederhana, dan ukuran yang lebih kecil.
Sebagai contoh, kita akan coba menampilkan data user dari API yang disediakan oleh reqres.in dan menampilkannya dengan ListView widget
Cara GET Data API di Flutter yaitu :
1. Buat Projek Flutter Baru
Jika anda ingin menggunakan projek yang sudah ada maka skip saja tahapan ini.
Untuk membuat silahkan jalankan perintah dibawah ini pada terminal / cmd. Atau bisa juga dengan menggunakan bantuan IDE seperti visual studio code dan Android Studio.
$ flutter create belajar_flutter2. Tambahkan package http di pubspec.yaml
Package http dibutuhkan untuk mempermudah fetching data API di flutter.
dependencies:
http: ^0.12.2Seiringnya waktu mungkin saja versi diatas sudah tertinggal, jadi harap selalu cek dan gunakan versi terbaru dengan cara mengunjungi halaman resminya dibawah ini
http package : https://pub.dev/packages/http
Setelah ditambahkan, harap simpan pubspec.yaml dan jalankan perintah dibawah
$ flutter pub get3. Gunakan package http di main.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() {
runApp(MaterialApp(
home: BelajarGetData(),
));
}
class BelajarGetData extends StatelessWidget {
final String apiUrl = "https://reqres.in/api/users?per_page=15";
Future<List<dynamic>> _fecthDataUsers() async {
var result = await http.get(apiUrl);
return json.decode(result.body)['data'];
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Belajar GET HTTP'),
),
body: Container(
child: FutureBuilder<List<dynamic>>(
future: _fecthDataUsers(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return ListView.builder(
padding: EdgeInsets.all(10),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: CircleAvatar(
radius: 30,
backgroundImage:
NetworkImage(snapshot.data[index]['avatar']),
),
title: Text(snapshot.data[index]['first_name'] + " " + snapshot.data[index]['last_name']),
subtitle: Text(snapshot.data[index]['email']),
);
});
} else {
return Center(child: CircularProgressIndicator());
}
},
),
),
);
}
}Simpan lalu coba jalankan. Jika berhasil hasilnya seperti dibawah ini
Hanya membutuhkan 3-5 menit kita sudah dapat membuat aplikasi flutter yang menampilkan data dari API. Mudah bukan ?
Sekarang mari kita coba ulas lebih detail
final String apiUrl = "https://reqres.in/api/users?per_page=15";
Future<List<dynamic>> _fecthDataUsers() async {
var result = await http.get(apiUrl);
return json.decode(result.body)['data'];
}Fungsi _fecthDataUsers digunakan untuk memanggil API dari string apiURL menggunakan http.get. Karena kita ingin menunggu response dari API sebelum melanjutkan ke proses selanjutnya maka kita membutuhkan asynchronous function dengan menambahkan async setelah nama function dan await pada proses yang ingin kita tunggu.
Dan karena kita tidak ingin mengatur output dari response API maka kita cukup gunakan List dengan tipe dynamic List<dynamic>. Dalam projek rill sebaiknya kita define terlebih dahulu format output dari mulai tipe data dan struktur datanya untuk meminimalisir error dan memudahkan dalam pembacaan data. Penjelasan lebih detail tentang Mapping Object akan kita bahas pada artikel terpisah.
Selain itu karena respon API dalam format JSON, maka kita perlu merubahnya menggunakan json.decode. Untuk menggunakan json.decode wajib import ‘dart:convert’;
import 'dart:convert';
...
...
return json.decode(result.body)['data'];
...Contoh JSON Respon
{
"page": 1,
"per_page": 15,
"total": 12,
"total_pages": 1,
"data": [
{
"id": 1,
"email": "[email protected]",
"first_name": "George",
"last_name": "Bluth",
"avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
},
...Karena kita hanya membutuhkan data yang ada dalam array “data” maka saat return array nya pun hanya mengambil array data saja (result.body)['data'];
FutureBuilder Widget
child: FutureBuilder<List<dynamic>>(
future: _fecthDataUsers(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
// Tampilkan Data User
} else {
// Data user belum ada, tampilkan animasi loading
}Selanjutnya pada main widget kita gunakan FutureBuilder, yang mana properti future digunakan untuk memanggil fungsi fetchDataUser dan builder untuk menampilkan data API ke UI. Dalam penggunaan FutureBuilder sebaiknya selalu tambahkan pengecekan apakah snapshot sudah memiliki data atau belum agar tampilan tidak error jika gagal atau belum mendapatkan feedback dari API.
Dan terakhir menampilkan data ke dalam ListView
return ListView.builder(
padding: EdgeInsets.all(10),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
...Detail artikel tentang penggunaan listView bisa dibaca disini
Penutupan
Get HTTP Request di flutter dapat dilakukan dengan cara sederhana seperti diatas, namun contoh tersebut hanya merupakan konsepnya saja. Sebaiknya modifikasi lagi seperti mapping untuk setiap output object, dan pisahkan widget untuk memanggil API dengan main widget. HTTP Request juga tidak hanya GET method, namun terdapat method lain seperti POST, PATCH, PUT, DELETE dan lain2. Untuk method lain kita akan coba bahas juga pada kesempatan lainnya.
Semoga bermanfaat 🙂
