A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

Last update: Aug 8, 2022

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

pub package

bottom_center bottom_left bottom_right center center_left center_right top_center top_left top_right bottom_center

Getting Started

Installation

Add

 circular_menu : ^latest_version

to your pubspec.yaml, and run

flutter pub get

in your project's root directory.

Basic Usage

Import it to your project file

import 'package:circular_menu/circular_menu.dart';

And add it in it's most basic form :

final circularMenu = CircularMenu(items: [
    CircularMenuItem(icon: Icons.home, onTap: () {
      // callback
    }),
    CircularMenuItem(icon: Icons.search, onTap: () {
      //callback
    }),
    CircularMenuItem(icon: Icons.settings, onTap: () {
      //callback
    }),
    CircularMenuItem(icon: Icons.star, onTap: () {
      //callback
    }),
    CircularMenuItem(icon: Icons.pages, onTap: () {
      //callback
    }),
  ]);
  • There are additional optional parameters to initialize the menu with:
  final circularMenu = CircularMenu(
      // menu alignment
      alignment: Alignment.bottomCenter,
      // menu radius
      radius: 100,
      // widget in the background holds actual page content
      backgroundWidget: MyCustomWidget(),
      // global key to control the animation anywhere in the code.
      key: // GlobalKey<CircularMenuState>(),
      // animation duration
      animationDuration: Duration(milliseconds: 500),
      // animation curve in forward
      curve: Curves.bounceOut,
      // animation curve in reverse
      reverseCurve: Curves.fastOutSlowIn,
	    // first item angle
      startingAngleInRadian : 0 ,
    	// last item angle
      endingAngleInRadian : pi,
      // toggle button callback
      toggleButtonOnPressed: () {
        //callback
      },
      // toggle button appearance properties
      toggleButtonColor: Colors.pink,
      toggleButtonBoxShadow: [
              BoxShadow(
                color: Colors.blue,
                blurRadius: 10,
              ),
            ], 
      toggleButtonIconColor: Colors.white,
      toggleButtonMargin: 10.0,
      toggleButtonPadding: 10.0,
      toggleButtonSize: 40.0,
      items: [
        CircularMenuItem(
          // menu item callback
          onTap: () {
            // callback
          },
          // menu item appearance properties
          icon: Icons.home,
          color: Colors.blue,
          elevation: 4.0,
          iconColor: Colors.white,
          iconSize: 30.0,
          margin: 10.0,
          padding: 10.0,
          // when 'animatedIcon' is passed,above 'icon' will be ignored
           animatedIcon:// AnimatedIcon(),
        ),
        CircularMenuItem(
            icon: Icons.search,
            onTap: () {
              //callback
            }),
        CircularMenuItem(
            icon: Icons.settings,
            onTap: () {
              //callback
            }),
        CircularMenuItem(
            icon: Icons.star,
            onTap: () {
              //callback
            }),
        CircularMenuItem(
            icon: Icons.pages,
            onTap: () {
              //callback
            }),
      ]);
  • add badge to CircularMenuItem by setting the property enableBadge to true
CircularMenuItem(
              enableBadge: true,
            )
  • customize badge by setting the parameters badgeColor , badgeLabel , badgeRadius badgeTextColor , badgeRightOffet , badgeTopOffet , badgeBottomOffet , badgeLeftOffet badgeTextStyle to satisfy requirements .
