StarMenu
Easy and Fast Way to build Context Menus

pub.dev link

Instead, a star would be wonderful! ;)

A simple way to attach a popup menu to any widget with any widget as menu entries. Menu entry widgets can bind a sub-menu with different shapes. Multiple ways to fine-tune animation and position.

Every widgets can be tapped to display a popup menu! There are currently 3 shapes to choose:

• linear: items are lined by a given angle with a given space between them and with a 3-way alignment.
• circle: items are lined up in a circle shape with a given radius and a star-end angle.
• grid: items are aligned in a grid shape with N columns and a given horizontal and vertical space.

linear	circle	panel

Please take a look at main.dart and main_more.dart in the example/lib dir for the examples.

Using the package is pretty simple:

• install the package with flutter pub add star_menu
• feed the items parameter with the menu entry widgets list
• set the params with StarMenuParameters
• set the child with a widget you wish to press to open the menu

StarMenu(
  params: StarMenuParameters(),
  onStateChanged: (state) => print('State changed: $state'),
  onItemTapped: (index, controller) {
    // here you can programmatically close the menu
    if (index == 7)
      controller.closeMenu();
	print('Menu item $index tapped');
  }),
  items: entries,
  child: FloatingActionButton(
    onPressed: () {print('FloatingActionButton tapped');},
    child: Icon(Icons.looks_one),
  ),
)

• onStateChanged triggers menu state canges:

enum MenuState {
  closed,
  closing,
  opening,
  open,
}

• items parameter is used when entries are known. If you want to build items in runtime use lazyItems, ie when StarMenu is already builded in the widget tree, but the menu items changed:

StarMenu(
  ...
  lazyItems: () async{
      return [
        Container(
          color: Color.fromARGB(255, Random().nextInt(255),
              Random().nextInt(255), Random().nextInt(255)),
          width: 60,
          height: 40,
          child: Text(userName),
        ),
        ...
      ];
  }
)

lazyItems is a callback function which returns Future<List<Widget>> which is called before opening the menu. Only lazyItems or items can be used.

StarMenu can be created also with addStarMenu() widget extension:

FloatingActionButton(
  onPressed: () {print('FloatingActionButton tapped');},
  child: Icon(Icons.looks_one),
).addStarMenu(
  items: items,
  params: StarMenuParameters(),
  controller: controller,
  onItemTapped: (index, controller) {}),

Programmatically open menu #

There are two ways to programmatically open a menu, for example when pressing a button:

• if you already have a StarMenu in the tree, add [StarMenuController] to it:

  StarMenuController starMenuController = StarMenuController();

  StarMenu(
    params: StarMenuParameters(),
    controller: starMenuController,
    items: entries,
    child: ...,
  )

then in your button:

ElevatedButton(
  onPressed: () => starMenuController.openMenu!(),
  child: ...,
),

• if you want to dinamically create a StartMenu for another widget, assign a GlobalKey to your widget:

GlobalKey containerKey = GlobalKey();
...
Container(
  key: containerKey,
  width: 40,
  height: 40,
),

then in your button call StarMenuOverlay.displayStarMenu with the widget context:

ElevatedButton(
  onPressed: () {
    StarMenuOverlay.displayStarMenu(
      containerKey.currentContext!,
      StarMenu(
        params: StarMenuParameters(),
        items: entries,
        parentContext: containerKey.currentContext,
      ),
    );
  },
  child: ...
),

StarMenu #

Only [items] or [lazyItems] can be passed, not both.

StarMenuParameters #

Class to define all the parameters for the shape, animation and menu behavior.

There are some StarMenuParameters factory presets with which you can set StarMenu.params

StarMenuParameters.dropdown(BuildContext context)
StarMenuParameters.panel(BuildContext context, {int columns = 3})

StarMenuParameters.arc(BuildContext context, ArcType type, {double radiusX = 130, double radiusY = 130})

type	result
ArcType.semiUp
ArcType.semiDown
ArcType.semiLeft
ArcType.semiRight
ArcType.quarterTopRight
ArcType.quarterTopLeft
ArcType.quarterBottomRight
ArcType.quarterBottomLeft

BoundaryBackground #

LinearShapeParams #

CircleShapeParams #

GridShapeParams #

BackgroundParams #