A simple customizable #1 animated circular menu for Flutter

circular menu

a simple animated circular menu for flutter, adjustable radius, colors, alignment, animation curve and animation duration.

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 its most basic form like it:

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,
      togglebuttonelevation: 4.0,
      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
            }),
      ]);

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,
          ),
        ],
      ),
    );
  }
}