flutter - 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

要在 Flutter 中制作自定义形状的按钮，请在shape按钮的style.

ElevatedButton(
    style: ElevatedButton.styleFrom(
        shape: const MyShapeBorder(),
        primary: Colors.myColor
    ),
    onPressed: () {
        doSomething();
    },
    child: Text("My Button")
)

您可以通过这种方式使用任何材质按钮。

你的MyShapeBorder类需要覆盖getInnerPath(), getOuterPath(), paint(), scale(), 和copyWith(). 您可以扩展OutlinedBorder.

确保不要忘记将形状居中，以便文本正确显示在里面！

Answer 3

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