How can I implement such a button?

Question

https://cdn.dribbble.com/users/50386/screenshots/294883/dribbble.jpg

Large red button and Edit button

I tried to create this beautiful button with Elevated Button, but it does not work.

How would you make it?

child: PushableButton(
                height: 60,
                elevation: 8,
                hslColor: HSLColor.fromAHSL(1.0, 347, 0.81, 0.55),
                shadow: BoxShadow(
                  color: Colors.white.withOpacity(0.1),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 2),
                ),
                child: Text(
                  'VS PLAYER',
                ),
                onPressed: () {
                  Navigator.pushNamed(
                    context,
                    '/match',
                    arguments: {
                      'mode': Mode.PVP,
                    },
                  );
                },
              ),

score 2 · Accepted Answer · edited Dec 27 '22 at 08:41

2

you can use this one A 3D pushable button built in Flutter

child: PushableButton(
                height: 60,
                elevation: 8,
                hslColor: HSLColor.fromAHSL(1.0, 347, 0.81, 0.55),
                shadow: BoxShadow(
                  color: Colors.white.withOpacity(0.1),
                  spreadRadius: 5,
                  blurRadius: 7,
                  offset: Offset(0, 2),
                ),
                child: Text(
                  'VS PLAYER',
                ),
                onPressed: () {
                  Navigator.pushNamed(
                    context,
                    '/match',
                    arguments: {
                      'mode': Mode.PVP,
                    },
                  );
                },
              ),

edited Dec 27 '22 at 08:41

Tdayo

269
4
11

answered Dec 27 '22 at 07:50

Robin Hood

710
3
16

Thanks for your comment . I did it . but not same – Tdayo Dec 27 '22 at 08:29
you have to customize this button style according to your requirement – Robin Hood Dec 27 '22 at 08:30
Do you want me to share the exact button code? – Robin Hood Dec 27 '22 at 08:31
I did write code – Tdayo Dec 27 '22 at 08:38
https://github.com/bizz84/pushable_button/tree/main/lib – Tdayo Dec 27 '22 at 08:39

How can I implement such a button?

1 Answers1