animated_radial_menu

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A highly customizable radial menu package for Flutter that delivers complex, smooth animations without boilerplate code. It enables developers to create interactive floating action menus with elegant radial layouts across multiple platforms. The package simplifies the implementation of dynamic, gesture-responsive menus with minimal setup, making it ideal for apps requiring intuitive navigation or enhanced user interaction. Built with performance and flexibility in mind, it supports a wide range of customizations including animation speed, item positioning, and visual styling.

Use cases

Interactive app navigation
Gesture-based menu triggers
Floating action interface design
Enhanced user engagement
Custom UI components
Mobile and desktop app interfaces

Key features

No boilerplate required
Highly customizable
Smooth radial animations
Cross-platform support
Gesture-responsive design
Easy integration

Suitable for

Developers seeking clean UI patterns
Apps with complex navigation needs
Design-focused Flutter projects
Multi-platform applications
UI/UX enhancement efforts

Considerations

May require performance tuning on low-end devices
Limited documentation beyond basic usage
Customization may increase complexity for beginners
Not optimized for very large menu items
Depends on Flutter's animation framework stability

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

The package provides an easy way to work with radial menu along with animations.

example

You can check out the example here

Installation

To use this package : add the dependency to your pubspec.yaml file

   dependencies:
     flutter:
       sdk: flutter
     animated_radial_menu:

Basic Usage

Import it to your project file

  import 'package:animated_radial_menu/animated_radial_menu.dart';

Similar to column or row widget, simply pass in buttons as children and you are done

  RadialMenu(
     children: [
         RadialButton(
           icon: Icon(Icons.ac_unit),
           onPress: () => print("ac unit"),
         )
     ]
 ),

Eventhough you can use this widget anywhere, it's recommended to use RadialMenu with Stack Widget if your page contains tons of UI elements

     body: Stack(
          children: [
            RadialMenu(
              children: [
                RadialButton(
                  icon: Icon(Icons.ac_unit),
                  buttonColor: Colors.teal,
                  onPress: () => Get.to(TargetScreen())),
                RadialButton(
                    icon: Icon(Icons.camera_alt),
                    buttonColor: Colors.green,
                    onPress: () => Get.to(TargetScreen())),
                RadialButton(
                    icon: Icon(Icons.map),
                    buttonColor: Colors.orange,
                    onPress: () => Get.to(TargetScreen())),
                                 
                /* you can add any number of buttons, although it's 
                  not recommended to insert beyond 8-9 buttons. */
              ],
            ),
            
            // rest of the widgets....

          ],
        ),

You can manually position the widget wherever you wish

   RadialMenu(
    centerButtonAlignment: Alignment(0.3,0.5) // by default alignment is set to Alignment.center
   )

You can also customize the main centered button(more customizations will be made available soon)

   RadialMenu(
        centerButtonSize: 0.5, // size ranging from 0.0 to 1.0
   )

Search packages, repositories and app categories