Giter Club home page Giter Club logo

flutter-pie-menu's Introduction

Flutter Pie Menu ๐Ÿฅง

pub pub likes web apk app github buy me a coffee

A Flutter package providing a highly customizable circular/radial context menu, similar to Pinterest's.

Click here to try Flutter Pie Menu online!

Table of Contents

Usage

Wrap the widget that should respond to gestures with the PieMenu widget, and provide the menu with an array of PieActions to display as circular buttons.

PieMenu(
  onPressed: () => print('pressed'),
  actions: [
    PieAction(
      tooltip: const Text('like'),
      onSelect: () => print('liked'),
      child: const Icon(Icons.favorite), // Can be any widget
    ),
  ],
  child: ChildWidget(),
),

๐Ÿ’ก Don't forget that you can only use PieMenu as a descendant of a PieCanvas widget.

Wrap your page, or any other desired widget for drawing the menu and the background overlay, with PieCanvas widget.

For instance, if you want the menu to be displayed at the forefront, you can wrap your Scaffold with a PieCanvas like following:

PieCanvas(
  child: Scaffold(
    body: YourScaffoldBody(
      ...
        PieMenu(),
      ...
    ),
  ),
),

๐Ÿ’ก You can utilize the onPressed callback defined in PieMenu to manage tap events without the need for an extra widget such as GestureDetector.

Customization

You can customize the appearance and behavior of menus using PieTheme.

Using the theme attribute of PieCanvas widget, you can specify a theme for all the descendant PieMenu widgets.

PieCanvas(
  theme: PieTheme(),
  ...
    PieMenu(), // Uses the canvas theme
  ...
    PieMenu(), // Uses the canvas theme
  ...
),

But if you want to specify menu specific themes, you can also use the theme attribute of PieMenu widget.

PieMenu(
  theme: PieTheme(), // Overrides the canvas theme
),

It is also possible to copy the canvas theme with additional parameters, but make sure you are accessing it with the right context.

PieMenu(
  theme: PieTheme.of(context).copyWith(
    ...
  ),
),

Button themes

Buttons' background and icon colors are defined by theme's buttonTheme and buttonThemeHovered. You can create a custom PieButtonTheme instances for your canvas and menu themes.

PieTheme(
  buttonTheme: PieButtonTheme(),
  buttonThemeHovered: PieButtonTheme(),
),

You can even give the buttons custom styles using decoration property of PieButtonTheme.

PieButtonTheme(
  decoration: BoxDecoration(),
),

Custom button widgets

If you wish to use custom widgets inside buttons instead of just icons, it is recommended to use PieAction.builder() with a builder which provides whether the action is hovered or not as a parameter.

PieAction.builder(
  tooltip: const Text('like'),
  onSelect: () => print('liked'),
  builder: (hovered) {
    return Text(
      '<3',
      style: TextStyle(
        color: hovered ? Colors.green : Colors.red,
      ),
    );
  },
),

Tap, long press or right click to activate the menu

You may set delayDuration of your theme to Duration.zero to activate the menu as soon as the child is pressed.

PieTheme(
  delayDuration: Duration.zero,
),

Using rightClickShowsMenu and leftClickShowsMenu attributes of PieTheme, you can customize the mouse button behavior.

PieTheme(
  rightClickShowsMenu: true,
  leftClickShowsMenu: false,
),

Adjust display angle of menu buttons

If you don't want the dynamic angle calculation and have the menu appear at a fixed angle, you can set customAngle and customAngleAnchor attributes of PieTheme.

PieTheme(
  customAngle: 90, // In degrees
  customAngleAnchor: PieAnchor.center, // start, center, end
),

You can also use customAngleDiff or spacing to adjust the angle between buttons, and angleOffset to rotate the menu.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

github

Donation

If you find this package useful, please consider donating to support the project.

buy me a coffee

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.