[Question] : Icon not visible

[Julietttead]

I'm contacting you because I can't get the icons to appear using circularMenuItems.

I've had a good look at the documentation, but I don't understand what I'm doing wrong.

Thank you in advance for your help,

The version 4.0.0 of cicular_menu id used.

flutter doctor

┌─────────────────────────────────────────────────────────┐
│ A new version of Flutter is available!                  │
│                                                         │
│ To update to the latest version, run "flutter upgrade". │
└─────────────────────────────────────────────────────────┘
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.1, on macOS 14.5 23F79 darwin-arm64, locale fr-FR)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.1.4)
[✓] VS Code (version 1.91.1)
[✓] Connected device (5 available)
[✓] Network resources

• No issues found!

CircularMenu(
                        toggleButtonColor: Colors.transparent,
                        alignment: Alignment.topRight,
                        backgroundWidget: const Icon(
                          Icons.menu,
                          color: Colors.white,
                          size: 30,
                        ),
                        items: [
                          CircularMenuItem(
                            iconColor: Colors.white,
                            icon: Icons.leaderboard,
                            iconSize: 20,
                            animatedIcon: null,
                            onTap: () => Navigator.pushNamed(
                              context,
                              Routes.leaderboard,
                              arguments: {
                                'user': widget.user,
                                'company': widget.company
                              },
                            ),
                          ),
                          CircularMenuItem(
                            iconColor: Colors.white,
                            icon: Icons.leaderboard,
                            animatedIcon: null,
                            iconSize: 20,
                            onTap: () => Navigator.pushNamed(
                              context,
                              Routes.settings,
                              arguments: {
                                'user': widget.user,
                                'company': widget.company
                              },
                            ),
                          ),
                          ],
                      )

[hasan-hm1]

Hi @Julietttead,

Thanks for opening this issue. I see you are using the backgroundWidget parameter the wrong way, this parameter represents the actual screen content and it is not related to the circular menu itself. Here is an example of how you can change your code:

CircularMenu( toggleButtonColor: Colors.transparent, alignment: Alignment.topRight, // whatever widget backgroundWidget: Center( child: const Icon( Icons.menu, color: Colors.white, size: 30, ), ), items: [ CircularMenuItem( iconColor: Colors.white, icon: Icons.leaderboard, iconSize: 20, animatedIcon: null, onTap: () => Navigator.pushNamed( context, Routes.leaderboard, arguments: { 'user': widget.user, 'company': widget.company }, ), ), CircularMenuItem( iconColor: Colors.white, icon: Icons.leaderboard, animatedIcon: null, iconSize: 20, onTap: () => Navigator.pushNamed( context, Routes.settings, arguments: { 'user': widget.user, 'company': widget.company }, ), ), ], )

[Julietttead]

Hi,

Thanks for your quick reply,

If I understand your explanation correctly, the backgroundWidet parameter represents the visible part of the circularManu which is used to trigger the display of the circularMenu.

If that's the case, I've already understood that it's the icons that make up the items parameter that I can't display.

Regards

[hasan-hm1]

Hi @Julietttead ,

Actually, the backgroundWidet parameter represents the screen's main content behind the CircularMenu, consider it as a stack there is the screen content, and above this there is the circular menu and its items. I hope it is clear now, also I would like to encourage you to check the example here for a better understanding.

Regards,

[Julietttead]

I think I've figured out how it works now, but even using the pub dev example, the icons in items don't display.

[hasan-hm1]

Could you please share the updated code after you checked the example?

[Julietttead]

I've literally copied and pasted the example: I've got the color bubbles but not the icons.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions[bot]]

This issue has been automatically closed because it has not had any recent activity.