Home Mobile Cara buat alert dengan Lootie Animation-Flutter

Cara buat alert dengan Lootie Animation-Flutter

0
Cara buat alert dengan Lootie Animation-Flutter

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😀