Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a row clickable? Flutter

Tags:

flutter

dart

I want to make this row clickable to redirect to a different page, how should I do it?

There are a bunch of these rows in the code.


      body:
      Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
               Container(
                 padding: EdgeInsets.all(10.0),
                 color: Colors.white,
           ),
             Row(
               mainAxisAlignment: MainAxisAlignment.start,
               children: <Widget>[
                  Container(

                         padding: EdgeInsets.fromLTRB(10,16,0,16),
                         color: Colors.white,
                    child: Icon(Icons.favorite),
                  ),
                   Container(
                     padding: EdgeInsets.fromLTRB(5,20,140,20),
                          color: Colors.white,
                         child: Text('Favoritos'),

                   ),
                 Container(
                   padding: EdgeInsets.fromLTRB(145,16,5,16),
                   color: Colors.white,
                   child: Icon(Icons.keyboard_arrow_right),
                 ),
             ],
             ),
 
like image 299
Enzo Saoud Avatar asked Sep 08 '25 11:09

Enzo Saoud


2 Answers

You can wrap your widget with GestureDetector or InkWell like this:

GestureDetector(
  onTap: (){
  // Add what you want to do on tap
  }
  child: Row(
    // Add your properties here
  ),
),
InkWell(
  onTap: (){
  // Add what you want to do on tap
  }
  child: Row(
    // Add your properties here
  ),
),
like image 93
littleironical Avatar answered Sep 10 '25 14:09

littleironical


To make the row clickable you will have to wrap it to either inkwell or GestureDetector, else you can chose IconButtons.

InkWell(
 onTap: (){ print("Card Clicked"); }
 child: Container(
  padding: EdgeInsets.fromLTRB(10,16,0,16),
  color: Colors.white,
  child: Icon(Icons.favorite),
  ),//Container
);

To go to different activity onTap try this code inside onTap():

onTap: (){ 
 print("Card Clicked"); 
 Navigator.push(
 context,
 MaterialPageRoute(builder: (context) => SecondRoute()),//secondRoute is the     
   //second class you want to go to.
}

You can use hardik's answer if you want to make clickable columns. Hope it helps! Happy coding:)

like image 30
Bensal Avatar answered Sep 10 '25 13:09

Bensal