Cách thêm Menu bật lên trên Flutter AppBar

Menu bật lên, còn được gọi là menu ngữ cảnh, là thành phần giao diện người dùng đồ họa (GUI) xuất hiện linh hoạt để phản hồi hành động của người dùng, thường là nhấp chuột phải vào một đối tượng hoặc khu vực cụ thể trong ứng dụng phần mềm hoặc hệ điều hành. Nó cung cấp một tập hợp các tùy chọn hoặc lệnh liên quan đến bối cảnh hiện tại, cung cấp quyền truy cập nhanh vào các hành động được sử dụng thường xuyên hoặc cho phép người dùng tương tác với đối tượng được chọn theo nhiều cách khác nhau.

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thêm menu bật lên hoặc menu thả xuống 3 chấm trên AppBar của Flutter App. Chúng tôi đã thêm PopupMenuButton để thêm menu bật lên trên AppBar.
 

Ví dụ:

AppBar(
  title: Text("Popup Menu on AppBar"),
  backgroundColor: Colors.redAccent,
  actions: [
    
        PopupMenuButton(
          // add icon, by default "3 dot" icon
          // icon: Icon(Icons.book)
          itemBuilder: (context){
            return [
                  PopupMenuItem<int>(
                      value: 0,
                      child: Text("My Account"),
                  ),

                  PopupMenuItem<int>(
                      value: 1,
                      child: Text("Settings"),
                  ),

                  PopupMenuItem<int>(
                      value: 2,
                      child: Text("Logout"),
                  ),
              ];
          },
          onSelected:(value){
            if(value == 0){
                print("My account menu is selected.");
            }else if(value == 1){
                print("Settings menu is selected.");
            }else if(value == 2){
                print("Logout menu is selected.");
            }
          }
        ),

  ],
)

Đầu ra:

Ví dụ về ứng dụng Flutter đầy đủ:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return MaterialApp(
         home: Home()
      );
  }
}

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
            title: Text("Popup Menu on AppBar"),
            backgroundColor: Colors.redAccent,
            actions: [
                 
                 PopupMenuButton(
                   // add icon, by default "3 dot" icon
                   // icon: Icon(Icons.book)
                   itemBuilder: (context){
                     return [
                            PopupMenuItem<int>(
                                value: 0,
                                child: Text("My Account"),
                            ),

                            PopupMenuItem<int>(
                                value: 1,
                                child: Text("Settings"),
                            ),

                            PopupMenuItem<int>(
                                value: 2,
                                child: Text("Logout"),
                            ),
                        ];
                   },
                   onSelected:(value){
                      if(value == 0){
                         print("My account menu is selected.");
                      }else if(value == 1){
                         print("Settings menu is selected.");
                      }else if(value == 2){
                         print("Logout menu is selected.");
                      }
                   }
                  ),

                   
            ],
         ),

         body: Container( 
               
        )
    );
  } 
}

Đầu ra:

Bằng cách này, bạn có thể thêm menu bật lên thả xuống trên AppBar trong Ứng dụng Flutter.