Flutter – Menú emergente

Muestra un menú cuando se presiona y llama a Selected cuando se descarta el menú porque se seleccionó un elemento. El valor pasado a onSelected es el valor del elemento de menú seleccionado. Si nos enfocamos en una aplicación, podemos ver que en cada aplicación hay un botón de menú emergente que funcionará. Entonces, en este artículo, implementaremos el botón de menú emergente. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Implementación paso a paso 

Paso 1 : crea un proyecto vacío.

Paso 2 : ahora agregue el paquete de material .

import 'package:flutter/material.dart';

Paso 3: Llame al método principal . En el método principal , vuelva a ejecutar la aplicación que ejecutará nuestra aplicación.

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

Paso 4: ahora crea una clase SimpleAppBarPopupMenuButton(). Eso devuelve la propiedad MaterialApp y In-home Use Scaffold con AppBar y el widget Text() centrado .

import 'package:flutter/material.dart';
 
// main method
void main() {
  // runApp method run the our main app
  runApp(SimpleAppBarPopupMenuButton());
}
 
class SimpleAppBarPopupMenuButton extends StatelessWidget {
  const SimpleAppBarPopupMenuButton({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // MaterialApp with
    // debugShowCheckedModeBanner false and title
    return MaterialApp( 
      debugShowCheckedModeBanner: false,
      title: 'AppBar Popup Menu Button',
      // scaffold with appbar
      home: Scaffold(
        // appbar with text
        appBar: AppBar( 
          title: Text('AppBar Popup Menu Button'),
        // body of the scaffold with center text.
        body: Center( 
          child: Text("Press the 3 Point Button Up!"),
        ),
      ),
    );
  }
}

Paso 5 : Ahora en A ppBar tenemos que usar widgets de acciones donde implementaremos el botón de menú emergente .

// popup menu button 
actions: [
            PopupMenuButton<int>(
              itemBuilder: (context) => [
                // popupmenu item 1
                PopupMenuItem( 
                  value: 1, 
                  // row has two child icon and text.
                  child: Row( 
                    children: [
                      Icon(Icons.star),
                      SizedBox(
                        // sized box with width 10
                        width: 10,
                      ),
                      Text("Get The App")
                    ],
                  ),
                ),
                // popupmenu item 2
                PopupMenuItem(
                  value: 2,
                  // row has two child icon and text
                  child: Row(
                    children: [
                      Icon(Icons.chrome_reader_mode),
                      SizedBox(
                        // sized box with width 10
                        width: 10,
                      ),
                      Text("About")
                    ],
                  ),
                ),
              ],
              offset: Offset(0, 100),
              color: Colors.grey,
              elevation: 2,
            ),
          ],

Código completo

import 'package:flutter/material.dart';
 
// main method
void main() {
  // runapp method run the our main app
  runApp(SimpleAppBarPopupMenuButton());
}
 
class SimpleAppBarPopupMenuButton extends StatelessWidget {
  const SimpleAppBarPopupMenuButton({Key? key}) : super(key: key);
  // definition of the dialog
  // box when value is selected
  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Alert!!"),
          content: Text("You are awesome!"),
          actions: [
            MaterialButton(
              child: Text("OK"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
 
  @override
  Widget build(BuildContext context) {
    // MaterialApp  with debugShowCheckedModeBanner
    // false and title.
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AppBar Popup Menu Button',
      // scaffold with appbar
      home: Scaffold(
        // appbar with title text
        appBar: AppBar(
          title: Text('AppBar Popup Menu Button'),
          // in action widget we have PopupMenuButton
          actions: [
            PopupMenuButton<int>(
              itemBuilder: (context) => [
                // PopupMenuItem 1
                PopupMenuItem( 
                  value: 1,
                  // row with 2 children
                  child: Row(
                    children: [
                      Icon(Icons.star),
                      SizedBox(
                        width: 10,
                      ),
                      Text("Get The App")
                    ],
                  ),
                ),
                // PopupMenuItem 2
                PopupMenuItem(
                  value: 2,
                  // row with two children
                  child: Row(  
                    children: [
                      Icon(Icons.chrome_reader_mode),
                      SizedBox(
                        width: 10,
                      ),
                      Text("About")
                    ],
                  ),
                ),
              ],
              offset: Offset(0, 100),
              color: Colors.grey,
              elevation: 2,
              // on selected we show the dialog box
              onSelected: (value) {
                // if value 1 show dialog
                if (value == 1) {
                  _showDialog(context);
                  // if value 2 show dialog
                } else if (value == 2) {
                  _showDialog(context);
                }
              },
            ),
          ],
        ),
        // body with centered text
        body: Center(
          child: Text("Press the 3 Point Button Up!"),
        ),
      ),
    );
  }
}

Producción:

Código Explicación 

• Main es el método principal utilizado para ejecutar la clase SimpleAppBarPopupMenuButton cuando se carga la página
• Creando la clase SimpleAppBarPopupMenuButton , sin estado debido a que solo muestra el botón del menú emergente (no cambiará)
• Como Flutter se basa en widgets, necesitamos crear uno
• Creando una aplicación Material que toma Scaffold permitiéndonos usar AppBar y Body
• Como AppBar tiene un título simple
• AppBar Tener acciones (elementos flotantes a la derecha), tomando PopupMenuButton Tomando PopupMenuItem Puede agregar tanto como desee
• Cada PopupMenuItem tiene su valor utilizado para realizar una acción en el método OnSelected, y el niño toma cualquier widget que necesite, aquí una fila con icono y texto
• OffSet Establece la posición desplegable que no está en el grifo
• color Establecer el color de fondo del menú emergente en gris
• Como cuerpo, lleva texto centrado