cyclop 0.6.2 copy "cyclop: ^0.6.2" to clipboard
cyclop: ^0.6.2 copied to clipboard

An experimental flutter colorpicker with an optional eyedropper tool ( Material colors swatches, AHSL, ARGB and custom swatches library )

example/lib/main.dart

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

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

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: EyeDrop(child: const MainScreen()),
        debugShowCheckedModeBanner: false,
      );
}

class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @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();

  final ValueNotifier<Color?> hoveredColor = ValueNotifier<Color?>(null);

  @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 Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        title: Text('Cyclop Demo',
            style: textTheme.titleLarge?.copyWith(color: appbarTextColor)),
        backgroundColor: appbarColor,
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 12),
            child: Center(
              child: ColorButton(
                darkMode: true,
                key: const Key('c2'),
                color: appbarColor,
                boxShape: BoxShape.rectangle,
                swatches: swatches,
                size: 32,
                config: const ColorPickerConfig(
                  enableOpacity: false,
                  enableLibrary: false,
                ),
                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.titleLarge?.copyWith(color: bodyTextColor),
              ),
              _buildButtons(),
              Center(child: Image.asset('images/img.png')),
            ],
          ),
        ),
      ),
    );
  }

  Expanded _buildButtons() {
    return Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Center(
            child: ColorButton(
              key: const Key('c1'),
              color: backgroundColor,
              swatches: swatches,
              onColorChanged: (value) =>
                  setState(() => backgroundColor = value),
              onSwatchesChanged: (newSwatches) =>
                  setState(() => swatches = newSwatches),
            ),
          ),
          Center(
            child: ColorButton(
              key: const Key('c1'),
              size: 32,
              color: backgroundColor,
              config: const ColorPickerConfig(enableLibrary: false),
              swatches: swatches,
              decoration: BoxDecoration(
                shape: BoxShape.rectangle,
                color: backgroundColor,
                border: Border.all(width: 4, color: Colors.black),
              ),
              onColorChanged: (value) => setState(
                () => backgroundColor = value,
              ),
            ),
          ),
          Row(
            children: [
              EyedropperButton(
                icon: Icons.colorize,
                onColor: (value) => setState(() => backgroundColor = value),
                onColorChanged: (value) => hoveredColor.value = value,
              ),
              ValueListenableBuilder<Color?>(
                valueListenable: hoveredColor,
                builder: (context, value, _) => Container(
                  color: value ?? Colors.transparent,
                  width: 24,
                  height: 24,
                ),
              )
            ],
          ),
          Center(
            child: ElevatedButton(
              child: const Text('Open ColorPicker'),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return Dialog(
                      child: ColorPicker(
                        selectedColor: backgroundColor,
                        onColorSelected: (value) =>
                            setState(() => backgroundColor = value),
                        config: const ColorPickerConfig(
                          enableLibrary: false,
                          enableEyePicker: false,
                        ),
                        onClose: Navigator.of(context).pop,
                        onEyeDropper: () {},
                      ),
                    );
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
53
likes
130
pub points
82%
popularity

Publisher

verified publisherrxlabz.com

An experimental flutter colorpicker with an optional eyedropper tool ( Material colors swatches, AHSL, ARGB and custom swatches library )

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

basics, flutter, image, quiver

More

Packages that depend on cyclop