An adaptable and easy-to-use component of Flutter is the popup menu Flutter, which offers a functional method for showing a list of decisions or activities in a transient overlay. Users can open the popup menu that shows up close to the triggering component with just a solitary tap on a symbol or widget.
In this article, we will Explore Focused Pop-Up Menu In Flutter. We see how to execute a demo program. We will tell you how to create a focused pop-up menu utilizing the focused_menu package, and how to work it in your Flutter applications.
- For Focused Menu:
focused_menu | Flutter package
This is an easy-to-implement package for adding a Focused Long Press Menu to Flutter Applicationspub. dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
The below demo video shows how to create a focused pop-up menu in Flutter and how a focused pop-up menu will work using the focused_menu plugin in your Flutter applications. We will show you how to create a pop-up menu and the user presses the item, then a pop-up appears on the screen and blurs the other content on that particular screen. It will be shown on your device.
Demo Module::
Constructor:
To utilize FocusedMenuHolder, you need to call the constructor underneath:
const FocusedMenuHolder(
{Key? key,
required this.child,
required this.onPressed,
required this.menuItems,
this.duration,
this.menuBoxDecoration,
this.menuItemExtent,
this.animateMenuItems,
this.blurSize,
this.blurBackgroundColor,
this.menuWidth,
this.bottomOffsetHeight,
this.menuOffset,
this.openWithTap = false})
: super(key: key);In this constructor, there was three data were required child, onPressed, and menuItems, when you will use this method.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
focused_menu: ^1.0.5Step 2: Import
import 'package:focused_menu/focused_menu.dart';
import 'package:focused_menu/modals.dart';Step 3: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main .dart file. We will create a new class MyHomePage(). We will make a list of a string of imageList is equal to the list of network images inside in square bracket
.List<String> imageList = [
'https://cdn.pixabay.com/photo/2019/03/15/09/49/girl-4056684_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/15/16/25/clock-5834193__340.jpg',
'https://cdn.pixabay.com/photo/2020/09/18/19/31/laptop-5582775_960_720.jpg',
'https://media.istockphoto.com/photos/woman-kayaking-in-fjord-in-norway-picture-id1059380230?b=1&k=6&m=1059380230&s=170667a&w=0&h=kA_A_XrhZJjw2bo5jIJ7089-VktFK0h0I4OWDqaac0c=',
'https://cdn.pixabay.com/photo/2019/11/05/00/53/cellular-4602489_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/02/12/10/29/christmas-2059698_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/01/29/17/09/snowboard-4803050_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/02/06/20/01/university-library-4825366_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/11/22/17/28/cat-5767334_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/13/16/22/snow-5828736_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/09/09/27/women-5816861_960_720.jpg',
];In the body, we will create a gridview. In this GridView.builder() method, we will add itemCount as the length of imageList, gridDelegate as crossAxisCount was 2, mainAxisSpacing was 20, crossAxisSpacing was 20 are wrap to SliverGridDelegateWithFixedCrossAxisCount, itemBuilder as return ClipRRect with borderRadius was 20 and its child we will add imageList[index].
GridView.builder(
itemCount: imageList.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
),
itemBuilder: (BuildContext context, int index) {
return ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
imageList[index],
fit: BoxFit.fill,
),
);
},
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Now we will add FocusedMenuHolder on the GridView.builder().
We will add a return FocusedMenuHolder() method on the itemBuilder function. In this method, we will add menu width size using a media query was 0.5 (50%). We will add that openWithTap was true because of avoiding the long press element. When any user taps on an element then op up will be shown.
GridView.builder(
itemCount: imageList.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
),
itemBuilder: (BuildContext context, int index) {
return FocusedMenuHolder(
menuWidth: MediaQuery.of(context).size.width*0.5,
openWithTap: true,
menuItems: [
FocusedMenuItem(
title: const Text("Info"),
trailingIcon: const Icon(Icons.info, color: Colors.orange,),
onPressed: () {}),
FocusedMenuItem(
title: const Text("Bookmark"),
trailingIcon: const Icon(Icons.bookmark_add,color: Colors.teal,),
onPressed: () {}),
FocusedMenuItem(
title: const Text("Favorite"),
trailingIcon: const Icon(Icons.favorite, color: Colors.red,),
onPressed: () {}),
FocusedMenuItem(
title: const Text(
"Share",
),
trailingIcon: const Icon(Icons.share,color: Colors.cyan,),
onPressed: () {}),
],
onPressed: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
imageList[index],
fit: BoxFit.fill,
),
),
);
},
),Then, we will add menuItems as the list of FocusedMenuItem() with title, triailingIcon, onPressed, and also you will add backgroundColor. Also, you will change the color of the icons and handle the onPressed method in FocusedMenuItem as per your requirements.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_focus_popup_menu_demo/splash_screen.dart';
import 'package:focused_menu/focused_menu.dart';
import 'package:focused_menu/modals.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> imageList = [
'https://cdn.pixabay.com/photo/2019/03/15/09/49/girl-4056684_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/15/16/25/clock-5834193__340.jpg',
'https://cdn.pixabay.com/photo/2020/09/18/19/31/laptop-5582775_960_720.jpg',
'https://media.istockphoto.com/photos/woman-kayaking-in-fjord-in-norway-picture-id1059380230?b=1&k=6&m=1059380230&s=170667a&w=0&h=kA_A_XrhZJjw2bo5jIJ7089-VktFK0h0I4OWDqaac0c=',
'https://cdn.pixabay.com/photo/2019/11/05/00/53/cellular-4602489_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/02/12/10/29/christmas-2059698_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/01/29/17/09/snowboard-4803050_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/02/06/20/01/university-library-4825366_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/11/22/17/28/cat-5767334_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/13/16/22/snow-5828736_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/09/09/27/women-5816861_960_720.jpg',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
backgroundColor: Colors.cyan,
title: Text(widget.title),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(12),
child: GridView.builder(
itemCount: imageList.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 20,
crossAxisSpacing: 20,
),
itemBuilder: (BuildContext context, int index) {
return FocusedMenuHolder(
menuWidth: MediaQuery.of(context).size.width*0.5,
openWithTap: true,
menuItems: [
FocusedMenuItem(
title: const Text("Info"),
trailingIcon: const Icon(Icons.info, color: Colors.orange,),
onPressed: () {}),
FocusedMenuItem(
title: const Text("Bookmark"),
trailingIcon: const Icon(Icons.bookmark_add,color: Colors.teal,),
onPressed: () {}),
FocusedMenuItem(
title: const Text("Favorite"),
trailingIcon: const Icon(Icons.favorite, color: Colors.red,),
onPressed: () {}),
FocusedMenuItem(
title: const Text(
"Share",
),
trailingIcon: const Icon(Icons.share,color: Colors.cyan,),
onPressed: () {}),
],
onPressed: () {},
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
imageList[index],
fit: BoxFit.fill,
),
),
);
},
),
),
),
);
}
}
Conclusion:
In the article, I have explained the Focused Pop-Up Menu in Flutter; you can modify this code according to your choice. This was a small introduction to the Focused Pop-Up Menu in Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying Focused Pop-Up Menu in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on the Focused Pop-Up Menu using the focused_menu plugin in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