CircularMenuItem(
              enableBadge: true,
              badgeColor: Colors.amber,
              badgeLabel: '3',
              badgeRadius: 15,
              badgeTextColor: Colors.white,
              badgeRightOffet: 0,
              badgeTopOffet: 0,
              onTap: () {
                print('badge on circular menu item');
              },
              icon: Icons.home,
              color: Colors.teal,
            )
  • control animation anywhere in your code using a key:
  GlobalKey<CircularMenuState> key = GlobalKey<CircularMenuState>();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink,
        title: Text(
          'Flutter Circular Menu',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
      body: CircularMenu(
        alignment: Alignment.bottomCenter,
        startingAngleInRadian: 1.25 * pi,
        endingAngleInRadian: 1.75 * pi,
        backgroundWidget: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              MaterialButton(
                onPressed: () {
                  key.currentState.forwardAnimation();
                },
                color: Colors.pink,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                padding: const EdgeInsets.all(15),
                child: Text(
                  'forward',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              MaterialButton(
                onPressed: () {
                  key.currentState.reverseAnimation();
                },
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15)),
                padding: const EdgeInsets.all(15),
                color: Colors.pink,
                child: Text(
                  'reverse',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
            ],
          ),
        ),
        key: key,
        items: [
          CircularMenuItem(
            icon: Icons.home,
            onTap: () {},
            color: Colors.green,
            iconColor: Colors.white,
          ),
          CircularMenuItem(
            icon: Icons.search,
            onTap: () {},
            color: Colors.orange,
            iconColor: Colors.white,
          ),
          CircularMenuItem(
            icon: Icons.settings,
            onTap: () {},
            color: Colors.deepPurple,
            iconColor: Colors.white,
          ),
        ],
      ),
    );
  }
}
  • use MultiCircularMenu to show more than one menu in the same widget :
MultiCircularMenu(
          backgroundWidget: Center(
            child: Text(
              "Flutter Circular Menu",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 25,
              ),
            ),
          ),
          menus: [
            CircularMenu(
                toggleButtonColor: Colors.pink,
                alignment: Alignment.bottomLeft,
                items: [
                  CircularMenuItem(
                    onTap: () {
                      print('tapped');
                    },
                    icon: Icons.search,
                    color: Colors.blue,
                  ),
                  CircularMenuItem(
                    onTap: () {
                      print('tapped');
                    },
                    icon: Icons.home,
                    color: Colors.grey,
                  ),
                  CircularMenuItem(
                    onTap: () {
                      print('tapped');
                    },
                    icon: Icons.settings,
                    color: Colors.green,
                  ),
                ]),
            CircularMenu(
                toggleButtonColor: Colors.deepPurpleAccent,
                alignment: Alignment.bottomRight,
                items: [
                  CircularMenuItem(
                    onTap: () {
                      print('tapped');
                    },
                    icon: Icons.save,
                    color: Colors.teal,
                  ),
                  CircularMenuItem(
                    onTap: () {
                      print('tapped');
                    },
                    icon: Icons.filter,
                    color: Colors.amber,
                  ),
                  CircularMenuItem(
                    onTap: () {
                      print('tapped');
                    },
                    icon: Icons.star_border,
                    color: Colors.lightGreen,
                  ),
                ]),
          ])

GitHub

