Cara Install dan Menggunakan Package Shimmer Pada Projek Flutter Development

Hello people spirit of learning!

Dalam flutter terdapat banyak package yang dapat kita gunakan, salah satu package favorite adalah shimmer. Fungsi dari shimmer ini adalah membuat widget menjadi berkilau. Biasanya digunakan untuk me ngeload sebuah aplikasi. Seperti pada aplikasi lainnya. Langsung saja ke dalam tutorialnya.

Kunjungi pub.dev

Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini.

Cari keyword Shimmer

Langkah kedua adalah ketik keyword shimmer. Lalu pilih paling atas

Install package

Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini.

Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package.

Implementasi package

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Shimmer.fromColors(
              baseColor: Colors.grey,
              highlightColor: Colors.white,
              child: Text(
                'Loading',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 40.0,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ],
      )),
    );
  }
}

Untuk menggunakannya kita bisa langsung saja panggil widget Shimmer. didalamnya terdapat 2 properti yaitu child dan gradient. Namun kita menggunakan getter saja yaitu get FromColors. Nantinya didalamnya ada cukup banyak properti. Basecolor untuk warna dasarnya dan highlightColor untuk warna kilaunya, dan child adalah isi dari shimmer nya nanti. Childnya kita isi sebagai text saja dan styling sesuai keinginan kalian.

Terima kasih dan semoga bermanfaat!