feedback icon indicating copy to clipboard operation
feedback copied to clipboard

Custom color picker using flutter only

Open B-Saeid opened this issue 1 year ago • 2 comments

:scroll: Description

I added an IconButton representing the ColorPickerIcon to the ControlsColumn with customizable CustomColorPosition enum .leading or .trailing relative to the colors list and also appearance control with showCustomColor boolean both are passed all the way down from the top BetterFeedBack widget to the ControlsColumn constructor.

:bulb: Motivation and Context

I was on the way to implement a feedback mechanism in a project I am working on and I previously bookmarked this video and as usual I wandered around the repo and found that issue, It was a proposal from ueman the maintainer. Despite of being Open, I assumed after Recognizing the date that it must have been implemented and I got encouraged when I looked into the code and saw that It hasn't been implemented yet so I felt I could do it and here I am.

Note: I faced some issues while testing the example on Android and you will see the last commit is only in the android and ios folders of the example app. They have nothing to do with the implemented feature.

:green_heart: How did you test it?

I tested it on:

  • iOS Simulator 17.4
  • Android Emulator 10
  • iPhone 11 - iOS 18.1

:pencil: Checklist

  • [x] I reviewed submitted code
  • [ ] I added tests to verify changes
  • [x] I updated the docs if needed
  • [x] All tests passing
  • [x] No breaking changes

:crystal_ball: Next steps

After I tested it on my iPhone I noticed a couple of things that can be improved:

  • a Feature: Stroke Control.
  • a Visual Cosmetic: The drawing feels a bit rough especially on curves and I think that is because the connections between the path in the painter points are using lineTo, It is worth checking out.

B-Saeid avatar Dec 15 '24 23:12 B-Saeid

There is a couple of things I realized afterwards:

  • Despite of having padding, The Container wrapping the color picker overlay show have constraints with maxWidth of say 450 px to limit it from covering up most of the screen when run on desktops or large taplets.
  • Closing of the color picker i.e. _entry.remove() should also be invoked when the back button is tapped, I have skimed over the BackButtonInterceptor but I didn't allow myself to dive in and know how to integrate such callback inside, and I don't know for sure whether PopScope can be used as we are at the very top even above MaterialApp but I would be glad to discuss it.

B-Saeid avatar Dec 16 '24 14:12 B-Saeid

There is a couple of things I realized afterwards: ....

✅ Successfully fixed them in the commits above.

B-Saeid avatar Dec 21 '24 19:12 B-Saeid