Card image cap

[Flutter][37] Menggunakan Badges Package
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 :)





Card image cap
[Plugins][4] MD5 Pada Javascript
21 Aug 2019 Learn


Card image cap
[Flutter][38] Menggunakan Font Awesome (Fa-Icon) pada Flutter
02 Sep 2019 Learn