CODEWITHSUNDEEP
flutterflutter-layout
Darshan
Darshan

Reputation: 11669

How to make a row having icon and text tappable?

I have 2 questions related :

  1. I have nested function BuildButtonColumn which takes an icon and text below it and I want to make it tappable. I know GestureDetector has onTap property, but how do I use that in the function BuildButtonColumn ?

    Column buildButtonColumn(IconData icon, String label) {
  Color color = Theme
      .of(context)
      .primaryColor;

  return Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: EdgeInsets.all(10.0),
      ),
      Icon(icon, color: color),
      Container(
        margin: const EdgeInsets.only(top: 8.0),
        child: Text(
            label,
            style: TextStyle(
              fontSize: 14.0,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            )
        ),
      )
    ],
  );
}
Widget buttonSection = Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      buildButtonColumn(Icons.message, 'Message'),
      buildButtonColumn(Icons.videocam, 'Request Video')
    ],
  ),
);

I took button layout reference from here.

And this is the UI wherein I need to open specific screen on each icon or text tap.

enter image description here

  1. I also want to show a vertical divider between them. I followed this SO post, but it didn't work out for me or I might have missed something there to implement it.

Upvotes: 1

Views: 2122

Answers (1)

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

Instead return Column you can write:

return GestureDetector(
    onTap: (){ ... },
    child: Column(),
)

Regarding divider - VerticalDivider() is totally fine for me

Widget buttonSection = Container(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      buildButtonColumn(Icons.message, 'Message'),
      VerticalDivider(color: Colors.black,),
      buildButtonColumn(Icons.videocam, 'Request Video')
    ],
  ),
);

It has to work

Upvotes: 2

Related Questions