Home > other >  how to use inkwell so that the text can be easily tapped
how to use inkwell so that the text can be easily tapped

Time:03-07

Please see screenshot. Basically they are two containers in a row. Since the text in left is so long and wrapped that the whole left-side container is tappable, with its height greater than that of the right side. As a result, on the right side, only the area of text height is tappable. But I would like to make the whole height of right-side container tappable.

child: Row(
          children: [
            Expanded(
              child: InkWell(
                  onTap: () {
                    parent._onSelectedChanged(index);
                  },
                  child: Container(
                    padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
                    child: Text(
                      item.content,
                      style: TextStyle(fontSize: 15),
                    ),
                  )),
            ),
            Expanded(
              child: InkWell(
                  onTap: () {
                    parent._onSelectedChanged(index);
                  },
                  child: Container(
                    padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
                    child: Text(
                      item.rowid,
                      style: TextStyle(fontSize: 15),
                    ),
                  )),
            ),
          ],
        ),

screenshot

CodePudding user response:

You should be able to use two expanded widgets in the Row like this:

return Row(
          children: [
            Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: () {
                  print('Left Container');
                },
                child: Container(
                  color: Colors.blue,
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: GestureDetector(
                onTap: () {
                  print('Right Container');
                },
                child: Container(
                  color: Colors.red,
                ),
              ),
            ),
          ],
        ),

I hope this helped you!

CodePudding user response:

The solution which is using IntrinsicHeight to wrap the row.

  • Related