A simple animated radial menu widget for Flutter.

Victor Choueiri

Last update: Jan 7, 2023

Related tags

Overview

flutter_radial_menu

A radial menu widget for Flutter.

Installation

Install the latest version from pub.

Quick Start

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

Take a look at the demo for a more elaborate example.

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.

flutter stepper_touch widget

stepper_touch the concept of the widget inspired from Nikolay Kuchkarov. i extended the functionality to be more useful in real world applications Tha

Dec 30, 2022

A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

Jan 5, 2023

A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.

pin_code_text_field It's a beautiful and highly customizable Flutter widget for entering pin code. Suitable for use cases such as login and OTP. Usage

Dec 28, 2022

Flutter FoldingCell widget

Simple FoldingCell widget Simple folding cell widget, pass frontWidget and innerWidget to fold and unfold. Installation Add dependency in pubspec.yaml

Dec 30, 2022

A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories.

emoji_picker_flutter Yet another Emoji Picker for Flutter 🤩 Note: This package is based on emoji_picker which has been deprecated and not maintained

Dec 24, 2022

A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps.

html_widgets A Flutter Widget Approach for using HTML tags & CSS styles in your upcoming Apps. Text Widgets *text property is required for all the tex

Jul 14, 2022

Flutter widget with pond ripple effect!

Ripple pond effect This project contains Ripple pond effect widget. It makes wave when you click on it! There is still many things to improve in this

Dec 19, 2021

top-snackbar-flutter - Modern UI snackbar widget

Jan 7, 2023

A flutter widget where a card is expanded ontap.

Expansion card This package provides an easy implementation of a Expansion type card where you can also add gif at the background. How to use import '

Dec 6, 2022

Comments

Clicking on any of the buttons of the menu (except the central one) starts the animation, but at the end everything ends with an internal application crash in the Future _activate (int itemIndex) async procedure of the radial menu class:

Launching lib/main.dart on SM G925I in debug mode...
Initializing gradle...
Resolving dependencies...
Gradle task 'assembleDebug'...
Built build/app/outputs/apk/debug/app-debug.apk.
Installing build/app/outputs/apk/app.apk...
Syncing files to device SM G925I...
D/        (32028): [G3D][cpomp_get_shader_from_blob_cache][compile_status: 1][shader_size: 0][ir_size: 7582]
D/        (32028): [G3D][cpomp_get_shader_from_blob_cache][compile_status: 1][shader_size: 0][ir_size: 11059]
D/        (32028): [G3D][cpomp_get_shader_from_blob_cache][compile_status: 1][shader_size: 0][ir_size: 7582]
D/        (32028): [G3D][cpomp_get_shader_from_blob_cache][compile_status: 1][shader_size: 0][ir_size: 7582]
D/ViewRootImpl(32028): ViewPostImeInputStage ACTION_DOWN
D/ViewRootImpl(32028): ViewPostImeInputStage ACTION_DOWN
E/flutter (32028): [ERROR:flutter/shell/common/shell.cc(184)] Dart Error: Unhandled exception:
E/flutter (32028): type '(MenuOptions) => void' is not a subtype of type '(dynamic) => void'
E/flutter (32028): #0      RadialMenuState._activate (package:radial/radial_menu.dart:126:16)
E/flutter (32028): <asynchronous suspension>
E/flutter (32028): #1      RadialMenuState._buildActionButton.<anonymous closure> (package:radial/radial_menu.dart:149:26)
E/flutter (32028): #2      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:507:14)
E/flutter (32028): #3      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:562:30)
E/flutter (32028): #4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102:24)
E/flutter (32028): #5      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:242:9)
E/flutter (32028): #6      TapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:175:7)
E/flutter (32028): #7      PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:315:9)
E/flutter (32028): #8      PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:73:12)
E/flutter (32028): #9      PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:101:11)
E/flutter (32028): #10     _WidgetsFlutterBinding&BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:180:19)
E/flutter (32028): #11     _WidgetsFlutterBinding&BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:158:22)
E/flutter (32028): #12     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:138:7)
E/flutter (32028): #13     _WidgetsFlutterBinding&BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:101:7)
E/flutter (32028): #14     _WidgetsFlutterBinding&BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:85:7)
E/flutter (32028): #15     _invoke1 (dart:ui/hooks.dart:168:13)
E/flutter (32028): #16     _dispatchPointerDataPacket (dart:ui/hooks.dart:122:5)

Flutter doctor:

/home/michael_k/flutter/bin/flutter doctor --verbose
[✓] Flutter (Channel beta, v1.2.1, on Linux, locale en_US.UTF-8)
    • Flutter version 1.2.1 at /home/michael_k/flutter
    • Framework revision 8661d8aecd (12 days ago), 2019-02-14 19:19:53 -0800
    • Engine revision 3757390fa4
    • Dart version 2.1.2 (build 2.1.2-dev.0.0 0a7dcf17eb)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /home/michael_k/Tekoia/Dev-Tools/Android-Sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = /home/michael_k/Android-Sdk
    • Java binary at: /home/michael_k/Android-Studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

[!] Android Studio (version 3.3)
    • Android Studio at /home/michael_k/Android-Studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

[✓] IntelliJ IDEA Community Edition (version 2018.3)
    • IntelliJ at /home/michael_k/idea-IC-183.4284.148
    • Flutter plugin version 33.3.2
    • Dart plugin version 183.5912.10

[✓] Connected device (1 available)
    • SM G925I • 1015faa153a22705 • android-arm64 • Android 5.1.1 (API 22)

! Doctor found issues in 1 category.

opened by micrcx 0

Didn't work on Dart SDK version is 2.1.0

The current Dart SDK version is 2.1.0-dev.5.0.flutter-a2eb050044.

Because flutter_roommates depends on flutter_radial_menu any which requires SDK version >=1.19.0 <2.0.0, version solving failed.

pub get failed (1)

opened by amangautam1 10
Improvements for next version?!
Thank you for the plug-in, it works wonderful. I wonder if you could add two things for the next version though.

A customizable middle icon, colors (open/closed states);

_menuKey.currentState.reset(); should be automatically called after a menu item is clicked. It is an expected behavior for the user. At first I though the code broke down. It took me a while reading the extended example to figure that one out. Best,
opened by function1983 1