Flutter – Making Card Clickable

Making a card clickable is needed in every application. In flutter, we can do it using the gesture detector widget, which detects the gesture of the screen. Gesture Detectors have many properties like on tap, on long press, on long tap, double tap, and many more. We can use simply the tap parameter to make the card clickable. 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: Add the material package that gives us the important methods and then call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
    runApp(RunMyApp());
}

Step 3: Now we have to make a stateless widget RunMyApp Because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
  return MaterialApp(home:);
}
}

Step 4: Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. We can use gesture detector to make the card clickable. Then we can use the on-tap property of the gesture detector to perform the task. In this, we will show the toast at the bottom of the application. In child property, we have the container and further card that have the text as a child.

GestureDetector(
           
           onTap: () {
              ScaffoldMessenger.of(context).showSnackBar(
                   SnackBar(content: Text('Gesture Detected!')));
            
           },
           child: Container(
           
             height: 100,
             child: Card(
               elevation: 10,
               child: Text('Geeks for Geeks, Hello this is clickable card, tap me'),
               color: Colors.cyanAccent,
               
             ),
           ),

Final Code

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home :RunMyApp(),
    theme: ThemeData(primarySwatch: Colors.green),
      debugShowCheckedModeBanner: false,
  ));
}

class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});

  @override
  Widget build(BuildContext context) {


      return Scaffold(
        appBar: AppBar(title: Text('Clickable card'),),
        body: Center(
          child: GestureDetector(

            onTap: () {
               ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Gesture Detected!')));
            },
            child: Container(

              height: 100,
              child: Card(
                elevation: 10,
                child: Text('Geeks for Geeks, Hello this is clickable card, tap me'),
                color: Colors.cyanAccent,

              ),
            ),
          ),
        ),
    );
  }
}

Output UI:

Output: