This is a repository for Flutter Focused Menu, an easy to implement package for adding Focused Long Press Menu to Flutter Applications

Related tags

Templates flutter
Overview

Focused Menu

This is an easy to implement package for adding Focused Long Press Menu to Flutter Applications

Current Features

  • Add Focused Menu to Any Widget you Want
  • Customizations to change The Focused Menu and Animations according to your Application Needs.

Demo

Usage

To Use, simply Wrap the Widget you want to add Focused Menu to, with FocusedMenuHolder:

              Expanded(
                child: GridView(
                  physics: BouncingScrollPhysics(),
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

                       // Wrap each item (Card) with Focused Menu Holder
                      .map((e) => FocusedMenuHolder(
                        menuWidth: MediaQuery.of(context).size.width*0.50,
                        blurSize: 5.0,
                        menuItemExtent: 45,
                        menuBoxDecoration: BoxDecoration(color: Colors.grey,borderRadius: BorderRadius.all(Radius.circular(15.0))),
                        duration: Duration(milliseconds: 100),
                        animateMenuItems: true,
                        blurBackgroundColor: Colors.black54,
                        openWithTap: true, // Open Focused-Menu on Tap rather than Long Press
                        menuOffset: 10.0, // Offset value to show menuItem from the selected item
                        bottomOffsetHeight: 80.0, // Offset height to consider, for showing the menu item ( for example bottom navigation bar), so that the popup menu will be shown on top of selected item.
                        menuItems: <FocusedMenuItem>[
                          // Add Each FocusedMenuItem  for Menu Options
                          FocusedMenuItem(title: Text("Open"),trailingIcon: Icon(Icons.open_in_new) ,onPressed: (){
                            Navigator.push(context, MaterialPageRoute(builder: (context)=>ScreenTwo()));
                          }),
                          FocusedMenuItem(title: Text("Share"),trailingIcon: Icon(Icons.share) ,onPressed: (){}),
                          FocusedMenuItem(title: Text("Favorite"),trailingIcon: Icon(Icons.favorite_border) ,onPressed: (){}),
                          FocusedMenuItem(title: Text("Delete",style: TextStyle(color: Colors.redAccent),),trailingIcon: Icon(Icons.delete,color: Colors.redAccent,) ,onPressed: (){}),
                        ],
                        onPressed: (){},
                        child: Card(
                              child: Column(
                                children: <Widget>[
                                  Image.asset("assets/images/image_$e.jpg"),
                                ],
                              ),
                            ),
                      ))
                      .toList(),
                ),
              ),

Roadmap

Plans to add more customizations.

License

MIT

