flutterflutter-design

How can I implement such a button?


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,
                    },
                  );
                },
              ),

Solution

  • 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,
                        },
                      );
                    },
                  ),