CODEWITHSUNDEEP
flutterdartflutter-layout
Simran Aswani
Simran Aswani

Reputation: 1316

How to add a shadow around a button in Flutter?

I am trying to re-create a button similar to what is given in the picture below. However I am unable to add the faint shadow behind it.

This is what I'm trying to achieve:

enter image description here

This is what my button looks like:

enter image description here

This is my code:

                Container(
                  height: 45,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Color(0xFFFF8C3B),
                        Color(0xFFFF6365),
                      ],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                    ),
                    borderRadius: const BorderRadius.all(
                      Radius.circular(25.0),
                    ),
                  ),
                  child: Center(
                    child: GestureDetector(
                      onTap: () {},
                      child: Text(
                        'Create Account',
                        textAlign: TextAlign.left,
                        style: TextStyle(
                          fontFamily: "Netflix",
                          fontWeight: FontWeight.w600,
                          fontSize: 18,
                          letterSpacing: 0.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ),
                ),

Upvotes: 9

Views: 31486

Answers (3)

yousef Abbdolzadeh
yousef Abbdolzadeh

Reputation: 421

You can use ElevatedButton or another button in a container for a better display mode in hover or click on a button like this:

 Container(
                  margin: const EdgeInsets.symmetric(horizontal: 30),
                  alignment: Alignment.center,
                  width: double.maxFinite,
                  height: 55,
                  decoration: const BoxDecoration(
                      borderRadius: BorderRadius.all(
                        Radius.circular(20.0),
                      ),
                      boxShadow: [
                        BoxShadow(
                          color: Color(0xff5BA7FB),
                          offset: Offset(0, 5),
                        )
                      ]),
                  child: ElevatedButton(
                    style: ButtonStyle(
                      elevation: MaterialStateProperty.all(0),
                        padding: MaterialStateProperty.all(
                            const EdgeInsets.symmetric(
                                vertical: 15.0, horizontal: 15.0)),
                        foregroundColor: MaterialStateProperty.all(
                            const Color(0xff1257A2),),
                        backgroundColor: MaterialStateProperty.all(
                            const Color(0xff1257A2),),
                        shape: MaterialStateProperty.all(
                            RoundedRectangleBorder(
                                borderRadius:
                                BorderRadius.circular(20.0))),
                        minimumSize: MaterialStateProperty.all(
                            const Size(double.infinity, double.infinity))),
                    onPressed: () {  Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => const SignUp()));},
                    child:Text(
                      'signUp',
                      textAlign: TextAlign.center,
                      style: Theme.of(context).textTheme.labelMedium,
                    )
                  )),

Upvotes: 0

Mobina
Mobina

Reputation: 7109

You can add a pink shadow to the Container:

Container(
            height: 60,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Color.fromRGBO(255, 143, 158, 1),
                  Color.fromRGBO(255, 188, 143, 1),
                ],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
              ),
              borderRadius: const BorderRadius.all(
                Radius.circular(25.0),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.pink.withOpacity(0.2),
                  spreadRadius: 4,
                  blurRadius: 10,
                  offset: Offset(0, 3),
                )
              ]
            ),
            child: Center(
              child: GestureDetector(
                onTap: () {},
                child: Text(
                  'Create Account',
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontFamily: "Netflix",
                    fontWeight: FontWeight.w600,
                    fontSize: 18,
                    letterSpacing: 0.0,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),

Note: I also changed the gradient colors to make it look more like the picture.

Result:

res

Upvotes: 18

Jigar Patel
Jigar Patel

Reputation: 5423

You can wrap the widget with Material widget and give it elevation and shadowColor property as per your requirement.

Material(
           borderRadius: BorderRadius.circular(25.0),
           elevation: 10,
           shadowColor: Color(0xFFFF8C3B),
           child: Container(
             height: 45,
             decoration: BoxDecoration(
               gradient: LinearGradient(
                 colors: [
                   Color(0xFFFF8C3B),
                   Color(0xFFFF6365),
                 ],
                 begin: Alignment.centerLeft,
                 end: Alignment.centerRight,
               ),
               borderRadius: const BorderRadius.all(
                 Radius.circular(25.0),
               ),
             ),
             child: //rest of the existing code
         )

Upvotes: 3

Related Questions