Kali ini kita akan membuat Flutter untuk mengkonsumsi API method GET,
Sebelumnya kita sudah memiliki API method GET dengan Format seperti berikut :
isi dari file get1Data.php adalah seperti berikut :
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
include 'conn.php';
$queryResult=$connect->query("SELECT * FROM tb_item limit 1");
$result=array();
while($fetchData=$queryResult->fetch_assoc()){
$result[]=$fetchData;
}
echo json_encode($result);
?>
Code di flutter :
sebelumnya kita sudah menambahkan dependeci http ,
http: ^1.2.0
Lalu kita membutuhkan 3 file seperti berikut :
api_service.dart :
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'item_model.dart';
class ApiService {
static Future<List<ItemModel>> fetchData() async {
final response = await http.get(Uri.parse('http://localhost/PHP-REST-API/get1Data.php'));
if (response.statusCode == 200) {
List<dynamic> data = json.decode(response.body);
List<ItemModel> itemList = List<ItemModel>.from(
data.map((item) => ItemModel.fromJson(item)),
);
return itemList;
} else {
throw Exception('Failed to load data');
}
}
}
item_model.dart
class ItemModel {
final String id;
final String itemCode;
final String itemName;
final String price;
final String stock;
ItemModel({
required this.id,
required this.itemCode,
required this.itemName,
required this.price,
required this.stock,
});
factory ItemModel.fromJson(Map<String, dynamic> json) {
return ItemModel(
id: json['id'],
itemCode: json['item_code'],
itemName: json['item_name'],
price: json['price'],
stock: json['stock'],
);
}
}
main.dart
import 'package:flutter/material.dart';
import 'api_service.dart';
import 'item_model.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<ItemModel> itemList = [];
@override
void initState() {
super.initState();
fetchData();
}
Future<void> fetchData() async {
try {
List<ItemModel> data = await ApiService.fetchData();
setState(() {
itemList = data;
});
} catch (e) {
print('Error: $e');
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Data API'),
),
body: itemList.isEmpty
? Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: itemList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('ID: ${itemList[index].id}'),
subtitle: Text('Name: ${itemList[index].itemName}'),
);
},
),
),
);
}
}
Setelah itu coba jalankan flutter,
Bisa tampak bahwa data sudah berhasil ditampilkan dengan method GET,
catatan, sebenarnya kode flutter di atas bisa saja dibuat menjadi 1 file di main.dart, namun agar lebih mudah maka kita mengelompokkan menjadi beberapa file,
contoh berikut bila kita menggunakan 1 file saja.
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<Map<String, dynamic>> itemList = [];
@override
void initState() {
super.initState();
fetchData();
}
Future<void> fetchData() async {
final response = await http.get(Uri.parse('http://localhost/PHP-REST-API/get1Data.php'));
if (response.statusCode == 200) {
List<dynamic> data = json.decode(response.body);
setState(() {
itemList = List<Map<String, dynamic>>.from(data);
});
} else {
throw Exception('Failed to load data');
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Data API'),
),
body: itemList.isEmpty
? Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: itemList.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('ID: ${itemList[index]['id']}'),
subtitle: Text('Name: ${itemList[index]['item_name']}'),
);
},
),
),
);
}
}
