Memahami Flutter Popup Menu Button

Dalam pengembangan aplikasi Flutter, seringkali kita memerlukan cara untuk menampilkan menu opsi atau aksi. Flutter menyediakan widget PopupMenuButton untuk mempermudah hal ini. Mari kita jelajahi cara menggunakan widget ini untuk membuat menu yang responsif dan mudah digunakan

PopupMenuButton adalah widget Flutter yang digunakan untuk menampilkan menu kontekstual saat pengguna melakukan aksi tertentu, seperti mengeklik ikon tiga titik di pojok kanan atas. Menu ini akan muncul dan memberikan opsi tambahan kepada pengguna.

Contoh implementasi pada sebuah tampilan notesapp

Output :

Source code :

main.dart

void main() {
  runApp(MyNoteApp());
}

class MyNoteApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NoteScreen(),
    );
  }
}

popupmenutbutton.dart

import 'package:flutter/material.dart';

class NoteScreen extends StatefulWidget {
  @override
  _NoteScreenState createState() => _NoteScreenState();
}

class _NoteScreenState extends State<NoteScreen> {
  String _selectedColor = 'Yellow'; // Warna latar belakang default

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(10.0),
          child: Container(
              color: _getColor(),
              alignment: Alignment.center,
              child: Divider()),
        ),
        backgroundColor: _getColor(),
        title: Text(
          'Catatan Sederhana',
        ),
        actions: [
          PopupMenuButton<String>(
            onSelected: (String result) {
              setState(() {
                _selectedColor = result;
              });
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
              const PopupMenuItem<String>(
                value: 'Yellow',
                child: Text('Kuning'),
              ),
              const PopupMenuItem<String>(
                value: 'Blue',
                child: Text('Biru'),
              ),
              const PopupMenuItem<String>(
                value: 'Green',
                child: Text('Hijau'),
              ),
            ],
          ),
        ],
      ),
      body: Container(
        color: _getColor(), // Menggunakan warna yang dipilih
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Text(
              'Catatan Saya',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            Text(
              'Ini adalah catatan sederhana dengan latar belakang $_selectedColor.',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }

  Color _getColor() {
    switch (_selectedColor) {
      case 'Yellow':
        return Colors.yellow;
      case 'Blue':
        return Colors.blue;
      case 'Green':
        return Colors.green;
      default:
        return Colors.white;
    }
  }
}

Dengan menggunakan PopupMenuButton, Anda dapat dengan mudah menambahkan menu aksi atau opsi ke dalam aplikasi Flutter Anda. Sesuaikan opsi menu dan tindakan yang sesuai dengan kebutuhan proyek Anda.

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil mengimplementasikan PopupMenuButton dalam aplikasi Flutter Anda. Semoga artikel ini membantu dan bermanfaat untuk pengembangan aplikasi Flutter Anda!