如何设置带有锥形边框的按钮的形状答案

【问题标题】：How to set the shape of a button with conical border如何设置带有锥形边框的按钮的形状
【发布时间】：2018-12-26 08:51:19
【问题描述】：

我正在处理颤动的按钮，并且想在我的应用程序中更改按钮的形状。如何为我的按钮设置锥形边框？

【问题讨论】：

如果您有想要实现的图像会更好
我已经添加了按钮的图片！@dlohani
自定义ShapeBorder类
@pskink 请给我一个简短的解释。
写一个扩展ShapeBorder的类 - 检查上面的链接，你会看到Implementers，所以你可以检查已经扩展ShapeBorder类的现有类的源代码

标签： flutter flutter-layout

【解决方案1】：

您可以使用CustomPaint 小部件创建自己的小部件来绘制您的按钮形状。

class MyButton extends StatelessWidget {
  final double width;
  final double height;
  final Color color;
  final Widget child;
  final VoidCallback onPressed;

  const MyButton({
    Key key,
    this.width = 150.0,
    this.height = 75.0,
    this.color,
    @required this.child,
    @required this.onPressed,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        width: width,
        height: height,
        child: CustomPaint(
          painter: MyButtonPainter(
              color: color != null ? color : Theme.of(context).primaryColor),
          child: Center(child: child),
        ),
      ),
    );
  }
}

class MyButtonPainter extends CustomPainter {
  final Color color;

  MyButtonPainter({this.color});
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()..color = color;
    final double arrowDepth = size.height / 2;

    final Path path = Path();

    path.lineTo(size.width - arrowDepth, 0.0);
    path.lineTo(size.width, size.height / 2);
    path.lineTo(size.width - arrowDepth, size.height);
    path.lineTo(0.0, size.height);
    path.lineTo(arrowDepth, size.height / 2);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

用法

MyButton(
  width: 300.0,
  child: Text(
    'Time',
    style:
        Theme.of(context).textTheme.title.copyWith(color: Colors.white),
  ),
  onPressed: () {},
),

您可以根据需要微调代码

【讨论】：