StarMenu

Contextual popup menu with different shapes and multiple ways to fine-tune animation and position. The menu entries can be almost any kind of widgets.

Image

Every widgets can now popup a menu on tap! 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 shape.

Using the package is pretty simple:

  • make your widget a child of StarMenu:
StarMenu(
  params: StarMenuParameters(),
    onItemTapped: (index, controller) {
      if (index == 7)
        controller.closeMenu();
    }
  ),
  items: entries,
  child: FloatingActionButton(
    onPressed: () {print('FloatingActionButton tapped');},
    child: Icon(Icons.looks_one),
  ),
)
  • add the provided addStarMenu() Widget extension to your widget:
FloatingActionButton(
  onPressed: () {print('FloatingActionButton tapped');},
  child: Icon(Icons.looks_one),
).addStarMenu(context, entries, StarMenuParameters()),

where entries is a List<Widget> for the menu entries and StarMenuParameters() is defined as follow:

NameTypeDescription
shapeenumMenu shape kind. Could be MenuShape.circle, MenuShape.linear, MenuShape.grid.
linearShapeParamsclassSee below.
circleShapeParamsclassSee below.
gridShapeParamsclassSee below.
backgroundParamsclassSee below.
openDurationMsintOpen animation duration.
closeDurationMsintClose animation duration.
rotateItemsAnimationAngledoubleStarting rotation angle of the items that will reach 0 DEG when animation ends.
startItemScaleAnimationdoubleStarting scale of the items that will reach 1 when animation ends.
centerOffsetOffsetShift offset of menu center from the center of parent widget.
useScreenCenterboolUse the screen center instead of parent widget center.
checkItemsScreenBoundariesboolChecks if the whole menu boundaries exceed screen edges, if so set it in place to be all visible.
checkMenuScreenBoundariesboolChecks if items exceed screen edges, if so set them in place to be visible.
animationCurveCurveAnimation curve kind to use.
onItemTappedFunctionThe callback that is called when a menu item is tapped. It gives the ID of the item and a controller to eventually close the menu.

LinearShapeParams

NameTypeDescription
angledoubleDegree angle. Anticlockwise with 0° on 3 o'clock.
spacedoubleSpace between items.
alignmentLinearAlignmentleft, center, right, top, bottom. Useful when the linear shape is vertical or horizontal.

CircleShapeParams

NameTypeDescription
radiusXdoubleHorizontal radius.
radiusYdoubleVertical radius.
startAngledoubleStarting angle for the 1st item. Anticlockwise with 0° on the right.
endAngledoubleEnding angle for the 1st item. Anticlockwise with 0° on the right.

GridShapeParams

NameTypeDescription
columnsintNumber of columns.
columnsSpaceHintHorizontal space between items.
columnsSpaceVintVertical space between items.

BackgroundParams

NameTypeDescription
animatedBlurboolAnimate background blur from 0.0 to sigma if true.
sigmaXdoubleHorizontal blur.
sigmaYdoubleVertical blur.
animatedBackgroundColorboolAnimate backgroundColor from transparent if true.
backgroundColorColorBackground color.

Libraries

center_widget
star_item
star_menu
widget_params