Flutter - Как я могу получить виджет с большей площадью нажатия, чем его фактический размер

Question

Я работаю над гитарным аккордовым приложением во Флаттере.

Как видите, синий текст - это аккорд, черный - это текст. Когда я нажимаю на синий текст, появляется диалоговое окно, но его трудно щелкнуть, когда размер шрифта небольшой. Я не хочу связываться с размером шрифта, потому что пользователь будет настраивать самостоятельно.

Текущий код:

class ChordSpan extends StatelessWidget{
@override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => widget.onTapOnChord(chord),
        child: Text(
          "Am", //used static text as example
          style: widget.style, //using mono spaced font
          textScaleFactor: 1.0,
        ),
    );
  }
}

Прозрачная черная область представляет InkWell, уведомление справа, тапка область переполняется обычным текстом

Дополнительное примечание: у меня есть рабочее решение, которое добавляет к нему отступы, но вызывает даже сложные проблемы .. Результат:

Добавлено 6.0px отступов для текста, версия выпуска

Answer 1

Вы хотели бы сделать что-то вроде этого:

    class ChordSpan extends StatelessWidget {
    @override
     Widget build(BuildContext context) {
       return InkWell(
         onTap: () {
           print('doing somthing');
         },
         child: Container(
           color: Colors.transparent,
           child: Column(
             children: <Widget>[
               SizedBox(
                 height: 8.0,
               ),
               Text(
                 "Am", //used static text as example
                 textScaleFactor: 1.0,
               ),
             ],
           ),
         ),
       );
     }
   }

Вы можете настроить этот контейнер так, чтобы он охватывал больше области по мере необходимости.