Flutter color picker - A color picker for your flutter app

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
A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesn’t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a

Burhanuddin Rashid 1k Jan 6, 2023
A mobile image uploader in which you can upload image to your personal gallery from either your camera or mobile gallery and it can detect your current geographic location and address using firebase firestore and storage.

Image Uploader In Flutter About It is an Image Uploader gallery which tracks your address from which you're uploading using Flutter and Image picker.

Prahen parija 6 Dec 20, 2022
Utility Manager Flutter Application is made with Flutter and Supabase which allows user to add task, set remainder to the task, set color to separate tasks and it allows to add URL with URL's informations.

Utility Manager Flutter Application! Utility Manager Flutter Application is made with Flutter and Supabase which allows user to add task, set remainde

Kathirvel Chandrasekaran 6 Jan 6, 2022
An plasma accent color changer written in flutter

plasma accent color changer A kde plasma accent color changer that changes some colors in current colorscheme. Getting Started! This project is a star

Tanbir Jishan 28 Mar 30, 2022
Console - Print.color() to console in any platform, more features will be added later.

palestine_console Part of PalestineDevelopers Print.color() to console in any platform, more features will be added later. Table Of Contents Features

Palestine Developers 2 Jan 13, 2022
This app is a minimal TodoList app that functions like a whiteboard. You can add new tasks, keep track of your tasks to make your day more productive, and then delete it after it is done.

My First Mobile App _ Minimal TodoList Flutter A new Flutter project. Getting Started This project is a starting point for a Flutter application. A fe

null 0 Nov 23, 2021
About This is Personal Expenses Planner. You can add your expenses in to the app and manage your transaction. and you can see How much did you spend on which day. I developed this project using flutter.

expense_planner A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Darshit Rudani 5 Jul 6, 2022
A task manager app made with flutter where you can mark your tasks for specific days and keep your life organized!

task_manager_app A task manager app made with flutter where you can mark your tasks for specific days and keep your life organized! Getting Started Th

null 2 Sep 1, 2021
The official country code picker from Tellurium by Quadren. Designed with our in-house Aurum design system.

The official country code picker from Tellurium by Quadren. Designed with our in-house Aurum design system. Features Supports searching for country co

Quadren 2 Aug 9, 2022
Movie Lib is a mobile application where you can find the movies of your interest. This app provides a collection of movies of different languages according to your interest.

Movie Lib Movie Lib is a mobile application where you can find the movies of your interest. This app provides a collection of movies of different lang

Abhijith Kp 6 Sep 28, 2021
Get your users to know your app with ease

nice_intro Get your users to know your app with ease Getting Started Onboarding is a great way to introduce your app to newcomers, to help them quickl

Ethiel ADIASSA 20 Nov 7, 2022
App to seamlessly share files/images from your phone to your pc

Self-Share App to seamlessly share files/images from your phone to your pc Image

Wahbi 1 May 28, 2022
A simple easy to use Flutter DApp , which keeps a track of all your day to day transactions by using Ethereum blockchain in the background which in turn increases your credit score.

Sahayog A simple easy to use Flutter DApp , which keeps a track of all your day to day transactions by using Ethereum blockchain in the background whi

Utkarsh Agarwal 15 May 21, 2022
A multi-plateform (Flutter) application for reading your emails, with your favorite devices, using the JMAP protocol!

A multi-plateform (Flutter) application for reading your emails, with your favorite devices, using the JMAP protocol!

LINAGORA 119 Jan 2, 2023
Your grades across all your devices.

Gradely 2 A Grade Calculator App, that syncs all your Grades across all your devices, built with Flutter and with the amazing backend Appwrite. Screen

Elias Schneider 16 Dec 8, 2022
A web dashboard that allows you to monitor your Chia farm and sends notifications when blocks are found and new plots are completed through a discord bot. It can link multiple farmers/harvesters to your account.

farmr A web dashboard that allows you to monitor your Chia farm and sends notifications when blocks are found and new plots are completed through a di

Gil Nobrega 261 Jan 2, 2023
Quickly generate a personalized WhatsApp link with a predefined message and share it with your audience on your Social Networks!

Quickly generate a personalized WhatsApp link with a predefined message and share it with your audience on your Social Networks!

Sanskar Tiwari 11 Aug 28, 2021
BankGit helps you manage your account and transactions more efficiently by breaking your account into branches for various purposes and then making transactions directly from them.

Bank Git Web Hosted Here : https://bank-management-45848.web.app/ Bank Git is an application built with Flutter and Firebase to help you manage your b

Yash Johri 27 Dec 26, 2022
This is a Flutter app which shows how to use the Reorderable List View in your app

reorderable_list_view A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Shehzaan Mansuri 1 Oct 25, 2021