Cannot clip PencilKit inside of a circular shape

[sarbogast]

Description

I am trying to have a circular PencilKit by wrapping it into a card with a CircleBorder shape, but the background and drawing area extends slightly beyond the limits of the border of the shape and I don't understand why.

This could be linked to Flutter itself having a hard time clipping native views, but I don't know.
Also note that I have tried many combinations of wrapping PencilKit or the Card itself into ClipOvals, with or without custom clippers, to no avail.

Steps to reproduce

1. Run the example project here: https://github.com/sarbogast/flutter-pencilkit
2. Observe the blue background going beyond the red border of the card, even with the card clipping

Snack or a link to a repository

https://github.com/sarbogast/flutter-pencilkit

package version

2.1.0

Flutter Doctor Output

(base) ~/dev/flutter-pencilkit git:[main]
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, on macOS 15.2 24C101 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] Android Studio (version 2024.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.3.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.3.1)
[✓] VS Code (version 1.96.0)
[✓] Connected device (5 available)
! Error: Browsing on the local area network for iPhone de Sebastien. Ensure the device is unlocked and attached with a cable or associated with the same local
area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
! Error: Browsing on the local area network for iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area network
as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

• No issues found!

Build type

Debug mode

Device

iPad Readl device

Device model

iPad Pro (12.9-inch) (5th generation)

Acknowledgements

Yes

[mym0404]

Thank you for sponsoring. I'll look this issue.

I tested it with stable version of flutter(3.27.0) but without luck.

---

I can make almost circular with ClipRRect but not a perfect circle.

ClipRRect(
                          borderRadius: BorderRadius.circular(200),
                          child: SizedBox(
                            width: 400,
                            height: 400,
                            child: PencilKit(
                              onPencilKitViewCreated: (controller) {
                                // if (this.controller == null)
                                //   this.controller = controller;
                              },

---

But, I bet this is not an issue of this package.

I found some issue related to this.

• ClipOval for native view is not working on Android & IOS flutter/flutter#113168
• iOS platform view clip path: Find a better approximate for conic path flutter/flutter#35062