Flutter - Detecting Long Press Effect
Last Updated :
28 Apr, 2025
Detecting long press effects in Flutter involves the use of the GestureDetector or InkWell widget to detect the Long Press. it's common to implement long-press detection to provide users with additional functionalities or visual feedback. The long-press event is triggered when a user holds down a particular item for some seconds. To implement this, we can take the help of the onLongPress callback, in InkWell Widget. we can add some visual effects, such as a ripple effect or highlighting, to enhance the user experience. In this article, we are going to detect the long press effect in a ListView Item and show which item is long-pressed by Displaying a SnackBar. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp and the Scaffold , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
Step 5: Create HomePage Class
In this class we are going to a List of String containing Ten items, and we are going to call an userdefine class named as LongPressListItem,Inside the ListView.builder, each item is represented by a LongPressListItem widget.LongPressListItem is a custom widget that takes two parameters:
- item: The string representing the current item in the list.
- onLongPress: A callback function to be executed when a long press is detected on the list item.
The LongPressListItem widget itself is an InkWell wrapped around a ListTile. The InkWell provides a visual splash effect when the list item is tapped .Comments are added for better understandings.
Dart
class MyHomePage extends StatelessWidget {
// List of items to be displayed in the ListView
final List<String> items = List.generate(10, (index) => 'Item $index');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Detect Long Press'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return LongPressListItem(
item: items[index],
onLongPress: () {
// Callback when a long press is detected on a list item
// Show a Snackbar with the information about the long-pressed item
final snackBar = SnackBar(
content: Text('Long press on ${items[index]}'),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
);
},
),
);
}
}
Step 6: Create LongPressListItem Class
The LongPressListItem class in Flutter defines a custom list item widget designed to respond to long-press interactions. Comments are added for better understandings.
Dart
class LongPressListItem extends StatelessWidget {
final String item;
final VoidCallback onLongPress;
LongPressListItem({required this.item, required this.onLongPress});
@override
Widget build(BuildContext context) {
return InkWell(
onLongPress: onLongPress, // Execute the onLongPress callback
child: ListTile(
title: Text(item),
),
);
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
// List of items to be displayed in the ListView
final List<String> items = List.generate(10, (index) => 'Item $index');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Detect Long Press'),
),
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return LongPressListItem(
item: items[index],
onLongPress: () {
// Callback when a long press is detected on a list item
// Show a Snackbar with the information about the long-pressed item
final snackBar = SnackBar(
content: Text('Long press on ${items[index]}'),
);
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
);
},
),
);
}
}
class LongPressListItem extends StatelessWidget {
final String item;
final VoidCallback onLongPress;
LongPressListItem({required this.item, required this.onLongPress});
@override
Widget build(BuildContext context) {
return InkWell(
onLongPress: onLongPress, // Execute the onLongPress callback
child: ListTile(
title: Text(item),
),
);
}
}
Output:
Similar Reads
Flutter - Ripple Effect In Flutter, the InkWell widget is used to perform ripple animation when tapped. This effect is common for all the app components that follow the material design guideline. A ripple animation in its simplest term can be understood as a black (default) bar at the bottom of an app that displays some da
2 min read
Flutter - TypeWriter Text Effect In this Flutter article, let's learn how to create Animated TypeWritting Effect on a flutter Text Widget. The typewriter effect is a kind of animation where the text appears to be typed out letter by letter. This is often used in games, movies, videos, or in certain apps where you want the user’s at
7 min read
Flutter - Loading Progress Indicator Button In this article, we will learn about the Loading Progress Indicator Button in Flutter. What is Loading Progress Indicator Button?Progress Indicator informs customers and users who are using the app about the ongoing Process such as loading an app, submitting a form, or uploading a document online. A
4 min read
FAB - Speed Dial in Flutter A floating action button, commonly abbreviated as FAB, is a primary action button that has a fixed position hovering over an app without altering the contents of the screen. Speed dial is a transition type of FAB, where it emits multiple entities as an action of an FAB on the same screen.Floating Ac
5 min read
Flutter - Tap Coordinates Detector You may sometimes need to find the coordinates of the widget in your Flutter Application, Here we are going to find the coordinate of the body. When we press on the body of the Scaffold then it will show the coordinates of that point where we are tapped. A sample video is given below to get an idea
3 min read