Home Mobile Memahami Material Banner di Flutter

Memahami Material Banner di Flutter

0
Memahami Material Banner di Flutter

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'),
        ),
      ),
    );
  }
}
  1. ScaffoldMessenger.of(context).showMaterialBanner(): Metode ini menampilkan Material Banner di layar menggunakan ScaffoldMessenger. Kita memberikan MaterialBanner widget sebagai argumen, dan aksi yang diperlukan akan dijalankan saat tombol pada banner ditekan.
  2. 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.