Assalamualaikum sobat baraja kali ini mimin akan membuat sebuah tips nih yaitu cara membuat notifikasi alert menggunakan lootie animation
Lottie adalah format file animasi yang kecil, berkualitas tinggi, interaktif, dan dapat dimanipulasi dengan waktu dan aa yanag sifatnya open source. Lootie animasi ini hampir mirip dengan gift cuman lebih smooth lagi dan lebih prefer digunakan dalam desainnya
Okee sebelumnya kita, install dulu library nya di
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
lottie: ^1.0.1
Kemudian di main.dart kita akan panggil library nya dan membuat button untuk menampilkan sebuah alert lalu memanggil method untuk menjalankannya
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: LottiePage(),
);
}
}
class LottiePage extends StatefulWidget {
@override
_LottiePageState createState() => _LottiePageState();
}
class _LottiePageState extends State<LottiePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(28.0),
child: MaterialButton(
onPressed: () {
showAlertDialog(context);
},
color: Colors.blue[800],
child: Text('Tekan aku'),
),
),
),
);
}
Disini kita akan buat method untuk pemanggilan alert nya yaitu showAlertDialog yang mengembalikan method showDialog yang mengembalikan widget AlertDialog
Future<void> showAlertDialog(BuildContext context) async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
content: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height / 2,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Lottie.network(
'https://assets3.lottiefiles.com/packages/lf20_tr1pjkop.json'),
Text(
"Alert Success",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
))),
actions: <Widget>[
TextButton(
child: Text('Kembali'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
}
Untuk mendapatkan alamat dari lottie nya teman-teman bisa bisa akses laman Featured animations from our community (lottiefiles.com) nanti tinggal tap aja dan akan muncul seperti ini
Teman-teman bisa membuatnya secara offline ataupun online
Kalau online contohnya seperti diatas kita bisa menggunakan “Lottie.network ” dan “Lottie.assets”
Catatan kalau online, emulator teman-teman harus terhubung ke internet dan kalau offline teman-teman bisa download jsonnya lalu taruh di folder assets dan aktifkan assetsnya di pubspec.yaml
Maka hasilnya akan seperti ini
Begitulah kira kira membuat tampilan button ketika di klik muncul sebuah alert dialog yang didalamnya ada Lottie Animation. Sekian Terima kasih😀