简体   繁体   中英

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)),
             ]
             )
           ),
         ],
      )

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM