Создать кнопку с изображением во флаттере?

Question

Как создать кнопку с изображением с помощью Flutter?Это кажется самым простым, но изображение не полностью заполняет родительский виджет.Вот что у меня есть:

Container(child: ConstrainedBox(
    constraints: BoxConstraints.expand(),
    child: FlatButton(onPressed: null,
        child: Image.asset('path/the_image.png'))))

Я следовал этому посту в качестве руководства.Мое изображение выглядит так:

Обратите внимание на отступ вокруг PNG-изображения - его нет в коде.Откуда это взялось?У самого PNG нет холста, поэтому это не должно быть правильным методом.

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

Answer 1

Я думаю, это должно сработать.Просто укажите отступ для FlatButton до нуля.

Container(child: ConstrainedBox(
constraints: BoxConstraints.expand(),
child: FlatButton(
         onPressed: null,
         padding: EdgeInsets.all(0.0),
         child: Image.asset('path/the_image.png'))))

Answer 2

Наличие изображения внутри FlatButton может не соответствовать вашим требованиям, поскольку оно позаботится о некоторых стилях (таких как заполнение) самостоятельно.

Чтобы иметь полный контроль над вашим аспектом кнопки, вы можете захотетьсоздать собственный виджет (даже простой Container с пользовательским BoxDecoration для отображения изображения) и обернуть его распознавателем жестов для обработки взаимодействия с пользователем (в вашем случае это просто касание).В простейшей реализации будет использоваться GestureDetector, но есть и другие виджеты, такие как InkWell, которые визуализируют волнистость дизайна материала по поверхности накладного виджета при нажатии.