https://github.com/hasan-hm1/circular_menu
Comments
  • 1. CircularMenuItem onTap not working

    I tried out the package with image selection app. Both of these approaches were used, onTap: () => getImage(ImageSource.gallery) onTap (){getImage(ImageSource.camera)} but none trigger getImage method.

    Reviewed by ebena107 at 2020-09-04 11:54
  • 2. Wrong Button OnTap When radius <75

    hi,

    I found your widget have a bug, the on tap function button execute wrong button when CircularMenu Radius < 75.

    Screen Shot 2020-05-20 at 22 13 05

    When I tapped on black area on red button that execute orange button onTap.

    btw thank you for great widget

    Reviewed by jemariads at 2020-05-20 15:04
  • 3. CircularMenuItem not trigger onTab

    when try to a test the onTap for CircularMenuItem not called

    CircularMenu(
                    toggleButtonIconColor: ColorsHelper.BUTTON_COLOR,
                    backgroundWidget: Container(
                      height: 60,
                      width: 60,
                    ),
                    toggleButtonSize: 16,
                    animationDuration: Duration(milliseconds: 500),
                    startingAngleInRadian: pi,
                    endingAngleInRadian: 1.5 * pi,
                    radius: 70,
                    curve: Curves.bounceOut,
                    reverseCurve: Curves.fastOutSlowIn,
                    alignment: Alignment.center,
                    toggleButtonBoxShadow: [
                      BoxShadow(
                        color: ColorsHelper.BUTTON_COLOR,
                        blurRadius: 10,
                      ),
                    ],
                    toggleButtonColor: Colors.white,
                    items: [
                      CircularMenuItem(
                        color: Colors.white,
                        iconColor: ColorsHelper.MENU_ICON_COLOR,
                        iconSize: 24,
                        icon: Icons.download_sharp,
                        onTap: () => downloadApk(app),
                      ),
                      CircularMenuItem(
                        iconSize: 24,
                        color: Colors.white,
                        iconColor: ColorsHelper.MENU_ICON_COLOR,
                        icon: Icons.share,
                        onTap: () {
                          print("Share");
                          //callback
                        },
                      ),
                      CircularMenuItem(
                        iconSize: 24,
                        color: Colors.white,
                        iconColor: ColorsHelper.MENU_ICON_COLOR,
                        icon: Icons.edit,
                        onTap: () => openAppDetail(app),
                      ),
                    ],
                  )
    
    Reviewed by mahmood-heja at 2020-11-30 15:02
  • 4. Starting/Ending Angle Doesn't Change Upon Rebuild

    The starting and ending angles of the Circular Menu are not reflected during hot reload or if a rebuild occurs. They're only reflected during a hot restart or rerunning the application.

    I have a case where based on the language chosen the button moves from bottomRight to bottomLeft and so the angles have to be reflected. The button moves to the other side, but the initial angles remain the same even though I have an if condition to change them during the rebuild.

    Also, the Widget does not automatically change based on the application RTL/LTR.

    Reviewed by kareem-darwinz at 2020-10-23 21:37
  • 5. Use the circular_menu in appbar

    Hi, Can I use the circular_menu widget in the app bar, I have a IconButton upon which I open a PopupMenuButton, but this formation looks old in front of your widget please guide me how can I use this widget in the app bar.

    Thanks,

    Reviewed by areeba-arshad at 2020-09-22 20:38
  • 6. [Question] Can it be use in ListView?

    Hi @hasan-hm1 ,

    This is a very cool widget!

    Can we use this in a list view? In my list view, I have ListTile as list item, can I place this menu in the list item?

    Thanks in advance.

    Reviewed by jasonlaw at 2020-04-29 22:49
  • 7. How To Implement in Bottom Navigation Bar

    Thank you for the incredible work. Is there any way to implement this plugin into the Bottom Navigation Bar?

    Screen Shot 2022-07-22 at 11 08 03

    Right now I did like this, but actually, it was separated by the Bottom Nav Bar. The goal is that the toggle button should have the same color and text like nav bar.

    Thankyou Ofid

    Reviewed by f1dz at 2022-07-22 04:12
  • 8. Upgrade for Flutter 3.0

    the widget uses inside a stack that no longer has the overflow property starting from Flutter 3.0. Consequently, during the build phase, the Circular Menu does not recognize the Stack and produces an error. I tried to add // near the overflow property in Circular Menu and worked fine.

    Reviewed by salvatoremiccio at 2022-05-16 07:41
  • 9. Widget instead of animated icon data

    Animated icons are only few and I prefer to use my own icon.

    In my case I want to show Mobile as main icon and the user can select whether to call or Whatsapp or whatever else similar.

    Reviewed by YDA93 at 2022-03-24 13:46
  • 10. ontab fungerar inte

    class _CircleButtonState extends State { _CircleButtonState();

    void setstateham() { setState(() {

    });
    

    } @override Widget build(BuildContext context) { final double tophe = MediaQuery.of(context).padding.top; final pro = Provider.of(context); US(context);

    GlobalKey<CircularMenuState> key = GlobalKey<CircularMenuState>();
    return Scaffold(
      backgroundColor: pro.mainColor,
      body: CircularMenu(
        toggleButtonSize: 25.0,
        toggleButtonColor: pro.backColor_jinblue,
        toggleButtonIconColor: Colors.white,
        startingAngleInRadian: 0.45 * 3.14,
        endingAngleInRadian: 0.95 *  3.14,
        toggleButtonOnPressed: (){},
        key: key,
        items: [
          CircularMenuItem(
            icon: Icons.settings,
            onTap: () {
              pro.changeMainColor();
              print('click1');
              setstateham();
            },
            color: pro.backColor_jinblue,
            iconColor: Colors.white,
          ),
          CircularMenuItem(
            icon: Icons.info_outline_rounded,
            onTap: () {
              pro.changeMainColor();
              print('click2');
              setstateham();
            },
            color: pro.backColor_jinblue,
            iconColor: Colors.white,
          ),
          CircularMenuItem(
            icon: Icons.invert_colors,
            onTap: () {
              pro.changeMainColor();
              print('click3');
              setstateham();
            },
    
            color: pro.backColor_jinblue,
            iconColor: Colors.white,
          ),
    
        ],
      ),
    );
    

    } }

    Oavsett hur mycket ontab trycks ner händer ingenting. toggleButtonOnPressed: (){}, fungerar bra Animeringen av CircularMenuItem som utvecklas fungerar också. Men när jag lägger in någon funktion eller åtgärd i onTap händer ingenting. Det finns inget fel och det finns ingen logg som visar att beröringen har gått förlorad. Endast ViewPostIme-pekare 1 och ViewPostIme-pekare 0 som indikerar att någon del av skärmen berördes upprepas.

    Reviewed by LEESEONGKWON at 2022-02-16 07:46
  • 11. [question] How to disable an item

    Hi, First thanks for your work on this package.

    Currently I'm using CircularMenu with dynamic items (some options are available or not according to the current context displayed). Of course I could add items dynamically, but in some context only one item would have been displayed which is awful and impossible as CircularMenu needs at least 2 items. As my total number of items are fixed, I'd like to disable some items and I tried to set onTap: null but this is not possible.

    I perhaps miss something but is there a way to disable an item:

    • no ink if the user try to click on a disabled item
    • a disable color Or perhaps is it planned?

    Thanks for your answer

    Reviewed by eric-taix at 2021-12-16 14:04

