flutter_radial_menu

flutter_radial_menu

A simple animated radial menu widget for Flutter.

Here is the GIF demo:

.

Step 1: Installation

Depend on it

Run this command:

With Dart:

 $ dart pub add flutter_radial_menu

With Flutter:

 $ flutter pub add flutter_radial_menu

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  flutter_radial_menu: ^0.0.1

Alternatively, your editor might support dart pub get or flutter pub get.

Step 2: Create RadialMenu

Import the package, create a RadialMenu and pass it your RadialMenuItems.

import 'package:flutter/material.dart';
import 'package:flutter_radial_menu/flutter_radial_menu.dart';
void main() {
  runApp(
    new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new RadialMenu(
            items: <RadialMenuItem<int>>[
              const RadialMenuItem<int>(
                value: 1,
                child: const Icon(Icons.add),
              ),
              const RadialMenuItem<int>(
                value: -1,
                child: const Icon(Icons.remove),
              )
            ],
            radius: 100.0,
            onSelected: print,
          ),
        ),
      ),
    ),
  );
}

Customization

RadialMenuItem

Parameter Default Description
child null Usually an Icon widget, gets placed in the center of the button.
value null Value that gets returned when this item is selected.
tooltip null Tooltip displayed when the button is long-pressed.
size 48.0 Size of the button.
backgroundColor Theme.of(context).primaryColor Background fill color of the button.
iconColor Theme.of(context).primaryIconTheme.color The color of the child icon.

RadialMenu

Parameter Default Description
items null The list of possible items to select from.
onSelected null Called when the user selects an item.
radius 100.0 The radius of the arc used to lay out the items and draw the progress bar.
menuAnimationDuration 1000 milliseconds Duration of the menu opening/closing animation.
progressAnimationDuration 1000 milliseconds Duration of the action activation progress arc animation.

Full Example

Here is a full example:

demo.dart

import 'package:flutter/material.dart';
import 'package:flutter_radial_menu/flutter_radial_menu.dart';
enum MenuOptions {
  unread,
  share,
  archive,
  delete,
  backup,
  copy,
}
void main() {
  GlobalKey<RadialMenuState> _menuKey = new GlobalKey<RadialMenuState>();
  final List<RadialMenuItem<MenuOptions>> items = <RadialMenuItem<MenuOptions>>[
    new RadialMenuItem<MenuOptions>(
      value: MenuOptions.unread,
      child: new Icon(
        Icons.markunread,
      ),
      iconColor: Colors.white,
      backgroundColor: Colors.blue[400],
      tooltip: 'unread',
    ),
    new RadialMenuItem<MenuOptions>(
      value: MenuOptions.share,
      child: new Icon(
        Icons.share,
      ),
      iconColor: Colors.white,
      backgroundColor: Colors.green[400],
    ),
    new RadialMenuItem<MenuOptions>(
      value: MenuOptions.archive,
      child: new Icon(
        Icons.archive,
      ),
      iconColor: Colors.white,
      backgroundColor: Colors.yellow[400],
    ),
    new RadialMenuItem<MenuOptions>(
      value: MenuOptions.delete,
      child: new Icon(
        Icons.delete,
      ),
      iconColor: Colors.white,
      backgroundColor: Colors.red[400],
    ),
    new RadialMenuItem<MenuOptions>(
      value: MenuOptions.backup,
      child: new Icon(
        Icons.backup,
      ),
      iconColor: Colors.white,
      backgroundColor: Colors.black,
    ),
    new RadialMenuItem<MenuOptions>(
      value: MenuOptions.copy,
      child: new Icon(
        Icons.content_copy,
      ),
      iconColor: Colors.white,
      backgroundColor: Colors.indigo[400],
    ),
  ];
  void _onItemSelected(MenuOptions value) {
    print(value);
  }
  runApp(
    new MaterialApp(
      home: new Scaffold(
        body: new Center(
          child: new RadialMenu(
            key: _menuKey,
            items: items,
            radius: 100.0,
            onSelected: _onItemSelected,
          ),
        ),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.restore),
          onPressed: () => _menuKey.currentState.reset(),
        ),
      ),
    ),
  );
}

Reference

Read more here.
Download code here.
Follow code author here.

Tags: