[Flutter][29] Parsing JSON pada Flutter (Bagian 2) Penggunaan Loading dengan CircularProgressIndicator

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Saturday, 01 Jun 2019

Hello world,

Melanjutkan dari pembahasan sebelumnya yaitu parsing json pada flutter, kali ini saya hanya menambahkan sedikit kode yaitu membuat loading animasi dengan CircularProgressIndicator. CircularProgressIndicator ini akan menampilkan loading saat data belum selesai diambil dari json. Jika dilihat dari contoh kode dari pembahasan sebelumnya (lihat di bawah), maka CircularProgressIndicator harus dijalankan saat kondisi datadariJSON masih bernilai null.

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new HalamanJson(),
));
}

class HalamanJson extends StatefulWidget {
@override
_HalamanJsonState createState() => _HalamanJsonState();
}

class _HalamanJsonState extends State<HalamanJson> {
List datadariJSON;

Future<String> ambildata() async {
http.Response hasil = await http.get(
Uri.encodeFull("https://jsonplaceholder.typicode.com/users"),
headers: {"Accept": "application/json"});

this.setState(() {
datadariJSON = json.decode(hasil.body);
});
}

@override
void initState() {
this.ambildata();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Data JSON"),
),
body: Container(
child: ListView.builder(
itemCount: datadariJSON == null ? 0 : datadariJSON.length,
itemBuilder: (context, i){
return ListTile(
title: Text(datadariJSON[i]['name']),
);
}
),
),
);
}
}

Kita hanya perlu menambahkan kondisi (if) jika datadariJSON == null maka akan dijalankan CircularProgressIndicator() dan jika (else) datadariJSON sudah tidak lagi bernilai null maka akan dijalankan ListView.builder. Setelah ditambahkan akan menjadi seperti di bawah ini. Lihat perubahannya pada tanda berwarna kuning.

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new HalamanJson(),
));
}

class HalamanJson extends StatefulWidget {
@override
_HalamanJsonState createState() => _HalamanJsonState();
}

class _HalamanJsonState extends State<HalamanJson> {
List datadariJSON;

Future<String> ambildata() async {
http.Response hasil = await http.get(
Uri.encodeFull("https://jsonplaceholder.typicode.com/users"),
headers: {"Accept": "application/json"});

this.setState(() {
datadariJSON = json.decode(hasil.body);
});
}

@override
void initState() {
this.ambildata();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Data JSON"),
),
body: Container(
child: datadariJSON == null ? new Center( child: CircularProgressIndicator() ) : ListView.builder(
itemCount: datadariJSON == null ? 0 : datadariJSON.length,
itemBuilder: (context, i){
return ListTile(
title: Text(datadariJSON[i]['name']),
);
}
),
),
);
}
}

Selamat mencoba :)