Flutter Tampilkan Data Dari API JSON Ke Listview
Pada tulisan-tulisan saya sebelumnya saya sudah memberikan gambaran bagaimana performa Flutter sebagai "native app". Salah satu contoh yang dirasakan adalah ketika kita me-load banyak data kemudian mencoba scrolling, jika kamu pernah mencoba IONIC Framework meload banyak data akan membuat performa scrolling menjadi lambat, hal tersebut tidak berlaku pada Flutter karena Flutter memliki performa seperti native app.
Membuat Project Flutter
Ketikkan perintah dibawah ini pada command promptflutter create mynewapp
Buka folder project yang telah dibuat menggunakan Visual Studio Code
Memodifikasi Project Flutter
Sebelum memulai, pertama buat folder bernama "pages" didalam folder lib dan hapus folder test.
Membuat home.dart
Buat file dart bernama home.dart didalam folder pages. Buka file home.dart tersebut kemudian letakkan pointer pada baris pertama tekan tombol CTRL+Space pada keyboard.
![]() |
Dart stful |
Pada pilihan silahkan pilih stful kemudian tekan enter pada keyboard, pastikan kursor masih pada posisi yang sama selanjutnya ketik "HomePage", hasilnya seperti dibawah ini:
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State {
@override
Widget build(BuildContext context) {
return new Container();
}
}
Selanjtunya adalah mengimport material design pada home.dart pada baris paling atas
import 'package:flutter/material.dart';
Modifikasi main.dart
Hapus semua data pada main.dart kemudian import home.dart dan arahkan home ke HomePage()
import 'package:flutter/material.dart';
import './pages/home.dart';
void main(){
runApp(new MaterialApp(
home: new HomePage(),
));
}
Flutter: Mendapatkan Data JSON Dari Api
Data JSON dari API akan diambil melalui HTTP request, jika kamu belum memiliki API kamu dapat mencoba dummy API JsonPlaceholder
Struktur tampilan dummy API Jsonplaceholder yang akan digunakan
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
}
]
Menginstall library http
tambahkan data dibawah ini pada file pubspec.yaml
dependencies:
http: ^0.12.0
jalankan perintah dibawah ini untuk menginstall dependensiflutter packages get
Mengimport library tambahan pada home.dart
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
Buat List data dan fungsi getData() didalam class _HomePageState
List data;
Future<String> getData() async{
http.Response response = await http.get(
Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"),
headers: {
"Accept":"application/json"
}
);
setState((){
data = json.decode(response.body);
});
return "Success!";
}
Ubah widget build menjadi seperti dibawah ini
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Data from API 2"),
backgroundColor: Colors.blueAccent,
),
body: new ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index){
return new Card(
child: new Text(data[index]["title"]),
);
},
),
);
}
Tambahkan kode didibawah ini pada class _HomePageState
@override
void initState(){
this.getData();
}
Kode keseluruhan home.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => new _HomePageState();
}
class _HomePageState extends State {
List data;
Future<String> getData() async{
http.Response response = await http.get(
Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"),
headers: {
"Accept":"application/json"
}
);
setState((){
data = JSON.decode(response.body);
});
return "Success!";
}
@override
void initState(){
this.getData();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Data from API 2"),
backgroundColor: Colors.blueAccent,
),
body: new ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, int index){
return new Card(
child: new Text(data[index]["title"]),
);
},
),
);
}
}
Menjalankan Project Flutter
Sebelum menjalankan project Flutter, pastikan smartphone anda sudah terhubung ke laptop/PC sebagai developer mode atau gunakan Android Virtual Device (AVD). Jalankan project Flutter dengan cara menekan tombol F5 pada keyboard.
tanya suhu... kalo mau mengatur paginationiya gimana ya? misal kita scroll baru muncul data lainya begitu
ReplyDelete
ReplyDeleteGreat Article
Final Year Projects in Python
Python Training in Chennai
FInal Year Project Centers in Chennai
Python Training in Chennai