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

Question

我正在处理按钮中的抖动，并希望在应用程序中更改按钮的形状。如何获得按钮的圆锥形边框？

Answer 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: () {},
),

您可以根据需要微调代码