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?

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 ...

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.

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.

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