star_menu 1.0.4

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 76

The StarMenu widget. #

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

  • [parentKey] GlobalKey of the parent widget. Needed to retrieve its position.
  • [items] List of menu widget items.
  • [radiusX] Horizontal radius of circle shape.
  • [radiusY] Vertical radius of circle shape.
  • [radiusIncrement] Menu items spacing of linear shape.
  • [startAngle] Starting degree angle in circle shape and angle of the linear shape.
  • [endAngle] Ending degree angle in circle shape.
  • [columns] Number of columns in grid shape.
  • [columnsSpaceH] Horizontal space between columns in grid shape.
  • [columnsSpaceV] Vertical space between rows in grid shape.
  • [shape] Menu shape kind. Could be [MenuShape.circle], [MenuShape.linear], [MenuShape.grid].
  • [durationMs] Duration of the items animation.
  • [itemDelayMs] Items animation delay. The first item starts at 0, the second starts after [itemDelayMs]*1, the third after [itemDelayMs]*2 and so on. Every items animation take [durationMs] ms, but the whole animation will take durationMs+(N items -1)*itemDelayMs ms
  • [rotateItemsAnimationAngle] Start rotation angle of the animation to reach 0 DEG when animation ends.
  • [startItemScaleAnimation] Start scale of the animation to reach 1.0 when animation ends.
  • [backgroundColor] Color of screen background.
  • [centerOffset] Shift offset of menu center.
  • [useScreenCenter] Use the screen center instead of [parentKey] center.
  • [checkScreenBoundaries] Checks if items exceed screen edges, if so set them in place to be visible.
  • [animationCurve] Animation curve to use.
  • [onItemPressed] The callback that is called when the widget item is tapped. If the widget has its own tap event, this callback is not delivered. See the below code example to see how to manually close the menu.

Import the StarMenu package #

To use the StarMenu plugin, follow the plugin installation instructions.

Use the package #

Add the following import to your Dart code:

import 'package:star_menu/star_menu.dart';

We can now use a function to build StarMenu widget and open it within an user event with the StarMenuController.displayStarMenu() method.

// Optional for an use case like the FloatingActionButton widget below
GlobalKey starMenuKey = GlobalKey();
// Optional for an use case like the Checkbox widget below
var _value = ValueNotifier<bool>(false);
Widget _buildStarMenu(GlobalKey parent) {
return StarMenu(
     key: starMenuKey,  // used to close the menu in the case a widget has the onTap event
     parentKey: parent,
     shape: MenuShape.circle,
     radiusX: 100,
     radiusY: 150,
     durationMs: 400,
     itemDelayMs: 80,
     backgroundColor: Color.fromARGB(180, 0, 0, 0),
     animationCurve: Curves.easeIn,
     onItemPressed: (i) => {print("Item pressed: $i")},
     items: <Widget>[
       FloatingActionButton(
         backgroundColor: Colors.red,
         child: Icon(Icons.beach_access),
         onPressed: () {
           // This widget has the onPressed event and StarMenu doesn't grab its [onItemPressed].
           // If you want to manually close this menu, assign a
           // GlobalKey to it and do the following:
           StarMenuState sms = starMenuKey.currentState;
           sms.close();
         },
       ),
       Material(
         color: Colors.yellow,
         child: ValueListenableBuilder(
           // Since StarMenu is built on an overlay, it has a different context and
           // its [value] property should be binded to a Listenable to be updated.
           // The same happens for example to the [Switch] widget and others widgets
           // that need to be updated.
           valueListenable: _value,
           builder: (context, value, child) {
             return Checkbox(
               value: _value.value,
               onChanged: (bool b) {
                 setState( () => _value.value = b );
               },
             );
           }
         ),
       ),
       [...] // other Widgets menu entries
     ],
   );
}

Then call _buildStarMenu() for example when the user tap on a widget:

 @override
 Widget build(BuildContext context) {
   fabKey = GlobalKey();
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Stack(
       children: <Widget>[
         FloatingActionButton(
             key: fabKey,
             backgroundColor: Colors.amberAccent,
             foregroundColor: Colors.black,
             child: Icon(Icons.ac_unit),
             onPressed: () {
               StarMenuController.displayStarMenu(_buildMenu(fabKey), fabKey);
             },
         ),
       ],
     ),
   );
 }

[1.0.4] - 12 Jun 2019

  • blurring background while opening

[1.0.2] - 31 Mar 2019

  • fixed some naming conventions and formats for pub

[1.0.0] - 31 Mar 2019

  • initial release.

example/README.md

The StarMenu widget. #

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. #

Alt text

  • [parentKey] GlobalKey of the parent widget. Needed to retrieve its position.
  • [items] List of menu widget items.
  • [radiusX] Horizontal radius of circle shape.
  • [radiusY] Vertical radius of circle shape.
  • [radiusIncrement] Menu items spacing of linear shape.
  • [startAngle] Starting degree angle in circle shape and angle of the linear shape.
  • [endAngle] Ending degree angle in circle shape.
  • [columns] Number of columns in grid shape.
  • [columnsSpaceH] Horizontal space between columns in grid shape.
  • [columnsSpaceV] Vertical space between rows in grid shape.
  • [shape] Menu shape kind. Could be [MenuShape.circle], [MenuShape.linear], [MenuShape.grid].
  • [durationMs] Duration of the items animation.
  • [itemDelayMs] Items animation delay. The first item starts at 0, the second starts after [itemDelayMs]*1, the third after [itemDelayMs]*2 and so on. Every items animation take [durationMs] ms, but the whole animation will take durationMs+(N items -1)*itemDelayMs ms
  • [rotateItemsAnimationAngle] Start rotation angle of the animation to reach 0 DEG when animation ends.
  • [startItemScaleAnimation] Start scale of the animation to reach 1.0 when animation ends.
  • [backgroundColor] Color of screen background.
  • [centerOffset] Shift offset of menu center.
  • [useScreenCenter] Use the screen center instead of [parentKey] center.
  • [checkScreenBoundaries] Checks if items exceed screen edges, if so set them in place to be visible.
  • [animationCurve] Animation curve to use.
  • [onItemPressed] The callback that is called when the widget item is tapped. If the widget has its own tap event, this callback is not delivered. See the below code example to see how to manually close the menu.

Import the StarMenu package #

To use the StarMenu plugin, follow the plugin installation instructions.

Use the package #

Add the following import to your Dart code:

import 'package:star_menu/star_menu.dart';

We can now use a function to build StarMenu widget and open it within an user event with the StarMenuController.displayStarMenu() method.

// Optional for an use case like the FloatingActionButton widget below
GlobalKey starMenuKey = GlobalKey();
// Optional for an use case like the Checkbox widget below
var _value = ValueNotifier<bool>(false);
Widget _buildStarMenu(GlobalKey parent) {
return StarMenu(
     key: starMenuKey,  // used to close the menu in the case a widget has the onTap event
     parentKey: parent,
     shape: MenuShape.circle,
     radiusX: 100,
     radiusY: 150,
     durationMs: 400,
     itemDelayMs: 80,
     backgroundColor: Color.fromARGB(180, 0, 0, 0),
     animationCurve: Curves.easeIn,
     onItemPressed: (i) => {print("Item pressed: $i")},
     items: <Widget>[
       FloatingActionButton(
         backgroundColor: Colors.red,
         child: Icon(Icons.beach_access),
         onPressed: () {
           // This widget has the onPressed event and StarMenu doesn't grab its [onItemPressed].
           // If you want to manually close this menu, assign a
           // GlobalKey to it and do the following:
           StarMenuState sms = starMenuKey.currentState;
           sms.close();
         },
       ),
       Material(
         color: Colors.yellow,
         child: ValueListenableBuilder(
           // Since StarMenu is built on an overlay, it has a different context and
           // its [value] property should be binded to a Listenable to be updated.
           // The same happens for example to the [Switch] widget and others widgets
           // that need to be updated.
           valueListenable: _value,
           builder: (context, value, child) {
             return Checkbox(
               value: _value.value,
               onChanged: (bool b) {
                 setState( () => _value.value = b );
               },
             );
           }
         ),
       ),
       [...] // other Widgets menu entries
     ],
   );
}

Then call _buildStarMenu() for example when the user tap on a widget:

 @override
 Widget build(BuildContext context) {
   fabKey = GlobalKey();
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Stack(
       children: <Widget>[
         FloatingActionButton(
             key: fabKey,
             backgroundColor: Colors.amberAccent,
             foregroundColor: Colors.black,
             child: Icon(Icons.ac_unit),
             onPressed: () {
               StarMenuController.displayStarMenu(_buildMenu(fabKey), fabKey);
             },
         ),
       ],
     ),
   );
 }

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  star_menu: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:star_menu/star_menu.dart';
  
Version Uploaded Documentation Archive
1.0.4 Jun 12, 2019 Go to the documentation of star_menu 1.0.4 Download star_menu 1.0.4 archive
1.0.3 Jun 12, 2019 Go to the documentation of star_menu 1.0.3 Download star_menu 1.0.3 archive
1.0.2 Mar 31, 2019 Go to the documentation of star_menu 1.0.2 Download star_menu 1.0.2 archive
1.0.1 Mar 31, 2019 Go to the documentation of star_menu 1.0.1 Download star_menu 1.0.1 archive
1.0.0 Mar 31, 2019 Go to the documentation of star_menu 1.0.0 Download star_menu 1.0.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
55
Health:
Code health derived from static analysis. [more]
98
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
95
Overall:
Weighted score of the above. [more]
76
Learn more about scoring.

We analyzed this package on Jun 17, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.3.2
  • pana: 0.12.18
  • Flutter: 1.5.4-hotfix.2

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Fix lib/star_menu.dart. (-1.49 points)

Analysis of lib/star_menu.dart reported 3 hints:

line 271 col 13: Don't explicitly initialize variables to null.

line 294 col 21: The method '_capturePng' isn't used.

line 305 col 11: The value of the local variable 'bs64' isn't used.

Fix lib/src/star_item.dart. (-0.50 points)

Analysis of lib/src/star_item.dart reported 1 hint:

line 3 col 8: Unused import: 'dart:ui'.

Maintenance issues and suggestions

Support latest dependencies. (-5 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test