flutterbuttoncustom-painting

How to make a button with rounded edges in flutter?


Making a rounded corner button is so simple, but I want to make a button that its edges are also rounded like this:

enter image description here

maybe I should use CustomPaint?


Solution

  • SquircleBorder might help you:

    Container(
                width: 56.0,
                height: 56.0,
                child: Material(
                  color: Colors.blueGrey[400],
                  shape: SquircleBorder(
                    side: BorderSide(color: Colors.grey, width: 3.0),
                  ),
                  child: Icon(Icons.settings),
                ),
              ),
    
    class SquircleBorder extends ShapeBorder {
      final BorderSide side;
      final double superRadius;
    
      const SquircleBorder({
        this.side: BorderSide.none,
        this.superRadius: 5.0,
      })
        : assert(side != null),
          assert(superRadius != null);
    
      @override
      EdgeInsetsGeometry get dimensions => EdgeInsets.all(side.width);
    
      @override
      ShapeBorder scale(double t) {
        return new SquircleBorder(
          side: side.scale(t),
          superRadius: superRadius * t,
        );
      }
    
      @override
      Path getInnerPath(Rect rect, {TextDirection textDirection}) {
        return _squirclePath(rect.deflate(side.width), superRadius);
      }
    
      @override
      Path getOuterPath(Rect rect, {TextDirection textDirection}) {
        return _squirclePath(rect, superRadius);
      }
    
      static Path _squirclePath(Rect rect, double superRadius) {
        final c = rect.center;
        final dx = c.dx * (1.0 / superRadius);
        final dy = c.dy * (1.0 / superRadius);
        return new Path()
          ..moveTo(c.dx, 0.0)
          ..relativeCubicTo(c.dx - dx, 0.0, c.dx, dy, c.dx, c.dy)
          ..relativeCubicTo(0.0, c.dy - dy, -dx, c.dy, -c.dx, c.dy)
          ..relativeCubicTo(-(c.dx - dx), 0.0, -c.dx, -dy, -c.dx, -c.dy)
          ..relativeCubicTo(0.0, -(c.dy - dy), dx, -c.dy, c.dx, -c.dy)
          ..close();
      }
    
      @override
      void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {
        switch (side.style) {
          case BorderStyle.none:
            break;
          case BorderStyle.solid:
            var path = getOuterPath(rect.deflate(side.width / 2.0), textDirection: textDirection);
            canvas.drawPath(path, side.toPaint());
        }
      }
    }