Related

Circular Reveal Animation as Flutter widget!
Circular Reveal Animation as Flutter widget!

Circular Reveal Animation Circular Reveal Animation as Flutter widget! Inspired by Android's ViewAnimationUtils.createCircularReveal(...). Статья с оп

Aug 15, 2022
An animated menu with both RTL and LTR direction support

animated_menu A new Flutter package project. Getting Started This project is a starting point for a Dart package, a library module containing code tha

Jan 31, 2022
Animated Menu in Flutter using radial.
Animated Menu in Flutter using radial.

Animated_radial_Menu_in_Flutter Animated Menu in Flutter using radial. Getting Started This project is a starting point for a Flutter application. A f

Jul 18, 2022
Flutter-animated-ui-space-app - ⚡Animated UI Space App Challenge Part 5 🐱‍👤🐱‍👤
Flutter-animated-ui-space-app - ⚡Animated UI Space App Challenge Part 5 🐱‍👤🐱‍👤

Flutter-animated-ui-space-app ?? ?? Project img : Image Challenge Code Image Note !! : Please include your photos to show and install simple_animation

Jul 14, 2022
Flutter animation tutorials, such common animation, flare animation.
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Jul 3, 2022
Flutter animation tutorials, such common animation, flare animation.
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Jul 3, 2022
🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations
 🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

??‍?? Staggered Animations made with algeria ❤

Jun 15, 2022
Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs.
Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs.

Flutter DropdownButton2 Intro Flutter's core Dropdown Button widget with steady dropdown menu and many options you can customize to your needs. Featur

Aug 2, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

Aug 10, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

Jun 22, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Jul 20, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Jul 21, 2022
Nubank card animation - Nubank card animation built with flutter
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Jun 18, 2022
Fade animation - Add fade animation to your app easily
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Jan 28, 2022
Beautiful Animated ListView and GridView

staggered_animated_listview Beautiful Animated ListView and GridView Online Preview Getting Started This project is a starting point for a Flutter app

Dec 11, 2021
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.
✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. ?? Installing dependencies:

Aug 9, 2022
Cool 3D Drawer Animated With flutter part 2 🔥 🔥
 Cool 3D Drawer Animated With flutter part 2 🔥 🔥

Cool 3D Drawer Animated With flutter part 2 ?? ??

Feb 3, 2022
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Motion Tab Bar A beautiful animated widget for your Flutter apps Preview: | | Getting Started Add the plugin: dependencies: motion_tab_bar: ^0.1.5 B

Jul 28, 2022
Animated Backgrounds for Flutter.
Animated Backgrounds for Flutter.

Animated Backgrounds for Flutter Animated Backgrounds for Flutter. Easily extended to paint whatever you want on the canvas. Note: These examples are

Aug 17, 2022