Git Product home page Git Product logo

flutter-pencilkit's Introduction

Flutter iOS Pencil Kit

PencilKitMJStudio

pub package licence

Flutter plugin for using iOS Pencil Kit

preview

Changelog

Note πŸ“’

  • This package only provides iOS implementation. If you try use widget of this package other than iOS, you see a Red warning box.
  • iOS Pencil Kit is available from iOS 13.0

Supported Platforms πŸ“±

  • iOS

Highlights 🌟

  • Drawing
  • Show/Hide palette
  • Undo/Redo
  • Clear
  • UI properties(background color, scrollability, isOpaque, etc...)
  • Import/Export drawing data
  • Get drawing png/jpeg image data as base64
  • Manage drawing tools programmatically

Requirements βœ…

  • iOS: Deployment target >= 9.0

Setup & Usage πŸŽ‰

flutter pub add pencil_kit

Available Methods

Methods available for PencilKitController.

Method Description Throws Etc
clear() Clear canvas X
show() Show Palette X
hide() Hide Palette X
redo() Redo last drawing action X
undo() Undo last drawing action X
save(): Future<String?> Save drawing data into file system, can return base 64 data if withBase64Data is true O
load(): Future<String?> Load drawing data from file system, can return base 64 data if withBase64Data is true O
getBase64Data(): Future Get current drawing data as base64 string form O
loadBase64Data(String base64Data): Future Load base64 drawing data into canvas O
getBase64PngData(): Future Get current drawing data as png base64 string form O scale = 0 means use default UIScreen.main.scale
getBase64JpegData(): Future Get current drawing data as jpeg base64 string form O scale = 0 means use default UIScreen.main.scale. default compression is 0.93
setPKTool({required ToolType toolType, double? width, Color? color}): Future Set PKTool type with width and color X

Caution for setPKTool

setPKTool can fail if tool type is not supported by device iOS version In eraser tools, the width parameter will work only from iOS 16.4 or above iOS version

You should check whether feature is available in user's iOS version with [ToolType.isAvailableFromIos16_4] and [ToolType.isAvailableFromIos17]

Read more about ToolType type definition.

Type definition
/// PKTool type enum for [PencilKitController.setPKTool]
enum ToolType {
  /// pen tool
  pen(false, false),

  /// pencil tool
  pencil(false, false),

  /// marker tool
  marker(false, false),

  /// monoline tool, available from iOS 17.0
  monoline(false, true),

  /// fountainPen tool, available from iOS 17.0
  fountainPen(false, true),

  /// watercolor tool, available from iOS 17.0
  watercolor(false, true),

  /// crayon tool, available from iOS 17.0
  crayon(false, true),

  /// vector eraser tool
  eraserVector(false, false),

  /// bitmap eraser tool
  eraserBitmap(false, false),

  /// fixed width bitmap eraser tool, available from iOS 16.4
  eraserFixedWidthBitmap(true, false),
  ;

  const ToolType(this.isAvailableFromIos16_4, this.isAvailableFromIos17);

  final bool isAvailableFromIos16_4;
  final bool isAvailableFromIos17;
}

PencilKit Widget Parameters

All the available parameters.

Parameter Description
onPencilKitViewCreated A callback for platform view created. You can store PencilKitController from argument of this callback.
hitTestBehavior iOS UIKitView hitTestBehavior
unAvailableFallback A widget for render UnAvailable state. The default is A red box
alwaysBounceVertical A Boolean value that determines whether bouncing always occurs when vertical scrolling reaches the end of the content.
alwaysBounceHorizontal A Boolean value that determines whether bouncing always occurs when horizontal scrolling reaches the end of the content view.
isRulerActive A Boolean value that indicates whether a ruler view is visible on the canvas.
drawingPolicy The policy that controls the types of touches allowed when drawing on the canvas. This properties can be applied from iOS 14.0
toolPickerVisibilityDidChange Tells the delegate that the tool picker UI changed visibility.
toolPickerIsRulerActiveDidChange Tells the delegate that the ruler active state was changed by the user.
toolPickerFramesObscuredDidChange Tells the delegate that the frames the tool picker obscures changed.
toolPickerSelectedToolDidChange Tells the delegate that the selected tool was changed by the user.
canvasViewDidBeginUsingTool Called when the user starts using a tool, eg. selecting, drawing, or erasing.
canvasViewDidEndUsingTool Called when the user stops using a tool, eg. selecting, drawing, or erasing.
canvasViewDrawingDidChange Called after the drawing on the canvas did change.
canvasViewDidFinishRendering Called after setting drawing when the entire drawing is rendered and visible.

