Flutter 自定义形状的按钮小部件

Question

嗨，我正在将 html/css 设计转换为 dart 代码来构建这个自定义按钮形状的小部件。我认为需要一些画家的技能。有人可以帮忙吗？

Answer 1

您可以使用 BeveledRectangleBorder 获得此形状：-

Material(
            clipBehavior: Clip.antiAlias,
            color: Colors.black,
            shape: BeveledRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(30),
                bottomRight: Radius.circular(30),
              ),
            ),
            child: Container(
              alignment:Alignment.center,
              height: 80,
              width: 180,
              color:Colors.black,
              child: Text("Apply now",style:TextStyle(color:Colors.white)),
            ),
          ),

Answer 2

要设计这种形状，您需要使用 CustomPainter。查看 this 存储库，它具有自定义设计的按钮。具体来说，ShapePainter 类就是您要寻找的。