Flutter – Detecting Long Press Effect

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: