Full Screen Menu for Flutter

Requirements: Flutter 3.47+ (the package uses material_ui). On older Flutter versions, use full_screen_menu: ^2.0.1.

1. Add the dependency in your pubspec.yaml file.

dependencies:
  full_screen_menu: ^3.1.0

2. Import the full_screen_menu package.

import 'package:full_screen_menu/full_screen_menu.dart';

FullScreenMenu.show(
  context,
  items: [
    Image.asset('assets/image.png'),
    FSMenuItem(
      icon: const Icon(Icons.ac_unit, color: Colors.white),
      text: const Text('Make colder'),
      gradient: blueGradient,
      onTap: () => print('The weather is colder now'),
    ),
    FSMenuItem(
      icon: const Icon(Icons.wb_sunny, color: Colors.white),
      text: const Text('Make hotter'),
      gradient: orangeGradient,
      onTap: () => print('The weather is hotter now'),
    ),
  ],
);

Close the menu from code with FullScreenMenu.hide(), and check whether it is open with FullScreenMenu.isVisible.

The Android back button and back gesture close the menu and keep the screen open, with MaterialApp and MaterialApp.router (for example go_router), so you don't need a PopScope for it. One you added for this in earlier versions still works and can be removed. This applies to the screen (route) of the context passed to show. A PopScope with canPop: false on that screen still gets the back first, as with a Drawer: call FullScreenMenu.hide() from it to close the menu. To handle back yourself, pass closeMenuOnBackButton: false.

Shows the menu over the whole screen. The items and the close button stay inside the safe area.

A round gradient icon with a label below it.

Predefined gradients: orangeGradient, blueGradient, deepPurpleGradient, redGradient, greenGradient, lightBlueGradient, purpleGradient, lightGreenGradient and blueGreyGradient.

This project is licensed under the Apache License 2.0 - see the LICENSE file for details