A HSV color picker for your flutter app. RGB HSV Wheel Hue Saturation Values.

Overview

flutter_hsvcolor_picker

A HSV color picker for your flutter app. RGB HSV Wheel Hue Saturation Values.

Getting Started

Installation

https://pub.dev/packages/flutter_hsvcolor_picker/install

Example

import "package:flutter_hsvcolor_picker/flutter_hsvcolor_picker.dart";

ColorPicker(
  color: Colors.blue,
  onChanged: (value){ },
  initialPicker: Picker.paletteHue,
)

For a more detailed example, head over to: https://github.com/fluttercandies/flutter_hsvcolor_picker/tree/master/example/lib/complex_example

Comments
  • Example tab in pub.dev is empty

    Example tab in pub.dev is empty

    Example tab in pub.dev is empty does not contain any example of how to use this package.

    I saw there are examples in the Readme tab but this should not be instead of the example page.

    image

    opened by guyluz11 3
  • On web, layout is screwed up if width > height

    On web, layout is screwed up if width > height

    If the browsers window width is < height, it looks OK: image But if width > height, as it normally is, the layout is screwed up: image Using flutter_hsvcolor_picker: ^1.2.0 and this code:

    showDialog(
            context: context,
            builder: (context) {
              return SingleChildScrollView(
                child: AlertDialog(
                  // title: const Text('Pick a color!'),
                  content: ColorPicker(
                    color: oldColor,
                    onChanged: (value){
                      chosenColor = value;
                    },
                    initialPicker: Picker.hsv,
                  ),
                  actions: <Widget>[
                    Row(
                      children: [
                        TextButton(
                          child: const Text('Cancel'),
                          onPressed: () {
                            // setState(() => artFields[fieldNo].fieldColor = oldColor);
                            Navigator.of(context).pop();
                          },
                        ),
                        TextButton(
                          child: const Text('Save'),
                          onPressed: () {
                            artFields[fieldNo].fieldColor = chosenColor;
                            // print('in Save chosenColor = $chosenColor');
                            // dumpArtWork(artWork);
                            clonedArtWork = cloneArtWork(artWork);
                            previousArtWorks.add(clonedArtWork);
                            setState(() {});
                            Navigator.of(context).pop();
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              );
    
    opened by BoHellgren 3
  • Improve UI and architecture

    Improve UI and architecture

    This PR includes:

    • Removal of deprecated theme color accentColor (to fix the dropdown menu having a different color when updated the theme for the new Flutter version)
    • Refactoring of folder structure
    • Unified SliderTitle widget instead of individual widget methods to make the ui more consistent
    • Fine-tuning of the UI (paddings and darkmode color of top bar in drawer)
    • Update to next minor version 1.2.0
    opened by nohli 3
  • fix: Decouple HSV color model from slider position

    fix: Decouple HSV color model from slider position

    HSV color model doesn't allow hue to be valid when R=G=B and saturation when value =0. This caused drop of H and S to 0 anytime when V is 0 and drop of H when S is 0. To prevent this, new class HSVSliders were introduced as stateless container of HSV sliders to hold user-set slider positions.

    As a bonus I fixed typo in example's import path.

    opened by argorain 3
  • The Wheel Picker Crashes on Flutter Web

    The Wheel Picker Crashes on Flutter Web

    Just wanted to let you know that the Color Wheel picker including in this very nice and feature rich color picker crashes on Flutter Web. It crashes because the CustomPaint that uses SweepGradient API call that is is not yet implemented in Flutter WEB, this will cause a crash when this package is used on Flutter Web.

    I had a similar issue and reported it here: https://github.com/flutter/flutter/issues/57752

    My report also contains a rough example of how the color wheel/circle can be drawn using alternative API that works on Flutter WEB too. It is included in the above same issue report and can be seen in a DartPad here: https://dartpad.dartlang.org/dc8a915f169455463e4e2016619e00bb The DartPad shows this issue alongside a workaround. The example is MIT license so feel free to use it to make a fix for this component if you like. Sorry, I don't have time right now to look into the details of this package and make a pull request correction. (I might find some time for it later... depends 😀 )

    My above Flutter issue report was a duplicate of an already known issue, the original issue report, that is being tracked by Flutter team, can be found here: https://github.com/flutter/flutter/issues/41389


    Sidenote

    A Flutter Web demo/example of a color picker that includes a similar wheel/circle component under its "any color" segment in its color picker, can be seen here: https://rydmike.github.io/colorpickerdemo/#/ It is using the above described work-around to draw the color circle.

    This Tweet thread explains its usage scenarios a bit. https://twitter.com/RydMike/status/1266037341413654531

    opened by rydmike 3
  • ColorPicker layout issue in landscape mode

    ColorPicker layout issue in landscape mode

    When using the ColorPicker widget, once the device is in landscape mode the widget doesn't render and there is an error displayed in the console saying that a widget was trying to render with an infinite width.

    I'm unable to post the error because I forked the package and fixed the issue. I also modified it some more to suite my app, hence I'm not sending a pull request. I'm just creating this issue to notify the author and suggest a fix.

    This is the fix for the issue;

    I wrapped the the Column in the case for landscape orientation with a Flexible widget and the issue disappeared.

    case Orientation.landscape:
            return new Row(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Flexible(
                    child: new Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          this._buildHead(),
                          this._buildDropdown2(),
                          this._buildAlphaPicker(),
                        ]),
                  ),
                  SizedBox(width: 16.0),
                  new Expanded(child: this._buildBody())
                ]);
    
    opened by thearthurdev 3
  • Add pickerOrientation to ColorPicker

    Add pickerOrientation to ColorPicker

    Issue https://github.com/fluttercandies/flutter_hsvcolor_picker/issues/16 was closed, but it was a good idea for users to be able to lock ColorPicker's orientation.

    opened by nohli 2
  • Add palette toggle for Color Wheel

    Add palette toggle for Color Wheel

    Hello!

    I have added a new parameter to toggle the color palette view for the color Wheel. I have a requirement to show sometimes the palette view.

    Please tell me if you need it done in another way.

    opened by marianojan 2
  • Picker Dot is difficult to move use and move around

    Picker Dot is difficult to move use and move around

    Hi, I like your code, however their are some real usability concerns I have. The hollowed out grey circles that are used to select a color, are not very responsive. Its almost impossible to drag the circle around like people intuitively do. Additionally for some of the horizontal bars, you have to slide the dot, where in some menus you have to tap in a different location. The "wheel" tab also barely works. This is made worse if you have a page that scrolls. I would love to see these issues fixed because their is serious potential, but right not its not something that can be sent to users.

    opened by JosephShepin 0
  • PalettePicker's height is limited to 200 pixels

    PalettePicker's height is limited to 200 pixels

    Height of all specialized PalettePickers (such as PaletteHuePicker, PaletteSaturationPicker or PaletteValuePicker) is limited to 200 pixels. Is it possible to add the ability to expand it dynamically or at least change the height using the constructor parameter?

    Thanks!

    opened by Oqtavios 3
Releases(1.2.3)
Owner
FlutterCandies
Custom Flutter candies (packages) for you to build your Flutter app easily. Enjoy it!
FlutterCandies
Color picker for Flutter, based on the Google Docs color picker.

Material ColorPicker Color picker for Flutter, based on the Google Docs color picker. Getting Started You can embed into your material app or use it o

Razvan Lung 103 Oct 30, 2022
A Flutter color palette with eyedropper, HSL, RGB and Material colors

Cyclop A flutter colorpicker with an eyedropper tool. Works on mobile, desktop & web ( CanvasKit) Demo Desktop & tablet Mobile Material HSL RVB Custom

Erick Ghaumez 106 Oct 17, 2022
A Flutter color palette with eyedropper, HSL, RGB and Material colors

Cyclop A flutter colorpicker with an eyedropper tool. Works on mobile, desktop & web ( CanvasKit) Demo Desktop & tablet Mobile Material HSL RVB Custom

Erick Ghaumez 107 Jan 5, 2023
Color-Converter - A minimalist application made with flutter to convert hexadecimal colors to RGB colors and vise-versa.

Color Converter A minimalist application made with flutter to convert hexadecimal colors to RGB colors and vise-versa for Flutter Create Competition.

Poojan Pandya 2 Sep 16, 2020
null 0 Feb 2, 2022
Material color picker, you can customize colors. Selection in two step, first main color and after shades.

Flutter Material Color Picker Material Color picker is a Flutter widget, that can be customizable. By default, it's Material Colors, but you can defin

Jean-Charles Moussé 70 Nov 25, 2022
Flutter Package used to 'edit' basics aspects [Brightness, Contrast, Saturation, etc...] from a widget or image.

on_image_matrix on_image_matrix is a Flutter Package used to 'edit' basics aspects [Brightness, Contrast, Saturation, etc...] from a widget or image.

Lucas Josino 6 Oct 23, 2022
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.

flutter_statusbarcolor A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically. Getting Starte

Zero 201 Nov 10, 2022
A colorful TabBar Flutter library with color animating indicator where each tab has a color. (inspired by SmartNews app)

Flutter Colorful TabBar A colorful TabBar for Flutter where each tab has a color (inspired by SmartNews app). Getting Started Add this to your package

null 8 Jun 17, 2022
Color matching game - A Crossplatform Color Matching Game made with Flutter

color_matching_game A Color Matching Game built with Flutter. It is a simple app made without adding a plug-in. Play by specifying the red, green and

Yusuke Ishimi 6 Nov 21, 2022
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022
ThemeX is an easy theme manipulation. Only inform primary color and the ThemeX generate all color combination palette for you

ThemeX is an easy theme manipulation basied on Material Design. Only inform primary color and the ThemeX generate all color combination palette for yo

Michael S. Lopes 2 Jan 31, 2022
A Fluter tabview that text color can change with animation and bg color change with animation

float_tab A Fluter tabview that text color can change with animation and bg color change with animation Getting Started This project is a starting poi

ventureli 1 Dec 8, 2021
meg4cyberc4t 11 Oct 24, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022
A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Rydmike 132 Dec 14, 2022
A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Rydmike 132 Dec 14, 2022
Native Color Picker for Flutter

native_color_picker A native color picker for Flutter. Online Demo: https://rodydavis.github.io/native_color_picker/ Currently only supports web! Gett

Rody Davis 15 Dec 13, 2022
A flutter date time picker inspired by flutter-cupertino-date-picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

null 0 Nov 30, 2021