Full Screen Menu for Flutter

Installing:

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

dependencies:
  full_screen_menu: ^2.0.1

2. Import the full_screen_menu package.

import 'package:full_screen_menu/full_screen_menu.dart';

Basic Usage:

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 menu is not a route, so to close it with the Android back button wrap your screen in a PopScope:

PopScope(
  canPop: false,
  onPopInvokedWithResult: (didPop, _) {
    if (!didPop && FullScreenMenu.isVisible) FullScreenMenu.hide();
  },
  child: ...,
);

FullScreenMenu.show

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

Parameters

Parameter	Description	Required
BuildContext context	A context below the Overlay (for example below MaterialApp)	+
List<Widget> items	The menu items. Any widget works, not just FSMenuItem	-
Color backgroundColor	Background color, drawn at 85% opacity. Defaults to black in a dark theme and white otherwise	-
bool closeMenuOnBackgroundTap	Close the menu when the user taps outside the items. Defaults to true	-

FSMenuItem

A round gradient icon with a label below it.

Parameters

Parameter	Description	Required
VoidCallback onTap	Called when the user taps the item	+
Text text	The label below the icon	-
Icon icon	The icon inside the circle	-
Gradient gradient	Fills the circle behind the icon. Defaults to blueGreyGradient	-

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

License

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