Create a button with an image in Flutter?

image button widget flutter
Hahnemann picture Hahnemann · Dec 5, 2018 · Viewed 43.6k times · Source

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:

enter image description here

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

YashBhalodi picture YashBhalodi · Apr 6, 2019

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'))))

Related questions

Embed image in a <button> element

I'm trying to display a png image on a <button> element in HTML. The button is the same size as the image, and the image is shown but for some reason not in the center - so it's …

Read More
Android: combining text & image on a Button or ImageButton

I'm trying to have an image (as the background) on a button and add dynamically, depending on what's happening during run-time, some text above/over the image. If I use ImageButton I don't even have the possibility to add text. …

Read More
Add an image in a WPF button

I tried this solution: <Button> <StackPanel> <Image Source="Pictures/img.jpg" /> <TextBlock>Blablabla</TextBlock> </StackPanel> </Button> But I can see the image only in the project …

Read More