Contribution

Please read CONTRIBUTING.md and contribute your works! Thank you :)

Example

Check example on pub.dev page or example project repo

Troubleshooting

  • I get a Pencil Kit XXX+ ms and it freezes.
    • Turn off Graphics HUD menu in iOS Developer Settings. #22

flutter-pencilkit's People

Contributors

allcontributors[bot] avatar frybitsinc avatar louis115 avatar mym0404 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

flutter-pencilkit's Issues

[Request] Get draw events

Description

Is there a possibility to get a controller.onChange function running?

I would like to get the draw events to synchronize it to other devices using a websocket.

Thanks!

Device

None

PencilKit crashes when adding small taps to screen

Description

Not sure what's happening, but I deleted everything but the PencilKit in the example. If I add many small taps/dashes/etc to the screen eventually after 20 or so, it crashes. GPU FPS Pre all seem "good" so not sure what's happening.

I'm using the latest version of the 6th gen iPad Pro 12.9"

I get a "Pencil Kit 9000+ ms" and it freezes.

Steps to reproduce

  1. Add multiple small dashes to screen

Snack or a link to a repository

none

package version

2.0.0

Flutter Doctor Output

Doctor summary (to see all details, run flutter doctor -v):
[βœ“] Flutter (Channel stable, 3.19.6, on macOS 14.2 23C64 darwin-x64, locale en-US)
[βœ—] Android toolchain - develop for Android devices
βœ— Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions).
If the Android SDK has been installed to a custom location, please use
flutter config --android-sdk to update to that location.

[βœ“] Xcode - develop for iOS and macOS (Xcode 15.3)
[βœ“] Chrome - develop for the web
[!] Android Studio (not installed)
[βœ“] IntelliJ IDEA Ultimate Edition (version 2024.1)
[βœ“] IntelliJ IDEA Ultimate Edition (version 2023.3)
[βœ“] Connected device (3 available)
[βœ“] Network resources

! Doctor found issues in 2 categories.

Build type

Debug mode

Device

iPad Readl device

Device model

iPad Pro 12.9" 6th gen

Acknowledgements

Yes

Cannot draw when PencilKit is inside an InteractiveViewer or GestureDectector

Description

When you put the PencilKit inside a InteractiveViewer, it can only draw a short line.
It's likely it triggered the pan threshold. I tried to set panEnabled to false, still experience the same.

Edit

After some testing, you cannot draw when you wrapped the PencilKit with GestureDetector also.

Steps to reproduce

  1. Create a new Flutter app
  2. Add a InteractiveViewer
  3. Set the panEnabled to false
  4. Add a PencilKit to the child of InteractiveViewer
  5. Run the app

Snack or a link to a repository

https://github.com/jack-szeto/pencilkit_minimal.git

package version

1.0.6

Flutter Doctor Output

Doctor summary (to see all details, run flutter doctor -v):
[βœ“] Flutter (Channel stable, 3.16.7, on macOS 13.6 22G120 darwin-arm64, locale zh-Hant-HK)
[βœ“] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[βœ“] Xcode - develop for iOS and macOS (Xcode 15.2)
[βœ“] Chrome - develop for the web
[βœ“] Android Studio (version 2023.1)
[βœ“] VS Code (version 1.85.1)
[βœ“] Connected device (3 available)
[βœ“] Network resources

β€’ No issues found!

Build type

Debug mode

Device

iOS Real device

Device model

iPad (9)

Acknowledgements

Yes

Error working when textfield is above pencilkit

Description

I'm trying to do native pencil drawing on a textfield.
However, if there is a textfield above the pencilkit, events are taken from the pencilkit and drawing does not occur.
What should I do about this problem?

Steps to reproduce

  1. Wrap it in a stack and place pencilkit -> textfield.
  2. Enter text with a pencil in the textfield.
  3. In some cases, it may or may not be entered.

Snack or a link to a repository

