Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

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),
                      ),
                    ),
                  ),
                ),
like image 871
Sruthi Maria Thomson Avatar asked Nov 28 '22 08:11

Sruthi Maria Thomson


2 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

like image 182
A R Avatar answered Dec 22 '22 10:12

A R


Try flat button:

            FlatButton(
              color: Colors.transparent,
              splashColor: Colors.black26,
              onPressed: () {
                print('done');
              },
              child: Text(
                'Click Me!',
                style: TextStyle(color: Colors.lightBlue),
              ),
            ),
like image 21
Taba Avatar answered Dec 22 '22 09:12

Taba