I need this kind of radial menu but without attaching it to the floatingActionButton section but simple as interaction on a widget

Hi, I am trying out my project on Web too. Thats where I need the ringWidth. I see you get this from ringDiameter.. and that from screenWidth.

Is there any recommended way that I may get that present ringWidth? Besides doing the entire thing from scratch with Screen class??
Also, if there isnt, how may I know when the widget has finished its constructor, because thats the time I might try to trap the fabKey.currentState.widget.ringDiameter value into a double variable.

thanks,
Great package by the way!

We need null safety support for this package. Please :)

Since you have merged my PR would you mind updating pub.dev?

Thanks

I just wrap children in GestureDetector so I can do something onTap. but it's not working.

options: <Widget>[
              GestureDetector(
                behavior: prefix0.HitTestBehavior.opaque,
                onTap: () => print('1'),
                child: IconButton(
                  icon: Icon(Icons.widgets),
                  onPressed: () {},
                  iconSize: 48.0,
                  color: Colors.red,
                ),
              ),
              GestureDetector(
                onTap: () => print('2'),
                child: IconButton(
                  icon: Icon(Icons.widgets),
                  onPressed: () {},
                  iconSize: 48.0,
                  color: Colors.white,
                ),
              ),
              GestureDetector(
                onTap: () => print('3'),
                child: IconButton(
                  icon: Icon(Icons.widgets),
                  onPressed: () {},
                  iconSize: 48.0,
                  color: Colors.white,
                ),
              )
            ],

See:

I'll include a fix in my existing PR.
The fix contain:

1. Close the menu in case of rotation
2. Call _calculateProps();

There is no option to set/change the FAB icon color. It defaults to black and no way to change it.

After clicked on one menu item, I want a solution to close menu by code but I can't found anyway to do it at the moment. This feature is quite comment, I think it should be an item in wishlist features :)
Thanks for your time.

Hey! Congrats for this project! It's unique at this time!

1. Using version: 1.0.0

2 This is the code structure:

`floatingActionButton: FabCircularMenu(
        alignment: Alignment.bottomRight,
        ringWidth: 130,
        children: <Widget>[
          IconButton(
              iconSize: 40,
              icon: Icon(
                Icons.home,
              ),
              onPressed: () {
                print('Home');
              }),
          IconButton(
              iconSize: 40,
              icon: Icon(
                Icons.favorite,
                size: 40,
              ),
              onPressed: () {
                controller.go2List();
                print('GoToLists');
              }),
          IconButton(
              iconSize: 40,
              icon: Icon(
                Icons.favorite,
                size: 40,
              ),
              onPressed: () {
                print('Favorite');
              }),
          IconButton(
              iconSize: 40,
              icon: Icon(
                Icons.favorite,
                size: 40,
              ),
              onPressed: () {
                print('Favorite');
              }),
          IconButton(
              iconSize: 40,
              icon: Icon(
                Icons.favorite,
                size: 40,
              ),
              onPressed: () {
                print('Favorite');
              }),
        ],
        ringColor: Color.fromARGB(70, 255, 255, 255),
      ),`

3. The issue
   The first icon in the list ( Icons.home, ) seems to be unclickable... But sometimes is possible to do the click, somewhere around the icon... (kind of offset region)

Hello.

I wanna be change fab close button background color.
I do not find interface to change background color.
Can you add "fabCloseColor" property ?

Best regards.

could yuu help me how can i do that?

Hey! First of all, thanks for waiting. I've just added a controller property that takes a FabCircularMenuController which allows you to control the menu programatically.

final controller = FabCircularMenuController();

FabCircularMenu(
  child: ...,
  controller: controller,
  options: <Widget>[
    IconButton(icon: Icon(Icons.widgets), onPressed: () {
      controller.isOpen = false;
    }, iconSize: 48.0, color: Colors.white),
    ...
  ],
 )

I will improve documentation and examples soon.

Originally posted by @marianocordoba in #4 (comment)

If there is only one option passed to this widget, it will crash because of this line trying to divide by zero:

  final double angle = 90.0 / (widgets.length * 2 - 2) * (index * 2);

I discovered it by pressing save after adding only one option, and hot reload resulted in an error.

When I tried to dock the FAB menu using central dock, it does not follow the proper alignment

Automatically close when user clicks menu, or button loses focus.

1. why do you force the child parameter? seems it is not really necessary.
2. I suggest to assert required params, e.g. FabCircularMenu(...) : assert(child != null), assert(options != null && options.length > 0);
3. If you want to provide this code as a library you need to move it to the lib/src folder and provide a dart file with export statements. See other libs. Currently I am unable to use your code as a lib. I rather copied the source code into my own repository instead.
4. Please add a dispose method:

    @override
    void dispose() {
      controller?.dispose();
      super.dispose();
    }

5. I still struggle when using 4 icons. In closed state the middle icons 1 and 2 are shown in the right-bottom corner beneath the fab.

You may find the problem, I don't currently.

6. Seems it is not allowed to init the controller twice. Move that initialization to the initState() method instead:

  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: widget.animationDuration, vsync: this);
  }

Hi. when use it inside tab view, after change of tab, I have this exception:

Basically in this case we need use animation after dispose, any idea?

AnimationController.reverse() called after AnimationController.dispose()
AnimationController methods should not be used after calling dispose.
'package:flutter/src/animation/animation_controller.dart':
Failed assertion: line 488 pos 7: '_ticker != null'

Hi,

First, thanks for the nice plugin from my point of view it's a good addition when it comes to usability and quick navigation.

I'm facing an issue that the first button in my list is hidden, it is drawn under the "bottomNavigationBar" which is in my case a TabSelecgtor widget. The image below shows the situation:

This is the code of the menu, please note the page is nested into another view using Scaffold to render the above mentioned bottom bar.

Scaffold(
        body: ListView(
          children: listItems,
        ),
        floatingActionButton: state is ProjectHomeEditDetailsState
            ? null
            : Builder(
                builder: (context) => FabCircularMenu(
                  key: fabKey,
                  ringWidth: 50,
                  alignment: Alignment(1, 1),
                  ringDiameter: min(MediaQuery.of(context).size.width,
                          MediaQuery.of(context).size.height) *
                      0.9,
                  children: <Widget>[
                   //Not shown
                    IconButton(
                        icon: Icon(Icons.delete_forever),
                        onPressed: () {},
                       ),
                    // All below are shown
                    IconButton(
                        icon: Icon(Icons.edit),
                         onPressed: () {},
                     ),
                    IconButton(
                      icon: Icon(Icons.search),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(Icons.sync),
                      onPressed: () {},
                    ),
                  ],
                ),
              ),
      );

I am having an issue that the diameter is not centred around the FAB. Please see attached image.

Thanks to sharing very awesome library.
I have a question
In this library how can we have more scrollable items? By default there are fixed items with counts. For example can we have 50 scrollable items?

This is because the main Container's transform: Matrix4.translationValues(16.0, 16.0, 0.0) does not take into account the alignment and always does the translation into one direction both axis. It should be transform: Matrix4.translationValues(16.0 * _directionX, 16.0 * _directionY, 0.0) instead. I'll push a fix.

Currently I would like my other buttons to close when I click on the FABcircularMenu, but the widget lacks an attribute for me to have a callback, I cant do so :(

when i set builder: (context) => FabCircularMenu( key: fabKey, // Cannot be Alignment.centeralignment: **Alignment**(0.8,0.8), ringColor: Colors.white, ringDiameter: 500.0, ringWidth: 120.0, fabSize: 64.0, fabElevation: 8.0, the problem is FabCircularMenu's children widget is disorder.

if the plugin can support floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked argment , it will be perfect project .

I tried to create a Column widget with the Icon and the Text widget, but then the button would be placed in a random place far away from where it was supposed to. I even tried the column as a child of the RawMaterialButton, but same result.

Is it possible to add text below the icon with this package? I would love know. Great package thanks for the content!

Flutter with Null safety is coming. Would be nice have support to this feature

Take a look to this document with step by step.

PS: vector_math dependency already support null safety