https://github.com/flexboni/all_in_one_flutter/blob/main/lib/feat/pencil/screen/pencil_screen.dart

package version

1.0.8

Flutter Doctor Output

[βœ“] Flutter (Channel stable, 3.19.2, on macOS 14.2 23C64 darwin-arm64, locale
ko-KR)
β€’ Flutter version 3.19.2 on channel stable at
/Users/flexboni/fvm/versions/stable
β€’ Upstream repository https://github.com/flutter/flutter.git
β€’ Framework revision 7482962148 (13 days ago), 2024-02-27 16:51:22 -0500
β€’ Engine revision 04817c99c9
β€’ Dart version 3.3.0
β€’ DevTools version 2.31.1

[βœ“] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
β€’ Android SDK at /Users/flexboni/Library/Android/sdk
β€’ Platform android-34, build-tools 34.0.0
β€’ Java binary at: /Applications/Android
Studio.app/Contents/jbr/Contents/Home/bin/java
β€’ Java version OpenJDK Runtime Environment (build
17.0.6+0-17.0.6b829.9-10027231)
β€’ All Android licenses accepted.

[βœ“] Xcode - develop for iOS and macOS (Xcode 15.0.1)
β€’ Xcode at /Applications/Xcode.app/Contents/Developer
β€’ Build 15A507
β€’ CocoaPods version 1.15.2

[βœ“] Chrome - develop for the web
β€’ Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[βœ“] Android Studio (version 2022.3)
β€’ Android Studio at /Applications/Android Studio.app/Contents
β€’ Flutter plugin can be installed from:
πŸ”¨ https://plugins.jetbrains.com/plugin/9212-flutter
β€’ Dart plugin can be installed from:
πŸ”¨ https://plugins.jetbrains.com/plugin/6351-dart
β€’ Java version OpenJDK Runtime Environment (build
17.0.6+0-17.0.6b829.9-10027231)

[βœ“] VS Code (version 1.87.1)
β€’ VS Code at /Applications/Visual Studio Code.app/Contents
β€’ Flutter extension version 3.84.0

[βœ“] Connected device (4 available)
β€’ κΉ€κ΅¬λ΄‰μ˜ iPad (mobile) β€’ 00008101-000121310E87001E β€’ ios β€’ iOS 17.3.1 21D61
β€’ iPad Pro (11-inch) (3rd generation) (mobile) β€’ 01F20567-71A8-474F-8D3D-133D473F3435 β€’ ios β€’ com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
β€’ macOS (desktop) β€’ macos β€’ darwin-arm64 β€’ macOS 14.2 23C64 darwin-arm64
β€’ Chrome (web) β€’ chrome β€’ web-javascript β€’ Google Chrome 122.0.6261.112
! Error: Browsing on the local area network for ν™©κ²½μˆ˜μ˜ iPad. 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
β€’ All expected network resources are available.

β€’ No issues found!

Build type

None

Device

iPad simulator

Device model

iOS 17.3.1

Acknowledgements

Yes

base64 error

Description

Hello.
I would like to point out an important mistake about the pencil_package you wrote in Flutter. getBase64 function is not working properly. Or I made a mistake :) I run the getBase64 function exactly as in the example. However, when I write the value returned by the method to base64 to Image sites, I get an error. So the code returned is not quite correct.

Steps to reproduce

I write example code

Snack or a link to a repository

https://github.com/mj-studio-library/flutter-pencilkit/

package version

1.0.7

Flutter Doctor Output

Doctor summary (to see all details, run flutter doctor -v):
[βœ“] Flutter (Channel stable, 3.16.6, on macOS 13.5.1 22G90 darwin-arm64, locale
tr-TR)
[βœ“] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[βœ“] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[βœ“] Chrome - develop for the web
[βœ“] Android Studio (version 2022.3)
[βœ“] VS Code (version 1.85.2)
[βœ“] Connected device (3 available)
[βœ“] Network resources

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

Background color base64

Description

Hi! What I want is simply this: the selected background color to be included in the basepng64 code.

Device

iOS simulator

Building to device

Working with the IOS simulator is fine, but when I try to build for a physical device, Xcode will fail with the message "missing module pencil_kit". Are there steps I am missing? Thanks!

Save/Load

Hi. In the description it states "Import/Export drawing data". Where are the available methods to do so?

Jakob

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.