How to set a Raised Button's Background Color transparent in Flutter?

user_12516439 0
Viewed 27319

Here is my code,I'd like to set a background color, transparent to my button.

I'd like to add background color to both Raised Button in my code. I also tried wrapping it with a Container and then applying container's background transparent, but it didn't work.

         Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                FadeAnimation(
                  3.4,
                  SizedBox(
                    width: double.infinity,
                    height: 44,
                    child: RaisedButton(
                     color: Colors.white,
                      onPressed: navigateToSignUp,
                      child: Text(
                        'Sign Up',
                        style:
                            TextStyle(color: Colors.blueGrey, fontSize: 24),
                      ),
                    ),
                  ),
                ),

              SizedBox(height: 10),
                FadeAnimation(
                  3.4,
                  SizedBox(
                    width: double.infinity,
                    height: 44,
                    child: RaisedButton(
                      color: Colors.white,
                      onPressed: navigateToSignIn,
                      child: Text(
                        'Sign In',
                        style: TextStyle(color: Colors.grey, fontSize: 24),
                      ),
                    ),
                  ),
                ),
flutter
7 Answers

You can use Opacity with black Color

Like this :

 color: Colors.black.withOpacity(0.05), //set this opacity as per your requirement

It will look much more Attractive

user_114048830

Try flat button:

            FlatButton(
              color: Colors.transparent,
              splashColor: Colors.black26,
              onPressed: () {
                print('done');
              },
              child: Text(
                'Click Me!',
                style: TextStyle(color: Colors.lightBlue),
              ),
            ),
user_83467700

Just use Colors.transparent

                RaisedButton(
                  color: Colors.transparent,
                  onPressed: null,
                  child: Text(
                    'Sign In',
                    style: TextStyle(color: Colors.grey, fontSize: 24),
                  ),
                ),
user_89666370

Using the colors.transparent or setting opacity property to 0 may not work if you used a gradient as the background. For this reason, the most logical choice for RaisedButton is to set its elevation property to 0.

Like this:

RaisedButton(
        elevation : 0, //add this line
        color: Colors.white,
        onPressed: navigateToSignIn,
        child: Text(
          'Sign In',
          style: TextStyle(color: Colors.grey, fontSize: 24),
         ),
       ),
user_31417500 
ElevatedButton(
            style: ElevatedButton.styleFrom(
              elevation: 0.0,
              primary: Colors.red.withOpacity(0),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(2),
                  ),
                  side: BorderSide(color: Colors.white)),
            ),
user_171315620

use FlatButton instead of RaisedButton as below:

new FlatButton(
              child: new Icon(Icons.arrow_back_ios),
              onPressed: (){}
              )
user_37360630

RaisedButton by default either it is activer or not it will have greyish background. Try to replace FlatButton in place of that RaisedButton. Where you could simply pass color : Colors.transparent (yet FlatButton it self has a transparent background).

user_136072670
Related