Tutorial Flutter Membuat Icon Badge Notification dengan Mudah

Flutter icon badge

Codingtive.com - Icon badge atau icon notifikasi merupakan komponen dalam aplikasi yang sering digunakan untuk memberi tahu kepada pengguna mengenai adanya notifikasi atau pesan baru.

Untuk dapat membuatnya kita akan belajar menggunakan widget Stack, dan belajar menggunakan BoxDecoration. Langkah pertama, yaitu buatlah project flutter baru atau kamu dapat menggunakan project yang sudah ada. Untuk edittor kamu dapat menggunakan Android Studio atau Visual Studio Code.

Untuk pengguna Visual Studio Code baca juga tips menggunakan Visual Studio Code untuk Flutter.

1. Buka file main.dart

Setelah berhasil membuat project, buka file main.dart pada folder lib. Hapus semua kodenya, dan untuk kodenya ubah menjadi seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: "Flutter Icon Badge",
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Badge'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            
          ],
        ),
      ),
    );
  }
}

Sebagai contoh kita akan membuat 3 icon dengan badge notification dengan tampilan Row sehingga icon sejajar horizontal.

2. Buat function widget icon badge

Karena kita akan membuat 3 icon, supaya tidak mengulang-ulang kode maka kita memerlukan sebuah function baru untuk membuat widget icon dengan badge notifikasi. Kita akan memanfaatkan widget Stack dan menerapkan BoxDecoration. Tambahkan kode berikut setelah function build() :

Widget _buildIconBadge(
  IconData icon,
  String badgeText,
  Color badgeColor,
) {
  return Stack(
    children: <Widget>[
      Icon(
        icon,
        size: 50.0,
      ),
      Positioned(
        top: 2.0,
        right: 4.0,
        child: Container(
          padding: EdgeInsets.all(1.0),
          decoration: BoxDecoration(
            color: badgeColor,
            shape: BoxShape.circle,
          ),
          constraints: BoxConstraints(
            minWidth: 18.0,
            minHeight: 18.0,
          ),
          child: Center(
            child: Text(
              badgeText,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 10.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    ],
  );
}

Kita telah membuat function _buildIconBadge() dengan parameter icon, text untuk badge, dan warna badge, sehingga kita dapat membuatnya berbeda-beda. Nah, karena function tersebut hanya dipanggil pada class tersebut, sehingga sifatnya adalah private, yaitu menambahkan tanda _ pada penamaan function.

3. Menggunakan function _buildIconBadge()

Untuk menggunakan function yang sudah kita buat sebelumnya, tinggal memanggilnya saja didalam children Row. Sehingga kodenya menjadi seperti berikut :

body: Center(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      _buildIconBadge(Icons.home, "12", Colors.blue),
      _buildIconBadge(Icons.inbox, "2", Colors.red),
      _buildIconBadge(Icons.notifications, "4", Colors.orange),
    ],
  ),
),

Kita sudah membuat 3 icon badge yang berbeda-beda, kamu juga dapat melakukan kostumisasi lainnya pada function icon badge yang sudah kita buat seperti mengganti ukuran, bentuk, dan masih banyak lagi.

Sekarang coba jalankan dengan emulator atau hp kamu, hasilnya seperti berikut :

tutorial flutter icon badge notification

Full source code main.dart

Untuk kode lengkap file main.dart seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: "Flutter Icon Badge",
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Icon Badge'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            _buildIconBadge(Icons.home, "12", Colors.blue),
            _buildIconBadge(Icons.inbox, "2", Colors.red),
            _buildIconBadge(Icons.notifications, "4", Colors.orange),
          ],
        ),
      ),
    );
  }
}

Widget _buildIconBadge(
  IconData icon,
  String badgeText,
  Color badgeColor,
) {
  return Stack(
    children: <Widget>[
      Icon(
        icon,
        size: 50.0,
      ),
      Positioned(
        top: 2.0,
        right: 4.0,
        child: Container(
          padding: EdgeInsets.all(1.0),
          decoration: BoxDecoration(
            color: badgeColor,
            shape: BoxShape.circle,
          ),
          constraints: BoxConstraints(
            minWidth: 18.0,
            minHeight: 18.0,
          ),
          child: Center(
            child: Text(
              badgeText,
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 10.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    ],
  );
}

Selain itu, kodenya juga terdapat pada repository github saya.

Github Saya

Demikian tutorial untuk membuat icon badge notification dengan flutter, jika kamu ada kendala atau pertanyaan dapat menggunakan kolom komentar. Selanjutnya kamu dapat mempelajari tutorial berikut untuk menambah skill dan pengetahuan kamu tentang Flutter :

Tips Mengenal Widget dengan Mudah dan Cepat

Tutorial Flutter Membuat Tab dan Efek Menarik

Tutorial Flutter Cara Membuat Drawer Mudah dan Lengkap

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: