Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Make Any Widget Clickable on Flutter

In this example, we are going to show you the easiest way to make any widget clickable. You can make widgets like Container, Card, Text, or any widget clickable in Flutter with the help of InkWell and GestureDetector widgets.

Make Widget Clickable using InkWell():

InkWell(
    onTap: (){
        print("card is tapped.");
    },
    onDoubleTap: (){
      print("Card is double tapped.");
    },
    child: Card(  
        //clickable card
    ),
)

Make Widget Clickable using GestureDetector():

GestureDetector(
    onTap: (){
        print("Contianer is tapped.");
    },
    onDoubleTap: (){
      print("Cntainer is double tapped.");
    },
    onLongPress: (){
      print("Container is long pressed.");
    },
    child: Container( 
         //clickable Container()
    ),
)

Full Flutter Dart Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp( 
      home: MyApp()
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Make Widget Clickable"), //appbar title
              backgroundColor: Colors.redAccent //appbar background color
          ),
          body: Container(
            alignment:Alignment.topCenter,
            padding: EdgeInsets.all(35),
             child: Column( 
                children:[
                      
                      InkWell(
                         onTap: (){
                             print("card one is tapped.");
                         },
                         onDoubleTap: (){
                            print("Card one is double tapped.");
                         },
                         child: Card( 
                             child: Container( 
                                padding: EdgeInsets.all(20),
                                child: Text("Clickable Widget with InkWell")
                             )
                         ),
                      ),

                      GestureDetector(
                         onTap: (){
                             print("card two is tapped.");
                         },
                         onDoubleTap: (){
                            print("card two is double tapped.");
                         },
                         onLongPress: (){
                            print("card two is long pressed.");
                         },
                         child: Card( 
                             child: Container( 
                                padding: EdgeInsets.all(20),
                                child: Text("Clickable Widget with GestureDetector")
                             )
                         ),
                      ),
                ]
             )
          )
      );
  }
}

Output Screenshot:

In this way, you can make any widget such as Card, Container, Text clickable in Flutter. 

No any Comments on this Article


Please Wait...