How to make ListView with the possibility of clicking on the entire width and height of text?

Question

I would like have a square that will be clickable with text in center but with fixed distances between words. Right now only Text is clickable, I am not able to click below or above text. Please check the image below. This would not be a problem if not for the dynamic width of the text.

How to solve this?

Currently I have something like this:

ListView -> GestureDetector -> Container (height: 60, *without width) -> Center -> Text

ListView. builder(
        physics: ClampingScrollPhysics(),
        controller:
        _scrollControllerCategoryList,
        scrollDirection: Axis.horizontal,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
            onTap: () {
            },
            child: Container(
              child: Center(
                height: 60,
              child: Text(
                appConsumer.menu.keys
                    .toList()[index]
                    .baseName,
                style: TextStyle(
                    fontSize: 14,
                    color:
                    selectedCategory ==
                        index
                        ? AppTheme()
                        .green
                        : Colors
                        .grey[500]),
              ),
             ),
            ),
          );
        },
        itemCount: appConsumer.menu.keys.length,
      )

Answer 1

try wrapping the Text inside of a Expand Widget

Answer 2

What you can use is padding and margin to space out the words. But to actually give the words a box, you will be using the decoration property.

Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              margin: EdgeInsets.symmetric(horizontal: 8),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(3),
                color: Colors.white.withOpacity(0.4)),
              child: Center(
                 child: Text(
                appConsumer.menu.keys
                    .toList()[index]
                    .baseName,
                style: TextStyle(
                    fontSize: 14,
                    color:
                    selectedCategory ==
                        index
                        ? AppTheme()
                        .green
                        : Colors
                        .grey[500]),
              ),
             ),
            ),