Menu
I'm new to Flutter programming and I want to ask is it possible to make image as button background flutter? Here's my image asset:
final _backgroundButton = new AssetImage("assets/background_button.png");
and here's my button:
RaisedButton(
child: const Text('LANJUTKAN'),
color: Theme.of(context).accentColor,
elevation: 0.0,
splashColor: Colors.blueGrey,
onPressed: () {
// Perform some action
},
),
Anyone know how to do it? it's okay for me to change the raised button to flat button or anything else as long as I can set image as background. Thank you!
424
In this Flutter tutorial, let’s check how to set image background in flutter. Here, I am explaining two ways to set an image background. The first way is by using the Stack widget. The Stack widget helps us to create multiple layers of widgets which overlay each other in a given order. Here, the Bottom widget will be the bottom most widget.
Using RaisedButton.icon () widget can easily put icon at the left side of button. But to set icon at right side of raised button we have to modify the raised button structure and create custom raised button with Row widget. We are using the default Icon library of flutter in our tutorial because it covers all the icons.
In Raised button use Image () as a child instead of Text (). If both text and image are required just use Row () or Column () widget as a child. If just an icon is required in a button use IconButton instead of RaisedButton As @pskink mentioned change your RaisedButton child from Text to Image, like this
Here, I am explaining two ways to set an image background. The first way is by using the Stack widget. The Stack widget helps us to create multiple layers of widgets which overlay each other in a given order.
the "RaisedButton" is a material component , its take it shape depends on "material design" roles , you can create your own custom button widget
GestureDetector(
child: Container(
width:120,
height: 40,
decoration: BoxDecoration(
color: Colors.black,
image: DecorationImage(
image:AssetImage("assets/background_button.png"),
fit:BoxFit.cover
),
child: Text("clickMe") // button text
)
),onTap:(){
print("you clicked me");
}
)
If anyone else come here looking for this, MaterialButton works perfectly.
MaterialButton(
padding: EdgeInsets.all(8.0),
textColor: Colors.white,
splashColor: Colors.greenAccent,
elevation: 8.0,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/button_color.png'),
fit: BoxFit.cover),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text("SIGN OUT"),
),
),
// ),
onPressed: () {
print('Tapped');
},
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
