Flutter ElevatedButton with Image cover

Question

I want to create a rounded ElevatedButton with an image background cover as the following:

Right now my ElevatedButton show that result:

ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
      child: Image.network('url...', fit: BoxFit.cover),
    )

Can someone give me an example of how to add a background image to a rounded ElevatedButton?

Answer 1

Use clipBehavior and padding like this:

SizedBox(
    height: 100,
    child: ElevatedButton(
        onPressed: () {},
        clipBehavior: Clip.antiAlias,// <--add this
        style: ElevatedButton.styleFrom(
            shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0), // <--add this
            ),
            padding: EdgeInsets.zero, // <--add this
        ),         
        child: Image.network('url...', fit: BoxFit.cover),
    ),
),