omarhurani / flutter_painter Goto Github PK
View Code? Open in Web Editor NEWA Flutter widget to draw scribbles and text on a background image or color 🎨
License: MIT License
A Flutter widget to draw scribbles and text on a background image or color 🎨
License: MIT License
I run this package's example code.
When you try input text, you see keyboard open and slider above the keyboard.
But you can't slide them while keyboard open.
I think it's better idea that you can slide them while keyboard open.
It appears to exist a bug for which is not possible to remove the swipe gesture to navigate back in flutter.
Flutter 2.10.3 • channel stable
Dart 2.16.1
It is not possible to remove it disabling it completely with WillPopScope
because even if it doesn't go back on the gesture it won't start drawing if it is been tapped on the left side. (from the right side too)
I wonder if anyone has already encountered the same problem and solved it somehow?
Salam, i am using this package but want more shape to draw as like circle, rectangle, arrow. Your controller have only freeStyles and text. Please suggest me
I am using flutter painter library in Page of PageView.builder. I am opening multiple images in different pages of PageView. I have created different PainterController of each page as suggested by document.
But whenever I switched to next image it is increasing the memory. So I have many images and when I switched to many images then my application crashing due to too much memory uses.
I have dispose each and every painter_controller when switched to next page but nothing is working.
Can you please help me on that I am new in flutter.
Thanks in advance.
It is possible instead of using an image, to set a single color as the background?
Right now without using an image, I get a transparent background.
Hi there, your package is awesome and I am using it in my new android app.
but i think there is a bug , when you add some text and you don't move it and then you add another text on the top of the previous one the first text convert to be like the second one .
Hi there, your package is awesome and I am using it in my new developed android app.
Maybe I am missing something , but can we add image like stickers to background?
It would be great if we can add some stickers like text functionality.
This save function works well on Flutter SDK 2.5.0
flutter build web
background image was not saved.
final ui.Image renderedImage = await controller.renderImage(size);
final Uint8List? byteData = await renderedImage.pngBytes;
I want to add a widget customized by me, is there a way to perform this action? Thanks for the fantastic job you've done.
hello, flutter painter is awesome package for notes and draw. It will be more awesome if you will add crop feature of image. Or you can suggest us how we will do this.
Have the ability to add multitouch to the scale settings so that when we have the brush enabled we don't draw whilst zooming.
Just updated to Flutter 3.10 and found the following error when building to ios simulator
Error (Xcode): ../../../.pub-cache/hosted/pub.dev/flutter_painter_v2-2.0.0/lib/src/views/widgets/object_widget.dart:1071:52: Error: The getter 'accentColor' isn't defined for the class 'ThemeData'.
I really like your package , it's great , but I hope.that it was possible to control the opacity of the selectedDrawable, just like we can flip the drawable by imageDrawable.copyWith(flipped: ...) , Controlling the opacity of the drawable is a very fitting feature , if it is already possible, could you give us a way to do it , thank you again for your package
Flutter 3.0 warning issues fixed by this PR
@omarhurani Kindly update package in pub.dev so that everyone get benefit because currently many people are using git version in their projects.
The following error occurs whenever I try to move the slider in "Text settings".
@pragma("vm:external-name", "AssertionError_throwNew") external static _doThrowNew( int assertionStart, int assertionEnd, Object? message);
First of all, thank you for your plugin, it is very useful!
Would it be possible to draw points when clicking? Currently I have to move my finger a little before anything is drawn.
I would like to draw the shapers inside a container and not in a popupmenu. Would it be possible to do this, do you have an example?
Thanks
I am trying to modify the textAlign property through this library, but it seems hardcoded to TextAlign.center.
Is there a way to modify this dynamically?
Hi,
Great package. For add text feature we need to tap outside keyboard to close the keyboard. It would be better to have done button.
Thanks,
Subbarao
/C:/flutter/flutter_3.0.5/.pub-cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:32:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
As of now, there is one background image in this project, but I was looking to take multiple background images, and it should change on swiping right and left. Please help me with this. I am new to the flutter framework. Before finding this package I was working with the Scribble package and there I achieved this functionality using photo_view: ^0.14.0 but whenever I swipe to another image then the drawing too would go to the next image. The same case was happening when I was trying to Zoom. Please help me if it is possible in this project as I want the drawing to stay on that particular image and on swiping to the next image it should not carry forward the drawing and swiping back to the previous page, the drawing made on that should be retained. Please help me if possible. If that is not possible if there is somehow a way to show all the images on the same page instead of Swiping left or right.
(Handling multiple background images)
Instead of showing a network image in the initial image view, I want to pick an image from the local storage directory and edit it. Is it possible?
Right now, rotating the image using RotatedBox
results in Drawables
moving around in a weird way, so it would be nice if the PainterController
had an option to rotate the images.
hey @omarhurani Library is awesome. Great work.
Would you please add different angle draw feature?
To keep hygiene at a high level we should add analysis to repo:
https://pub.dev/packages/flutter_lints
Please add analysis
pipeline into GitHub actions flutter analyze
Hi,
Thank you for this great library!
I am facing position issue for text widget when used it for image editor which has zoom feature.
The text widget cursor position is not visible when image is zoomed in and panned somewhere not in the center of the image. So can we provide option to pass the position for TextDrawable from PainterController?
Thanks.
Is it possible to erase the individual drawable? Thanks!
This plugin is not supported in without null safety.
Getting this error:
This error getting in ObjectWidget class. size parameters is not getting.
final newDrawable = drawable.copyWith( size: Size( vertical ? drawable.size.width : totalLength, vertical ? totalLength : drawable.size.height, ), position: initial.position + position, // scale: scale, // rotation: assistedRotation, // assists: assists, );
I think I found a bug with the text. When you add text and write enough that it gets wrapped onto a new line it looks like image 1. However, when you render this, the text gets cut off and it looks like image 2. The screenshots are from the web example. Btw, thank you so much for making this package, I really like it.
When zooming in on the background image, the coordinate (to draw under the image) of the image remains global and not local to the zoomed location.
If the user activates a draw shape tool and immediately performs a pinch/pan gesture flutter_painter throws an exception.
DrawableCreatedNotification(drawable) : super(drawable);
_TypeError (type 'Null' is not a subtype of type 'Drawable')
It appears the created event is triggered by the gesture which does not create the shape.
Just as it is possible to obtain an image in png format (using the pngBytes extension) it would be useful to have it also in jpeg format, for example when the starting image is a jpeg.
I want to listen the event of drawingStart, drawingUpdate, drawingEnd events. Is there a way to listen these events?
Log:
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('.fvm/flutter_sdk/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
^
../../../AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:195:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('.fvm/flutter_sdk/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
^
../../../AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:205:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('.fvm/flutter_sdk/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addObserver(this);
^
../../../AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:211:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('.fvm/flutter_sdk/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.removeObserver(this);
^
../../../AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:279:34: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('.fvm/flutter_sdk/packages/flutter/lib/src/widgets/binding.dart').
final value = WidgetsBinding.instance?.window.viewInsets.bottom;
^
../../../AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/object_widget.dart:107:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('.fvm/flutter_sdk/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addPostFrameCallback((timestamp) {
^```
i want to get the count of the total number of each type of sticker added in the canvas when user click save image button
Hi
It's a great library!!!
Thanks for creating it.
Can we add Eraser functionality into this library?
Thanks.
According to me, a clear icon button should be provided to clear the canvas i.e. clear all the scribblings, stickers, or text which are placed on the canvas. As it would be very handy if people want to delete everything in one go. Presently doing undoredo or erasing by the eraser is time-consuming. I have seen this feature in the Scribble package which increases people's convenience.
I'm facing below warnings since I upgraded the flutter version to 2.13.0-0.1.pre
.
Warnings:
Testing started at 10:59 AM ...
^
../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:32:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
^
../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:195:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
^
../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:205:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addObserver(this);
^
../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:211:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.removeObserver(this);
^
../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/text_widget.dart:279:34: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart').
final value = WidgetsBinding.instance?.window.viewInsets.bottom;
^
../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_painter-1.0.1/lib/src/views/widgets/object_widget.dart:107:20: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addPostFrameCallback((timestamp) {
^
../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_redux-0.9.0/lib/flutter_redux.dart:474:22: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addPostFrameCallback((_) {
^
../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_redux-0.9.0/lib/flutter_redux.dart:577:22: Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
- 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('../../flutter/packages/flutter/lib/src/widgets/binding.dart').
WidgetsBinding.instance?.addPostFrameCallback((_) {
^
Flutter version:
Flutter 2.13.0-0.1.pre • channel unknown • unknown source
Framework • revision 13a2fb10b8 (8 days ago) • 2022-04-12 15:34:25 -0500
Engine • revision 499984f99c
Tools • Dart 2.17.0 (build 2.17.0-266.1.beta) • DevTools 2.12.1
Hello, I'm opening a Modal for the user to choose the color that will be applied to the text, but opening the modal causes the text to lose focus. How can I refocus on text when Modal is closed to continue typing? I close the keyboard so that the modal has more space.
Thanks
How do I make the background color in a transparent layout?
I noticed that the drawable object do not automatically resize during the main container resizing.
For an example I change the main container widget size during orientation change to use the max space available. background image is resized correctly. However drawable objects are not being resized and are not re-positioned when the parent widget size change.
Is there any solution to fix this unexpected behaviour?
Hi,
The package is awesome. I just want to ask a question that is there a way to export drawbles in the form of json. Like when we render the image, can we also export list of controller.drawables in json format or any other? Please reply me. And the package is awesome by the way.
I need this functionality for my project. So, if we cannot export drawables right now, please add this feature into this package. Thanks a million.
unable to build this on xcode with flutter version 3.11 due to error
Error : The getter 'accentColor' isn't defined for the class 'ThemeData'
on file : flutter_painter_v2-2.0.0/lib/src/views/widgets/object_widget.dart:1071:52
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.