我的任务是设计这些塑料外观的按钮在Flutter。设计是不传统的Flutter与复杂的阴影和三维效果和发光的灯光,因此我不能找到类似的代码看网上。也许我的艺术技巧还不能胜任这项工作。任何帮助和建议都非常感谢,因为我只是需要一个起点。谢谢。
xzv2uavs1#
这是一个叫做Neumorphism的设计风格。这是一个非常酷的设计风格,我也在我的应用程序中使用过。这里是一个我制作的另存为按钮的例子。
GestureDetector( child: Container( decoration: BoxDecoration( color: Colors.grey[300], borderRadius: BorderRadius.circular(50), gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color?.lerp(Colors.grey[400], Colors.white, .1) as Color, Color?.lerp(Colors.white, Colors.grey[100], .2) as Color, ]), boxShadow: const [ //Shadow for top-left corner BoxShadow( color: Colors.grey, offset: Offset(5, 5), blurRadius: 3, spreadRadius: 1.7, ), //Shadow for bottom-right corner BoxShadow( color: Colors.white, offset: Offset(-3, -3), blurRadius: 3, spreadRadius: 1, ), ], border: Border.all( width: 0.5, color: Colors.white, )), child: Padding( padding: const EdgeInsets.all(8.0), child: Text( text.saveAs, style: const TextStyle( color: Colors.blue, fontSize: 30, fontWeight: FontWeight.bold, ), ), ), ), onTap: () { String board = Provider.of<BoardUtils>(context, listen: false) .boardToString(); TextEditingController controller = TextEditingController(); showDialog( context: context, builder: (BuildContext context) { return _buildAlertDialog( controller, context, board); }); }),
这是一个package,它应该帮助你做出你想要做的东西。
1条答案
按热度按时间xzv2uavs1#
这是一个叫做Neumorphism的设计风格。这是一个非常酷的设计风格,我也在我的应用程序中使用过。这里是一个我制作的另存为按钮的例子。
这是一个package,它应该帮助你做出你想要做的东西。