在Flutter中创建3D塑料外观按钮

blmhpbnm  于 2022-11-17  发布在  Flutter
关注(0)|答案(1)|浏览(164)

我的任务是设计这些塑料外观的按钮在Flutter。设计是不传统的Flutter与复杂的阴影和三维效果和发光的灯光,因此我不能找到类似的代码看网上。
也许我的艺术技巧还不能胜任这项工作。任何帮助和建议都非常感谢,因为我只是需要一个起点。谢谢。

xzv2uavs

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,它应该帮助你做出你想要做的东西。

相关问题