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.

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
flutter:
sdk: flutter
focused_menu: ^1.0.5

Step 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.

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.