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

expecting like this:

CodePudding user response：

You can use:

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

CodePudding user response：

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');
          },
        ),

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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');
        },
      ),