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

CodePudding user response：

The more better way to add a button behind the image or text to navigate the screen is to close the widget inside the GestureDetector with its property onTap. In this way you are able to add link behind to everything including image, text, container, column, icon etc

GestureDectector( 
     onTap: (){}
child: Image(
    image: AssetImage("")
  )
)