rxlabz / cyclop

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

Hi there, I'm Erick 👋

I'm a freelance developper/trainer working with Flutter and Dart since 2017.

I like :

• building games and apps for my kids :
  • Calcache : Playstore / AppStore

- graphical experiments : - [From paper to Flutter canvas](https://dev.to/rx_labz/generative-animations-with-dart-and-flutter-m14)

Algrafx : Flutter - 2019	Algraphr : Dart - 2016

cyclop's Issues

Support null safety

Hi @rxlabz , do you have any plans to migrate this package to null safety? Looking to migrate my app and this is a blocker atm.

Enable the eyedropper in browser too

waiting for flutter/flutter#42767

HSLuv

cf https://github.com/bernaferrari/hsluv-dart

Color Picker not working as intended

I ran the example code, however, the Color picker/dropper is not working. I am on the current latest Flutter version 3.10.0

Incorrect height and scrolling when in landscape

When the device rotates into landscape mode, the picker dialog gets too high and draws a bit off screen towards the top.
Also, because the entire height can't be displayed, scrolling kicks in. However, the color grid area absorbs all scrolling motions, so the user can't scroll up or down to the close button or the hex color entry button. Possible solution would be: when a user, for example, is scrolling up on the color grid selector, when they reach the top row, then it starts scrolling the entire frame up to the title & close button, and the same for the bottom. I've also noticed that the scroll position doesn't always default to the top in this case, which is a bit confusing.

Thanks, and let me know if you need more detail or a video of this happening.

Eye Drop Picker is not moving

Hii there I have cloned your repo but eyedropper is not working it's not moving anywhere.

My Flutter Version is
Flutter 1.22.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 84f3d28555 (4 weeks ago) • 2020-10-15 16:26:19 -0700
Engine • revision b8752bbfff
Tools • Dart 2.10.2

I am getting this kind of error when I click on the eyedropper button

I/flutter ( 1694): repaintBoundaryToImage... 'package:flutter/src/rendering/proxy_box.dart': Failed assertion: line 2958 pos 12: '!debugNeedsPaint': is not true.
I/flutter ( 1694): repaintBoundaryToImage... 'package:flutter/src/rendering/proxy_box.dart': Failed assertion: line 2958 pos 12: '!debugNeedsPaint': is not true.

and eye picker from the dialog is not Moving and I can not even touch it.

I have also tried putting the Builder on the scaffold but it's not working.

Here is My Modified Code from your Code.

import 'package:cyclop/cyclop.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() async {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: EyeDrop(child: MainScreen()),
        debugShowCheckedModeBanner: false,
      );
}

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  Color appbarColor = Colors.blueGrey;

  Color backgroundColor = Colors.grey.shade200;

  Set<Color> swatches = Colors.primaries.map((e) => Color(e.value)).toSet();

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;

    final bodyTextColor =
        ThemeData.estimateBrightnessForColor(backgroundColor) == Brightness.dark
            ? Colors.white70
            : Colors.black87;

    final appbarTextColor =
        ThemeData.estimateBrightnessForColor(appbarColor) == Brightness.dark
            ? Colors.white70
            : Colors.black87;

    return Builder(
        builder: (context) => Scaffold(
              backgroundColor: backgroundColor,
              appBar: AppBar(
                title: Text('Cyclop Demo',
                    style:
                        textTheme.headline6.copyWith(color: appbarTextColor)),
                backgroundColor: appbarColor,
                actions: [
                  Padding(
                    padding: const EdgeInsets.only(right: 12),
                    child: Center(
                      child: ColorButton(
                        darkMode: true,
                        key: Key('c2'),
                        color: appbarColor,
                        boxShape: BoxShape.rectangle,
                        swatches: swatches,
                        size: 32,
                        config: ColorPickerConfig(
                            enableOpacity: true,
                            enableLibrary: false,
                            enableEyePicker: true),
                        onColorChanged: (value) => setState(
                          () => appbarColor = value,
                        ),
                        onSwatchesChanged: (newSwatches) =>
                            setState(() => swatches = newSwatches),
                      ),
                    ),
                  )
                ],
              ),
              body: Container(
                padding: const EdgeInsets.all(12),
                child: Center(
                  child: Column(
                    children: [
                      Text(
                        'Select the background & appbar colors',
                        style:
                            textTheme.headline6.copyWith(color: bodyTextColor),
                      ),
                      _buildButtons(),
                      if (!kIsWeb) Center(child: Image.asset('images/img.png')),
                    ],
                  ),
                ),
              ),
            ));
  }

  Expanded _buildButtons() {
    return Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Center(
            child: ColorButton(
              key: Key('c1'),
              color: backgroundColor,
              swatches: swatches,
              onColorChanged: (value) => setState(
                () => backgroundColor = value,
              ),
              onSwatchesChanged: (newSwatches) =>
                  setState(() => swatches = newSwatches),
            ),
          ),
          Center(
            child: ColorButton(
              key: Key('c1'),
              size: 32,
              color: backgroundColor,
              swatches: swatches,
              decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                color: backgroundColor,
                border: Border.all(width: 4, color: Colors.black),
              ),
              onColorChanged: (value) => setState(
                () => backgroundColor = value,
              ),
              onSwatchesChanged: (newSwatches) =>
                  setState(() => swatches = newSwatches),
            ),
          ),
          if (!kIsWeb)
            EyedropperButton(
              icon: Icons.colorize,
              onColor: (value) => setState(() => backgroundColor = value),
            ),
        ],
      ),
    );
  }
}

