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.

Solution 1

Having an image inside a FlatButton might not fit your requirements, as it takes care of some styling ( like that padding ) on its own.

To have full control on your button aspect you might want to build a custom widget ( even a simple Container with a custom BoxDecoration to display the image ) and wrap it with a gesture recognizer to handle user interactions ( a simple tap, in your case ). The simplest implementation would use a GestureDetector, but there are also other widgets, like InkWell that renders a material design ripple over the tappable widget surface on tap.

Solution 2

IconButton(
  icon: Image.asset('path/the_image.png'),
  iconSize: 50,
  onPressed: () {},
)

Solution 3

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

Solution 4

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

Solution 5

Screenshot:

---

Code:

InkWell(
  onTap: () {}, // Handle your callback.
  splashColor: Colors.brown.withOpacity(0.5),
  child: Ink(
    height: 100,
    width: 100,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage('your_image_asset'),
        fit: BoxFit.cover,
      ),
    ),
  ),
)

View more solutions

Comments

[Hahnemann]

This worked. I ended up doing the following: Expanded( child: Container( child: ConstrainedBox( constraints: BoxConstraints.expand(), child: Ink.image( image: AssetImage( 'path/the_image.png'), fit: BoxFit.fill, child: InkWell( onTap: null, ), ), ), ), ),

[frankenapps]

Pretty much right, just note it should be EdgeInsets.all(0.0).

[David García Bodego]

Welcome to SO! There is another answer with gestureDetector so, which one are the benefits of your reply?

[Yo Apps]

According to the Material guidelines, this is what is recommended... The need for a ripple touch on any Widget. How ever the IconButton works duly too! ;-)

[Kiran Maniya]

Please try to explain the code block rather giving it directly, explanation may help the community

[AWhitford]

I can't get this version to show a ripple effect. (I get a better ripple effect using a FlatButton, but the ripple is only around the frame of the button, not over the image.)

[iDecode]

Copied from here.

[Marty]

FlatButton is now deprecated. Use IconButton instead.

[Marty]

FlatButton is now deprecated. Use IconButton instead.

[Marty]

I recommend using an IconButton, see some answers below.