CODEWITHSUNDEEP
flutterdart
Risheek Mittal
Risheek Mittal

Reputation: 1109

How do I recreate this button in Flutter?

I have this button which tends to blend or melt over to it's sides which I want to recreate...

2

I have managed to do this up until now, by adding two box shadows to two containers in a stack

1

But I can't seem to blend it to the sides like the first button.

Stack(
         children: [
           Container(
               height: 50,
               width: 150,
               decoration: const BoxDecoration(
                   borderRadius: BorderRadius.all(Radius.circular(30)),
                   boxShadow: [
                     BoxShadow(color: Colors.white38,blurRadius: 5, offset: Offset(-3, -5)),
                   ]
               )
           ),
           Container(
             height: 50,
             width: 150,
             child: Center(
               child: GestureDetector(
                 onTapDown: (_) {
                   setState(() {
                     button = Colors.grey.shade600;
                     print("pressed");
                   });
                 },
                 child: const Text(
                   'Create Account',
                   textAlign: TextAlign.left,
                   style: TextStyle(
                     fontFamily: "Netflix",
                     fontWeight: FontWeight.w600,
                     fontSize: 18,
                     letterSpacing: 0.0,
                     color: Colors.white,
                   ),
                 ),
               ),
             ),
             decoration: BoxDecoration(
             color: button,
             borderRadius: const BorderRadius.all(Radius.circular(30)),
             boxShadow: const [
               BoxShadow(color: Colors.black45,blurRadius: 5, offset: Offset(5, 3)),
             ]
             )
           ),
         ],
      )

Upvotes: 0

Views: 66

Answers (1)

Aloysius Samuel
Aloysius Samuel

Reputation: 1200

There is this plugin flutter_neumorphic. It basically helps to create neomorphic designs in flutter. I don't know what do you mean by blend or melt over to its sides, but I think this is what you are looking for.

Upvotes: 1

Related Questions