Как сделать ListView с возможностью нажатия на всю ширину и высоту текста?

Question

Я хотел бы иметь квадрат, на который можно было бы нажимать с текстом в центре, но с фиксированным расстоянием между словами. В данный момент доступен только текст, я не могу щелкнуть под или над текстом. Пожалуйста, проверьте изображение ниже. Это не было бы проблемой, если бы не динамическая c ширина текста.

Как это решить?

В настоящее время у меня есть что-то вроде этого:

ListView -> GestureDetector -> Контейнер (высота: 60, * без ширины) -> Центр -> Текст

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

попробуйте обернуть текст внутри виджета Expand

Answer 2

Вы можете использовать отступы и поля для разделения слов. Но чтобы на самом деле дать словам рамку, вы будете использовать свойство decoration .

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]),
              ),
             ),
            ),