如何在 Flutter 中重新創建此按鈕？

Question

我有這個按鈕，它傾向於混合或融化到我想要重新創建的它的側面......

到目前為止，我已經設法做到這一點，方法是向堆棧中的兩個容器添加兩個框陰影

但我似乎無法像第一個按鈕那樣將它混合到兩側。

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

Answer 1

有這個插件flutter_neumorphic 。 它基本上有助於在 flutter 中創建新形態設計。 我不知道你所說的blend or melt over to its sides是什么意思，但我認為這就是你要找的東西。