[Flutter][37] Menggunakan Badges Package

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Thursday, 22 Aug 2019

Hello world,

Badges sering digunakan untuk menampilkan bentuk notifikasi atau tanda yang biasa dipakai sebagai pembeda warna atau status yang sebenarnya sangat banyak penggunaannya. Bentuknya biasanya kotak biasa atau dengan sudut lengkung yang hampir mengarak ke bentuk lingkaran (lihat gambar di bawah). Untuk membuat badges dalam flutter kita dapat menggunakan widget Container dan memberinya radius serta background dan shadow. Tetapi sekarang tidak perlu lagi seperti itu. Sekarang ada package yang bisa memudahkan kita membuatnya.



Mari langsung ke tahap penggunaanya.

Tahap 1 . Install

Tambahkan package ke dalam file pubspec.yaml

dependencies:
  badges: ^1.1.0

Lalu import ke file yang akan kita tampilkan. contohnya ke main.dart

import 'package:badges/badges.dart';


Tahap 2. Penggunaan

Contoh:

Badge(
badgeColor: Colors.deepPurple,
shape: BadgeShape.square,
borderRadius: 10,
toAnimate: false,
badgeContent: Text(
"OPEN",
style: TextStyle(
fontSize: 10.0,
fontWeight: FontWeight.bold,
color: Colors.white),
),
),

Pada contoh di atas saya membuat badges dengan warna deepPurple, lalu bentuknya square dengan radius 10, dan berisi Text.

Contoh 2:

Badge(
badgeColor: Colors.deepPurple,
shape: BadgeShape.square,
borderRadius: 10,
toAnimate: false,
badgeContent: Row(
children: < Widget > [
Icon(
Icons.star,
size: 10.0,
color: Colors.white,
),
Text('4.0',
style: TextStyle(
color: Colors.white,
fontSize: 10.0)),
],
),
),

Pada contoh ke 2 ini saya tampilkan icon dan text pada badges.


Selamat mencoba :)