Image Load

Horray tidak terasa masuk ke postingan ke-50!!!!

Hello world,

Kali ini saya mau membahas mengenai bagaimana  membuat animasi loading dengan menggunakan progress dialog. Untuk membuat loading sebenarnya ada banyak cara.  Contohnya ada  CircularProgressIndicator dan LinearProgressIndicator. Tapi karena tampilannya yang berbeda maka progress dialog cukup bagus untuk dipakai dari pada CircularProgressIndicator.  Bentuknya yang akan muncul sebagai popup sangat cocok untuk proses-proses seperti input form. Progress dialog di sini mempunyai banyak sekali konfigurasi dan style. Tapi untuk pembahasan kali ini saya hanya membuat dasarnya saja yang penting muncul dan dapat digunakan. Karena seperti biasa yang saya bahas selalu yang simpel-simpel saja biar tidak membuat orang bingung saat mencobanya.

Oke langsung saja masuk ke pembahasan. Pertama kita harus install dulu di file pubspec.yaml dan save.

dependencies:
  progress_dialog: ^1.2.1

Kemudian Tambahkan/import ke file dart/halaman yang diiginkan.

import 'package:progress_dialog/progress_dialog.dart';

Selanjutnya kita buat halaman sederhana seperti berikut:

import 'package:flutter/material.dart';
import 'package:progress_dialog/progress_dialog.dart';

void main() {
runApp(new MaterialApp(
title: "Family Dex",
home: new Halaman(),
));
}

class Halaman extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Progress Dialog"),
),
body: Center(
child: RaisedButton(
child: Text("Tampilkan"),
onPressed: () {},
),
),
);
}
}

Pada contoh kali ini saya buat sebuah halaman  yang isinya tombol yang jika diklik maka akan menampilkan progress dialog selama beberapa detik. Selanjutnya kita tambahkan kode untuk inisiasi  progress dialognya sehingga kodenya akan menjadi seperti berikut.

import 'package:flutter/material.dart';
import 'package:progress_dialog/progress_dialog.dart';

void main() {
runApp(new MaterialApp(
title: "Family Dex",
home: new Halaman(),
));
}

class Halaman extends StatelessWidget {

ProgressDialog pr;
@override
Widget build(BuildContext context) {
pr = new ProgressDialog(context, type: ProgressDialogType.Normal);

pr.style(
message: 'Menunggu...',
borderRadius: 10.0,
backgroundColor: Colors.white,
elevation: 10.0,
insetAnimCurve: Curves.easeInOut,
progress: 0.0,
maxProgress: 100.0,
progressTextStyle: TextStyle(
color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
messageTextStyle: TextStyle(
color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
);


return Scaffold(
appBar: AppBar(
title: Text("Progress Dialog"),
),
body: Center(
child: RaisedButton(
child: Text("Tampilkan"),
onPressed: () {},
),
),
);
}
}

Nah sekarang tinggal kita panggil saja dengan cara berikut.

pr.show();

Untuk menutup:

pr.hide();


Kira-kira hasilnya akan menjadi seperti berikut

import 'package:flutter/material.dart';
import 'package:progress_dialog/progress_dialog.dart';

void main() {
runApp(new MaterialApp(
title: "Family Dex",
home: new Halaman(),
));
}

class Halaman extends StatelessWidget {
ProgressDialog pr;
@override
Widget build(BuildContext context) {
pr = new ProgressDialog(context, type: ProgressDialogType.Normal);

pr.style(
message: 'Menunggu...',
borderRadius: 10.0,
backgroundColor: Colors.white,
elevation: 10.0,
insetAnimCurve: Curves.easeInOut,
progress: 0.0,
maxProgress: 100.0,
progressTextStyle: TextStyle(
color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
messageTextStyle: TextStyle(
color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
);

return Scaffold(
appBar: AppBar(
title: Text("Progress Dialog"),
),
body: Center(
child: RaisedButton(
child: Text("Tampilkan"),
onPressed: () {
pr.show();

Future.delayed(Duration(seconds: 10)).then((onValue) {
pr.hide();
});
},
),
),
);
}
}


Preview:



Selamat mencoba :)