Flutter adalah kerangka kerja pengembangan aplikasi mobile yang kuat, dan salah satu aspek penting dalam pengembangan aplikasi adalah berinteraksi dengan API eksternal untuk mengambil data. Plugin http dalam Flutter adalah salah satu pilihan yang populer untuk melakukan permintaan HTTP ke server dan mengambil data JSON. Dalam artikel ini, kita akan menjelaskan konsep dan langkah-langkah dasar untuk menggunakan plugin http dalam Flutter.
Mengapa Plugin HTTP Diperlukan
Dalam pengembangan aplikasi, seringkali kita perlu mengambil data dari server eksternal, seperti RESTful API, untuk menampilkan informasi kepada pengguna. Contoh penggunaan API termasuk mengambil daftar posting blog, informasi pengguna, data cuaca, dan banyak lagi. Inilah mengapa plugin HTTP menjadi penting, karena memungkinkan kita untuk melakukan permintaan HTTP ke server dan mendapatkan respons data dalam format JSON.
Instalasi Plugin HTTP
Langkah pertama adalah menambahkan plugin http ke proyek Flutter Anda. Anda dapat melakukannya dengan menambahkan dependensi berikut ke file pubspec.yaml:
dependencies: http: ^0.13.3Kemudian, jalankan perintah flutter pub get untuk mengunduh dan menginstal plugin ini.
Membuat Kelas Model
Sebelum mengambil data dari API, kita perlu mendefinisikan kelas model yang sesuai untuk data yang akan diambil. Dalam contoh ini, kita akan membuat kelas model get untuk mengambil return data dari JSONPlaceholder API:
model.dart
// To parse this JSON data, do
//
// final user = userFromJson(jsonString);
import 'dart:convert';
List<User> userFromJson(String str) =>
List<User>.from(json.decode(str).map((x) => User.fromJson(x)));
String userToJson(List<User> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class User {
int id;
String name;
String username;
String email;
Address address;
String phone;
String website;
Company company;
User({
required this.id,
required this.name,
required this.username,
required this.email,
required this.address,
required this.phone,
required this.website,
required this.company,
});
factory User.fromJson(Map<String, dynamic> json) => User(
id: json["id"],
name: json["name"],
username: json["username"],
email: json["email"],
address: Address.fromJson(json["address"]),
phone: json["phone"],
website: json["website"],
company: Company.fromJson(json["company"]),
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"username": username,
"email": email,
"address": address.toJson(),
"phone": phone,
"website": website,
"company": company.toJson(),
};
}
class Address {
String street;
String suite;
String city;
String zipcode;
Geo geo;
Address({
required this.street,
required this.suite,
required this.city,
required this.zipcode,
required this.geo,
});
factory Address.fromJson(Map<String, dynamic> json) => Address(
street: json["street"],
suite: json["suite"],
city: json["city"],
zipcode: json["zipcode"],
geo: Geo.fromJson(json["geo"]),
);
Map<String, dynamic> toJson() => {
"street": street,
"suite": suite,
"city": city,
"zipcode": zipcode,
"geo": geo.toJson(),
};
}
class Geo {
String lat;
String lng;
Geo({
required this.lat,
required this.lng,
});
factory Geo.fromJson(Map<String, dynamic> json) => Geo(
lat: json["lat"],
lng: json["lng"],
);
Map<String, dynamic> toJson() => {
"lat": lat,
"lng": lng,
};
}
class Company {
String name;
String catchPhrase;
String bs;
Company({
required this.name,
required this.catchPhrase,
required this.bs,
});
factory Company.fromJson(Map<String, dynamic> json) => Company(
name: json["name"],
catchPhrase: json["catchPhrase"],
bs: json["bs"],
);
Map<String, dynamic> toJson() => {
"name": name,
"catchPhrase": catchPhrase,
"bs": bs,
};
}
Melakukan Permintaan HTTP
Dalam Flutter, Anda dapat menggunakan objek http.Client untuk membuat permintaan HTTP. Dalam contoh ini, kita akan menggunakan permintaan GET untuk mengambil daftar return dari JSONPlaceholder API:
Future<List<User>> getUsers() async {
try {
var res = await http
.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
if (res.statusCode == 200) {
Iterable jsonResponse = jsonDecode(res.body);
List<User> userList =
jsonResponse.map((data) => User.fromJson(data)).toList();
return userList;
} else {
throw Exception('Failed to load data');
}
} catch (e) {
throw Exception('Error: $e');
}
}Menampilkan Data
Setelah data diterima dari API, Anda dapat menampilkannya dalam antarmuka pengguna. Dalam contoh ini, kita menampilkan daftar posting dalam widget ListView.builder:
listdata.dart
import 'dart:convert';
import 'package:artikel/httpget/detaildata.dart';
import 'package:artikel/httpget/resdata.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class ListData extends StatefulWidget {
const ListData({super.key});
@override
State<ListData> createState() => _ListDataState();
}
class _ListDataState extends State<ListData> {
List<User> listUser = [];
Future<List<User>> getUsers() async {
try {
var res = await http
.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));
if (res.statusCode == 200) {
Iterable jsonResponse = jsonDecode(res.body);
List<User> userList =
jsonResponse.map((data) => User.fromJson(data)).toList();
return userList;
} else {
throw Exception('Failed to load data');
}
} catch (e) {
throw Exception('Error: $e');
}
}
@override
void initState() {
super.initState();
getUsers().then((userList) {
setState(() {
listUser = userList;
});
}).catchError((error) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(error.toString())));
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List Data'),
),
body: ListView.builder(
itemCount: listUser.length,
itemBuilder: (context, index) {
var data = listUser[index];
return ListTile(
title: Text(data.name),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => ListDataDetail(user: data)),
);
},
);
},
),
);
}
}
detaildata.dart
import 'package:flutter/material.dart';
import 'package:artikel/httpget/resdata.dart';
class ListDataDetail extends StatelessWidget {
final User user;
ListDataDetail({Key? key, required this.user}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Detail User'),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
DetailItem(label: 'Name', value: user.name),
DetailItem(label: 'Username', value: user.username),
DetailItem(label: 'Email', value: user.email),
DetailItem(label: 'Phone', value: user.phone),
DetailItem(label: 'Address', value: user.address.street),
],
),
),
);
}
}
class DetailItem extends StatelessWidget {
final String label;
final String value;
DetailItem({required this.label, required this.value});
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
Text(
value,
style: TextStyle(fontSize: 16),
),
SizedBox(height: 10.0), // Berikan sedikit jarak antar item.
],
);
}
}
Output
Kesimpulan
Plugin http dalam Flutter memungkinkan pengembang untuk melakukan permintaan HTTP ke server eksternal dan mengambil data JSON. Dengan memahami konsep dasar, Anda dapat mengambil dan menampilkan data dengan mudah dalam aplikasi Flutter Anda. Semoga artikel ini membantu Anda memahami penggunaan plugin http dalam pengembangan Flutter Anda.