Блог

У меня есть эта кнопка, которая имеет тенденцию сливаться или плавиться по сторонам, которые я хочу воссоздать…

1

До сих пор мне удавалось это делать, добавляя две тени от ящиков к двум контейнерам в стопке

2

Но я, кажется, не могу растянуть его по бокам, как первую пуговицу.

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

Есть такой плагин flutter_neumorphic. Это в основном помогает создавать неоморфные дизайны в флаттере. Я не знаю , что вы имеете в виду blend or melt over to its sides , но я думаю, что это то, что вы ищете.