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

you can do this easily using Stack

      Stack(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height / 3.6,
            width: MediaQuery.of(context).size.width / 2.2,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(8.0),
              child:imageLoader1(img),
             /* Image.asset(
                "$img",
                fit: BoxFit.cover,
              ),*/
            ),
          ),

          Positioned(
            right: -10.0,
            bottom: 3.0,
            child: RawMaterialButton(
              onPressed: (){},
              fillColor: Colors.white,
              shape: CircleBorder(),
              elevation: 4.0,
              child: Padding(
                padding: EdgeInsets.all(5),
                child: Icon(
                  isFav
                      ?Icons.favorite
                      :Icons.favorite_border,
                  color: Colors.red,
                  size: 17,
                ),
              ),
            ),
          ),
        ],


      ),

Answer 2

GestureDetector(
    onTap: () {print('click on edit');},
    child: Image(
        image: AssetImage('assets/images/icons/edit-button.png'),
        fit: BoxFit.cover,
        height: 20,
    )
),

Answer 3

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

Answer 4

Place your image in a gestureDetector like this:

GestureDetector(
    onTap: () {}
    child: Image.asset('path/the_image.png')
)

Answer 5

Display image icon button with ripple effect over the image when pressed:

          Material(
            // needed
            color: Colors.transparent,
            child: InkWell(
              onTap: () => myOnTap, // needed
              child: Image.asset(
                "assets/resize.png",
                width: 22,
                fit: BoxFit.cover,
              ),
            ),
          )

Answer 6

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.