circular_menu 0.1.3

  • Readme
  • Changelog
  • Example
  • Installing
  • 91

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

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

[0.0.1] #

  • Initial release, 10.04.2020.

[0.0.2] #

  • Trying to figure out why Flutter Pub website doesn't display gifs in the README.md, 10.04.2020.

[0.1.0] #

  • Fix gifs in the README.md, 11.04.2020.

[0.1.1] #

  • add MultiCircularMenu widget, 2.05.2020.

[0.1.2] #

  • remove CircularMenuItem default padding, 21.05.2020.

[0.1.3] #

  • update README.md , 23.05.2020.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:circular_menu/circular_menu.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _colorName = 'No';
  Color _color = Colors.black;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink,
          title: Text('Flutter Circular Menu'),
        ),
        body: CircularMenu(
          alignment: Alignment.bottomCenter,
          backgroundWidget: Center(
            child: RichText(
              text: TextSpan(
                style: TextStyle(color: Colors.black, fontSize: 28),
                children: <TextSpan>[
                  TextSpan(
                    text: _colorName,
                    style:
                        TextStyle(color: _color, fontWeight: FontWeight.bold),
                  ),
                  TextSpan(text: ' button is clicked.'),
                ],
              ),
            ),
          ),
          toggleButtonColor: Colors.pink,
          items: [
            CircularMenuItem(
                icon: Icons.home,
                color: Colors.green,
                onTap: () {
                  setState(() {
                    _color = Colors.green;
                    _colorName = 'Green';
                  });
                }),
            CircularMenuItem(
                icon: Icons.search,
                color: Colors.blue,
                onTap: () {
                  setState(() {
                    _color = Colors.blue;
                    _colorName = 'Blue';
                  });
                }),
            CircularMenuItem(
                icon: Icons.settings,
                color: Colors.orange,
                onTap: () {
                  setState(() {
                    _color = Colors.orange;
                    _colorName = 'Orange';
                  });
                }),
            CircularMenuItem(
                icon: Icons.chat,
                color: Colors.purple,
                onTap: () {
                  setState(() {
                    _color = Colors.purple;
                    _colorName = 'Purple';
                  });
                }),
            CircularMenuItem(
                icon: Icons.notifications,
                color: Colors.brown,
                onTap: () {
                  setState(() {
                    _color = Colors.brown;
                    _colorName = 'Brown';
                  });
                })
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  circular_menu: ^0.1.3

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:circular_menu/circular_menu.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
81
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
91
Learn more about scoring.

We analyzed this package on Jul 2, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [circular_menu] that is in a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
flutter_test