In any case, Thanks for your help ...

License missing

Hello. I would like to use this flutter widget inside my own project but I don't know what license this project is filed under. Please update the license for this project on Github: https://github.com/rxlabz/cyclop/blob/master/LICENSE

Thank you.

Color changing when using saturation in HSL mode

What I did:

• Opened a color picker (chrome on Android)
• Switched to HSL
• Moved around the color
• Moved the saturation
• Noticed that it changed the color to red

null safety ?

Here's the message a I get when installing the plugin :)

/c:/Flutter/.pub-cache/hosted/pub.dartlang.org/cyclop-0.6.1/lib/src/widgets/color_button.dart:111:29: Error: Method 'insert' cannot be called on 'OverlayState?' because it is potentially null.

• 'OverlayState' is from 'package:flutter/src/widgets/overlay.dart' ('/c:/Flutter/packages/flutter/lib/src/widgets/overlay.dart').
  Try calling using ?. instead.
  Overlay.of(rootContext).insert(pickerOverlay!);
  /c:/Flutter/.pub-cache/hosted/pub.dartlang.org/cyclop-0.6.1/lib/src/widgets/eyedrop/eye_dropper_layer.dart:123:25: Error: Method 'insert' cannot be called on 'OverlayState?' because it is potentially null.
• 'OverlayState' is from 'package:flutter/src/widgets/overlay.dart' ('/c:/Flutter/packages/flutter/lib/src/widgets/overlay.dart').
  Try calling using ?. instead.
  Overlay.of(context).insert(data.eyeOverlayEntry!);

I hope it helps

Migration to Flutter 3.7

Using ColorPicker without ColorButton

In my drawing app, the user can tap on a field to change its color. This invokes an AlertDialog:

showDialog(
        context: context,
        builder: (context) {
          return SingleChildScrollView(
            child: AlertDialog(
              title: const Text('Pick a color!'),
              content: ColorPicker(
                color: oldColor,
                onChanged: (value){
                  chosenColor = value;
                },
              actions: <Widget>[
                Row(
                  children: [
                    TextButton(
                      child: const Text('Cancel'),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                    TextButton(
                      child: const Text('Save'),
                      onPressed: () {
                        artFields[fieldNo].fieldColor = chosenColor;
                        setState(() {});
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                ),
              ],
            ),
          );
        });

I cannot use ColorButton for this. I tried to use your version of ColorPicker but the results are strange (e.g. only some sliders react to taps and the rectangle at the bottom does not change color). I suppose using your ColorPicker directly this way is not supported? Should I give up on cyclop?