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?

CodePudding user response：

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

CodePudding user response：

you can't use the image in your ElevatedButton but you can use IconButton and Container in flutter for the image...

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

and

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

CodePudding user response：

You can use Elevated Button.

• Ensure all padding is removed from the parent Elevated button by setting the padding in ElevatedButton.styleFrom padding param; Apply new material state edge insets of all zero

MaterialStateProperty.all(EdgeInsets.zero)

• Set Stack.fit to StackFit.streched wrap the Icon with Center widget.

• Set background image frameBuilder to a wrapper that will apply const StadiumBorder() to the image: Decorated box

---

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
     shape: const StadiumBorder(),
     padding: MaterialStateProperty.all(EdgeInsets.zero)
  ),
  child: Stack(
  alignment: Alignment.center,
  children: [
      Image.network(
        'url...', 
        fit: BoxFit.cover
        frameBuilder: (c, child, frame, sync) {
          return DecoratedBox(
            ...,
            shape: const StadiumBorder(),
            child: child
          )
        }
      ),
      const Icon(Icons.play_arrow, color: Colors.white)
    ],
  )
)

Now this should do...

Check out r-css: Easy to use flutter templates. Package available on Pub.dev

CodePudding user response：

I can't find any way to make the background of the ElevatedButton an image(maybe someone can find it). Try making a self-made button with multiple widgets, namely GestureDetector, SizedBox, Card and Container.

Try the following code:

GestureDetector(
  onTap: () {},
  child: SizedBox(
    height: 150,
    width: 250,
    child: Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          image: const DecorationImage(
            fit: BoxFit.cover,
            image: NetworkImage(
              'url...',
            ),
          ),
        ),
      ),
    ),
  ),
),