A Flutter color palette with eyedropper, HSL, RGB and Material colors

paco

a flutter color palette with an eyedropper ( on mobile & desktop )

light theme	dark theme

• example / source

eyedropper

select a color from your flutter mobile or desktop screen.

to use the eyedropper ( flutter mobile & desktop ) you need to wrap the app in the eyedrop widget.

@override
  widget build(buildcontext context) {
    return eyedrop(
      child: builder(
        builder: (context) => scaffold(
          backgroundcolor: backgroundcolor,
          body: container(
            child: colorbutton(
              key: key('c1'),
              color: color1,
              config: colorpickerconfig(enablelibrary: false),
              boxshape: boxshape.rectangle, // default : circle
              size: 32,
              swatches: swatches,
              oncolorchanged: (value) => setstate(() => color4 = value),
            ),
          ),
        ),
      ),
    );
  }

customisable

• disable opacity slider
• disable eye dropping
• disable swatch library
• circle or square color buttons

colorbutton(
  key: key('c1'),
  color: color1,
  config: colorpickerconfig(
    this.enableopacity = true,
    this.enablelibrary = false,
    this.enableeyepicker = true,
  ),
  boxshape: boxshape.rectangle, // default : circle
  size: 32,
  swatches: swatches,
  oncolorchanged: (value) => setstate( () => color4 = value ),
 );

colorbutton(
  key: key('c2'),
  color: color2,
  config: colorpickerconfig(enableeyepicker: false),
  size: 64,
  swatches: swatches,
  oncolorchanged: (value) => setstate( () => color4 = value ),
  onswatcheschanged: (newswatches) => setstate(() => swatches = newswatches),
 );