Create a button with an image in Flutter?

Question

How do you create a button with an image using Flutter? It seems like the simplest thing to do, but the image does not fill the parent widget completely. This is what I have:

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

I followed this post as guidance. My image looks like this:

Notice the padding around the PNG image - it's not in the code. Where does it come from? The PNG itself does not have canvas padding, so this must not be the correct technique.

All I need is a button with an image that fills the entire FlatButton, or another widget I can add actions to, without distorting the image.

Answer 1

I think this should work as well. Just specify the padding for the FlatButton to zero.

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

Answer 2

My opinion, the easier way and also most versatile is to use GestureDetector as it allows you to call different functions for different gestures like one tap, double-tap, long tap and so on.

GestureDetector(
                onTap: () => _yourFunction('yourParameter'),
                child: Image.asset('yourimagefolder/yourimage.png'),
              ),