CODEWITHSUNDEEP
flutterdartflutter-layout
John Joe
John Joe

Reputation: 12803

Make container clickable

I want to make the whole row clickable, but the print will only show if I tap Text or Icon.

 Padding(
            padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
            child: Container(
                width: double.infinity,
                padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
                decoration: BoxDecoration(
                    border: Border.all(width: 0.5),
                    borderRadius: BorderRadius.all(Radius.circular(15.0))),
                child: GestureDetector(
                  onTap: () {
                    print('click');
                  },
                  child: Row(
                    children: <Widget>[
                      Padding(
                        child: Text(
                          Localization.of(context).location,
                          style: TextStyle(fontSize: 18),
                        ),
                        padding: EdgeInsets.only(left: 10.0),
                      ),
                      Spacer(),
                      Padding(
                        child: Container(
                          child: Icon(Icons.locations),
                          height: 25.0,
                        ),
                        padding: EdgeInsets.only(right: 15.0),
                      )
                    ],
                  ),
                )))

Upvotes: 2

Views: 2012

Answers (3)

Pro
Pro

Reputation: 3003

@John Joe, I think the simplest way to make a Container clickable is by using InkWell as,

InkWell(
  child: Container(
    padding: const EdgeInsets.all(10.0),
    decoration: BoxDecoration(
      border: Border.all(width: 1.0, color: Colors.grey),
      borderRadius: BorderRadius.all(Radius.circular(5.0))
    ),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text('Locations', style: TextStyle(color: Colors.grey)),
        Icon(Icons.edit_location, color: Colors.grey)
      ])),
  onTap: () {
    setState(() {
      text = 'Locations Tapped!';
    });
  },
)

enter image description here

Upvotes: 4

CopsOnRoad
CopsOnRoad

Reputation: 268414

Try this: 

Padding(
  padding: EdgeInsets.only(top: 15.0, left: 10.0, right: 10.0),
  child: GestureDetector(
    onTap: () {
      print('click');
    },
    child: Container(
      width: double.infinity,
      padding: EdgeInsets.only(top: 15.0, bottom: 15.0),
      decoration: BoxDecoration(border: Border.all(width: 0.5), borderRadius: BorderRadius.all(Radius.circular(15.0))),
      child: Row(
        children: <Widget>[
          Padding(
            child: Text(
              Localization.of(context).location,
              style: TextStyle(fontSize: 18),
            ),
            padding: EdgeInsets.only(left: 10.0),
          ),
          Spacer(),
          Padding(
            child: Container(
              child: Icon(Icons.locations),
              height: 25.0,
            ),
            padding: EdgeInsets.only(right: 15.0),
          )
        ],
      ),
    ),
  ),
);

Upvotes: 2

N0000B
N0000B

Reputation: 449

Enclose the Widget (probably the Padding widget from your code snippet) , in GestureDetector. Basically, move GestureDetector from the current level to the Widget for which you want the tap to be detected.

Upvotes: 1

Related Questions