Comments
  • Migrate focused_menu to null safety

    Migrate focused_menu to null safety

    This package should be migrated to null safety so that other apps and packages depending on it can (more easily) migrate to null safety as well.

    Do you have any plans for this?

    Thanks.

    Related links:

    https://dart.dev/null-safety/migration-guide

    https://www.youtube.com/watch?v=bvq7wbn4VAA&ab_channel=Flutter

    opened by peterwvj 3
  • onLongPress

    onLongPress

    Hi there,

    I was wondering if it is possible to use the package without having to longpress a button?

    I want to have the focused_menu pop up after just one click but not sure how to do this or if this is possible?

    Sorry for creating an issue for this but wasn't sure how to ask this question otherwise!

    Thanks in advance

    opened by Annelein 2
  • added property

    added property "openWithTap: true|false"

    Great plugin, thanks for this.

    I added a boolean property to optionally open with tap instead of long press.

    you can try it using

      focused_menu:
        git:
          url: https://github.com/ignaciotcrespo/focused_menu.git
          ref: onTap
    
    opened by ignaciotcrespo 1
  • Widget instead of icon

    Widget instead of icon

    Hi! Cool package! I was thinking of changing the Icon to Widget, because it is more general, and will allow to use the SvgPicture package for example, without the need of FlutterIcon usage. :)

    But if you prefer to keep Icon it is okay. Thx!

    opened by JEuler 0
  • Added customisation features menuOffset and bottomOffsetHeight

    Added customisation features menuOffset and bottomOffsetHeight

    menuOffset : double - for adding offset on the top of popup menu. bottomOffsetHeight: double - for adding extra offset on the bottom , so that the bottommost item will show popup menu on top side ,when selected. ( helpful when you have bottom navigation )

    opened by sijangurung 0
  • menu goes behind BottomNavigation!

    menu goes behind BottomNavigation!

    the focused menu goes behind bottomNavigation . Do you have a solution for it ? The problem is if there is bottomnavigation, the focused_menu comes below the last item and is displayed behind the bottomnavigation.

    opened by sijangurung 0
  • Add curve to opening animation

    Add curve to opening animation

    Would be great if you could add a customizable curve to the opening animation so we can adjust it to our likening (i.e.: Curves.elasticOut to have a nice bouncy effect).

    opened by GotJimmy 0
  • Add space attribute and chage trail icon

    Add space attribute and chage trail icon

    Hello sir. I change some features on this package.

    • I added attribute on FocusedMenuItem , we can add some space between menu items.
    • change trailingIcon From Icon to Widget
    opened by peterpan6778 0
  • add controller with open/close methods

    add controller with open/close methods

    Adding a controller to programmatically open / close the contextual menu.

    Example:

    class ExampleWidget extends StatelessWidget {
      final FocusedMenuHolderController _focusedController =
          FocusedMenuHolderController();
    
      ExampleWidget({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Row(
          children: [
            FocusedMenuHolder(
              controller: _focusedController,
              menuItems: [],
              onPressed: () {},
              child: FlutterLogo(),
              // ...
            ),
            Column(
              children: [
                IconButton(
                  onPressed: () {
                    _focusedController.open();
                  },
                  icon: Icon(Icons.open_in_new),
                ),
                IconButton(
                  onPressed: () {
                    _focusedController.close();
                  },
                  icon: Icon(Icons.close),
                )
              ],
            ),
          ],
        );
      }
    
    opened by dimzeta 2
  • Feature to enlarge active child

    Feature to enlarge active child

    Added the ability to enlarge the active child.

    pr_feature_demo

    It does this by providing the "scaleFactor" parameter and the enlarged size is calculated by multiplying childs original size with the "scaleFactor".

    Updates in offset for child and menu :

    • Offset for the child from left and right side is calculated accordingly based on the enlarged size of child.
    • Calculations for getting top offset for child and menu are updated to match the changes in childs size.
    opened by rutvik110 0
  • set default alignment

    set default alignment

    By default, the menu is always at the bottom left. If it cannot be at this position, we push it to the top or right side. But sometimes, we need to set the menu at the top or to the right by default.

    I added the align property to set by default this position.

    Maybe it is not perfect, but this is a first try.

    IMG_1CCE7290BE37-1

    opened by dimzeta 0
Owner
Paras Jain
Mobile Application and Web Developer | @youtube Content Creator | Worship ReactJs | Flutter | Java | Dart | If anybody's gonna save us... it's us
Paras Jain
Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort.

flutter_image_add_drag_sort Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort, support video fi

null 5 Jun 23, 2020
This is an easy to use Flutter Package for adding Fancy Foldable Sidebar to your Flutter Applications.

Foldable Sidebar An easy to implement Foldable Sidebar Navigation Drawer for Flutter Applications. Current Features Initial Release for Foldable Navig

Paras Jain 87 Nov 26, 2022
A Flutter package that allows Android users to press the back-button twice to close the app.

double_back_to_close_app A Flutter package that allows Android users to press the back-button twice to close the app. Usage Inside a Scaffold that wra

Hugo Passos 57 Oct 10, 2022
A Flutter package that allows Android users to press the back-button twice to close the app.

double_back_to_close_app A Flutter package that allows Android users to press the back-button twice to close the app. Usage Inside a Scaffold that wra

Hugo Passos 57 Oct 10, 2022
A fancy easy to use Folding Menu for Flutter Applications

Folding Menu This is an easy to use package for adding Folding Menu to your Flutter Applications Demo Usage To Use, simply add Folding Menu to your St

Paras Jain 12 Nov 26, 2022
This repository show you how implement a ListView on Flutter

Flutter Simple ListView UI Overview Android Category list Category detail iOS Category list Category detail Flutter component ListView https://docs.fl

Yen Dang 3 Nov 11, 2021
Rooftop - A photos and videos application which is able to show curated content from Pexel database on the press of a button

rooftop RoofTop is a photos and videos application which is able to show curated

null 2 Feb 7, 2022
Flutter plugin to implement a Boom Menu, with icons, title, subtitle, animated FAB Icons and hide on scrolling.

Flutter Boom Menu Usage The BoomMenu widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton wi

Mohanraj 88 Aug 1, 2022
A clock made in Flutter for smart clocks, with a cute snake that follows you all day long.

Snake Clock This is an original and fun clock face where a snake lives its day along yours. It’s my first ever Flutter app! I built it for the Flutter

GilDev 12 Nov 7, 2022
A simple package for adding water drops to your Widgets!

Water Drop ?? ?? ?? A simple package for adding water drops to your Widgets! ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? Blog article with detailed explanation: htt

Marcin Szałek 46 Jun 30, 2022
An easy to implement custom switch created for Flutter.

flutter_switch An easy to implement custom switch created for Flutter. Give it a custom height and width, border for the switch and toggle, border rad

Nickr 66 Dec 6, 2022
The XOR Encryption algorithm is a effective and easy to implement method of symmetric encryption.

Symmetric XOR cipher library About XOR cipher XOR Encryption is an encryption method used to encrypt data and is hard to crack by brute-force method,

Plague Fox 7 Apr 20, 2022
Arissettingsmenuexm - Settings Menu with different choices by clicking on a Popup Menu Button in Flutter

Flutter Tutorial - Settings Menu & AppBar Dropdown Menu Show a Flutter Settings

Behruz Hurramov 1 Jan 9, 2022
Flutter-pop-up-menu - Pop up Menu - Mobile Devices Programming

Pop Up Menu App A flutter demo app with a pop up menu button Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-asillanes/) Technolo

Alexander Sosa 0 Jan 3, 2022
🚀 Sample Flutter Clean Architecture on Rorty App focused on the scalability, testability and maintainability written in Dart, following best practices using Flutter.

Rorty Flutter Rorty ?? (work-in-progress for V2 ?? ??️ ??‍♀️ ⛏ ) Getting Started Flutter Clean Architecture in Rorty is a sample project that presents

Mr.Sanchez 138 Jan 1, 2023
This is a set of small projects focused solely on the development of the graphical interface with Flutter

My Flutter Projects Flutter apps with cool design and animations Social Media Youtube Facebook Twitter Getting Started This project is a starting poin

Kevin Melendez 500 Dec 19, 2022
A movies app made with Flutter focused on solid software structure patterns.

Flutter Movies App An application made with Flutter to practice the principles of Clean Architecture. Even being focused on architecture, the project

Márcio Valim 59 Dec 12, 2022
A Dart-native lightweight Apache Pulsar client primarily focused on the IoT telemetry domain

pulsar_iot_client A lightweight Apache Pulsar client primarily focused on the IoT telemetry domain. This project aims to improve the resulting perform

Mike Zolotarov 5 May 10, 2022
A Launcher focused on simplicity and legibility.

Elder Launcher Elder Launcher is a launcher designed for seniors focused on simplicity and legibility. Elder Launcher supports pinning favorite apps a

Arjunsinh Jadeja 30 Dec 5, 2022