How to set the shape of a button with conical border

问题

I'm dealing with buttons in flutter,and want to change the shape of the button in my application. How can I get a conical border for my button?

回答1:

You can create your own one using CustomPaint widget to draw your button shape.

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;
  }
}

Usage

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

You can fine tune the code as per your requirements

来源：https://stackoverflow.com/questions/53929637/how-to-set-the-shape-of-a-button-with-conical-border