How to remove background color for the sized box in flutter-CodePudding

The background color is coming for the elevated button in flutter. I have added a background image for the elevated button, but the background color( blue and grey color ) is coming for it. I do not know where it is coming from. So how to remove it?

    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: 80, // <-- Your height
                width: 80,
                child: ElevatedButton(
                  onPressed: () {
                    onGoogleSignIn(context);
                  },
                  child: Image.asset('images/gm.png')
                ),
            ),
            SizedBox(
                height: 80, // <-- Your height
                width: 80,
                child: ElevatedButton(
                  onPressed: () {
                    //validateForm();
                    Navigator.push(context,
                        MaterialPageRoute(builder: (c) => const PhoneLoginScreen()));
                  },
                    style: ElevatedButton.styleFrom(
                      primary: Colors.red.withOpacity(0),
                    ),

                    child: Image.asset('images/mn.png')
                ),// Button
            ),
          ],
        ),
      ),

CodePudding user response：

The Solution is : Make Elevation - 0

  style: ButtonStyle(
          color: MaterialStateProperty.all(Colors.transparent),
          elevation: MaterialStateProperty.all(0), //Defines Elevation
       
        ),

CodePudding user response：

It seems to be the elevation causing the issue. Use Ink with InkWell to make an image button. Given your image is circular, you can use the border-radius to limit the splash.

class ImageButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const double size = 80;
    const String imageUrl = "https://picsum.photos/512";

    return SizedBox(
      width: size,
      height: size,
      child: Ink(
        decoration: BoxDecoration(
          image: const DecorationImage(image: NetworkImage(imageUrl)),
          borderRadius: BorderRadius.circular(size / 2),
        ),
        child: InkWell(
          onTap: () {},
          borderRadius: BorderRadius.circular(size / 2),
        ),
      ),
    );
  }
}

Check the example in Dartpad

CodePudding user response：

you can try another option to make similar

InkWell(
 onTap:(){},
 splashColor: .... // this will add ripple effect
 child: Padding(padding:EdgeInsets.all(20),
      child: Image.asset('images/mn.png')
 )