Home > Mobile >  How do I get rounded corners in CustomPaint with fill in Flutter?
How do I get rounded corners in CustomPaint with fill in Flutter?

Time:03-31

I have a custom paint as below:

class _MPButtonPainter extends CustomPainter {
  final Color fillColor;
  final bool reverse;

  _MPButtonPainter({
    required this.fillColor,
    required this.reverse,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      // parametrize
      ..color = fillColor
      ..style = PaintingStyle.fill;

    // const a = Offset(0, 0);
    // final b = Offset(size.width, size.height);
    // final rect = Rect.fromPoints(a, b);

    final path = Path()
      // parametrize
      ..lineTo(0, 0)
      ..lineTo(size.width, 0)
      ..arcToPoint(
        Offset(size.width, size.height),
        radius: reverse ? const Radius.circular(35) : const Radius.circular(5),
        clockwise: !reverse,
      )
      ..lineTo(0, size.height)
      ..arcToPoint(
        Offset.zero,
        radius: reverse ? const Radius.circular(5) : const Radius.circular(35),
        clockwise: reverse,
      )
      ..close();

    canvas.drawPath(path, paint);
  }

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

...which draws the shapes below:

mpbutton shape irl

However, my goal is to achieve below:

mpbutton mockup

As you can see, this design has rounded corners at the end rather than being sharp.

I have tingled with strokeCap param on Paint, but it only affects strokes. This shape has fills. I wonder how I can achieve rounded corners.

Thanks in advance.

Environment

> flutter doctor -v
[✓] Flutter (Channel stable, 2.10.3, on KDE neon User - 5.24 5.13.0-39-generic, locale en_US.UTF-8)
    • Flutter version 2.10.3 at /home/erayerdin/snap/flutter/common/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (4 weeks ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /opt/sdks/android/
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /snap/android-studio/current/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11 0-b60-7590822)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /snap/android-studio/119/android-studio
    • Flutter plugin can be installed from:
                 
  • Related