Material Banner adalah komponen antarmuka pengguna yang biasanya digunakan untuk memberikan informasi atau notifikasi kepada pengguna. Komponen ini muncul di bagian atas layar dan memberikan pesan singkat yang dapat mencakup pemberitahuan, peringatan, atau tindakan tertentu. Dalam artikel ini, kita akan menjelajahi konsep Material Banner dan cara menggunakannya dalam proyek Flutter.
Apa Itu Material Banner?
Material Banner adalah bagian dari desain Material di Flutter yang memberikan cara yang baik untuk menyoroti informasi atau memberikan pesan singkat kepada pengguna. Biasanya, Material Banner digunakan untuk memberikan respons terhadap tindakan pengguna atau menyampaikan pesan penting.
Contoh implementasinya
Output
Source Code :
main.dart
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MaterialBannerPage(),
);
}
}
materialbanner.dart
import 'package:flutter/material.dart';
class MaterialBannerPage extends StatefulWidget {
@override
_MaterialBannerPageState createState() => _MaterialBannerPageState();
}
class _MaterialBannerPageState extends State<MaterialBannerPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlueAccent,
title: Text('Material Banner Example'),
),
body: Center(
child: MaterialButton(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
color: Colors.lightBlueAccent,
onPressed: () {
// Menampilkan atau menyembunyikan Material Banner saat tombol ditekan
ScaffoldMessenger.of(context).showMaterialBanner(
MaterialBanner(
backgroundColor: Colors.lightBlueAccent.shade700,
content: Text(
'This is a Material Banner',
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.info,
color: Colors.white,
),
actions: [
TextButton(
onPressed: () {
// Menyembunyikan Material Banner saat tombol 'HIDE' ditekan
ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
},
child: Text(
'HIDE',
style: TextStyle(color: Colors.white),
),
),
TextButton(
onPressed: () {
// Melakukan aksi khusus saat tombol 'ACTION' ditekan
print('Banner Action Pressed!');
},
child: Text(
'ACTION',
style: TextStyle(color: Colors.white),
),
),
],
),
);
},
child: Text('Toggle Material Banner'),
),
),
);
}
}
ScaffoldMessenger.of(context).showMaterialBanner()
: Metode ini menampilkan Material Banner di layar menggunakanScaffoldMessenger
. Kita memberikanMaterialBanner
widget sebagai argumen, dan aksi yang diperlukan akan dijalankan saat tombol pada banner ditekan.ScaffoldMessenger.of(context).hideCurrentMaterialBanner()
: Metode ini menyembunyikan Material Banner yang sedang ditampilkan.
Anda akan melihat aplikasi dengan tombol “Toggle Material Banner”. Ketika tombol tersebut ditekan, Material Banner akan muncul atau disembunyikan di bagian bawah layar, sesuai dengan implementasi yang telah dibuat.
Dengan cara ini, Anda dapat dengan mudah menggunakan Material Banner dalam aplikasi Flutter Anda untuk memberikan pesan atau notifikasi kepada pengguna.