How to add image for buttons in flutter - flutter

Question

I am trying to add image for buttons in flutter like below the image. Here i have used ElevatedButton. So How to set background image for the ElevatedButton. I do not know how to add image for it. If anyone know please help to find the solution.
child:SingleChildScrollView(
child: Wrap(
alignment: WrapAlignment.center,
runSpacing: 20.0, // Or more
spacing: 20, // Or more
children: [
const SizedBox(
height: 520,
),
SizedBox(
width: double.infinity, // <-- Your width
height: 50, // <-- Your height
),
SizedBox(
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
onSignIn(context);
},
style: ElevatedButton.styleFrom(
primary: Color(0xff557de3),
shape: StadiumBorder()
),
child: const Text(
"GMAIL",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),
),
SizedBox(
height: 50, // <-- Your height
child: ElevatedButton(
onPressed: () {
//validateForm();
},
style: ElevatedButton.styleFrom(
primary: Color(0xff557de3),
shape: StadiumBorder()
),
child: const Text(
"Phone",
style: TextStyle(
color: Colors.white,
fontSize: 13,
fontWeight: FontWeight.bold
),
),
),// Button
),
],
),
),

Answer 1

You can use:
ElevatedButton.icon(
onPressed: (){},
icon: Icon(Icons.phone),
label: Text("hello"),
),

Answer 2

You can use gestures detector
GestureDetector(
onTap: () {
debugPrint('The image button has been tapped');
},
child: SizedBox(
width: 300,
height: 100,
child: Image.network(
'https://picsum.photos/250?image=9',
fit: BoxFit.cover,
),
),
),
or use icon button
IconButton(
splashRadius: 100,
iconSize: 200,
icon: Ink.image(
image: const NetworkImage(
'https://picsum.photos/250?image=9'),
),
onPressed: () {
// do something when the button is pressed
debugPrint('Hi there');
},
),

Answer 3

You can add image from asset:
ElevatedButton(
onPressed: () {},
child: Image.asset('your_asset_path')
)
Or you can add network image:
ElevatedButton(
onPressed: () {},
child: Image.network('your_image_url_path')
)
Or you can create your custom button:
GestureDetector(
onTap: () {},
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('your_asset_image_path'),
),
),
)
)

Answer 4

Instead of using the ElevatedButton, have you tried IconButton, GestureDetector, InkWell, InkResponse and Material?
IconButton(
splashRadius: 100, // optional
onPressed: {YOUR_LOGIC_COMPONENT}
icon: Container(
child : {YOUR_WIDGET},
),
),
or
GestureDetector(
child: SizedBox(child: {YOUR_WIDGET}),
onTap: {YOUR_LOGIC_COMPONENT},
);
or
InkWell(
child: CircleAvatar(child: {YOUR_WIDGET}),
onTap: {YOUR_LOGIC_COMPONENT},
);

Answer 5

You can use MaterialButton and customize it according to your need.
MaterialButton(
padding: EdgeInsets.all(8.0),
textColor: Colors.white,
splashColor: Colors.red,
elevation: 8.0,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(''), //some asset image
fit: BoxFit.cover),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(),
),
),
// ),
onPressed: () {
print('Tapped');
},
),