Collor #

A super lightweight and elegant color picker library for Flutter applications.

🎮 Live Demo #

Try the color picker in action: Live Demo

🚀 Super Lightweight #

This color picker is designed to be as lightweight as possible while maintaining full functionality:

• Only 1 file - Single color_picker_popup.dart file
• Only ~16KB - Ultra compact size
• Zero external dependencies
• Minimal memory footprint
• Fast rendering

Features #

• Interactive color square with touch/drag support
• Hue and value sliders
• Optional alpha slider (transparency)
• Real-time HEX, RGB, HSV (and RGBA/HSVA when alpha is enabled)
• Optional onChanged callback for real-time updates
• Lock picker toggle (via switch or tap on color square)
• Mobile optimized
• Zero dependencies

Installation #

dependencies:
  collor: ^1.2.1

Usage #

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Color _selectedColor = Colors.blue;

  void _showColorPicker() async {
    final Color? result = await showDialog<Color>(
      context: context,
      builder: (context) => ColorPickerPopup(
        initialColor: _selectedColor,
        onColorSelected: (color) {
          setState(() => _selectedColor = color);
        },
        onChanged: (color) {
          // Optional: react to live updates
          // setState(() => _selectedColor = color);
        },
        showAlpha: true, // Enable alpha slider
      ),
    );
    if (result != null) {
      setState(() => _selectedColor = result);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: _showColorPicker,
          child: const Text('Pick Color'),
        ),
      ),
    );
  }
}

API #

ColorPickerPopup({
  required Color initialColor,                // Starting color
  required Function(Color) onColorSelected,   // Callback when color is selected (confirm)
  ValueChanged<Color>? onChanged,             // Optional: live updates while dragging/hovering
  bool showAlpha = false,                     // Optional: show alpha slider (transparency)
})

Getting Color Values #

// HEX (AARRGGBB -> без префикса альфы)
String hex = '#${color.toARGB32().toRadixString(16).padLeft(8, '0').substring(2).toUpperCase()}';

// RGB
String rgb = '${(color.r * 255).round()}, ${(color.g * 255).round()}, ${(color.b * 255).round()}';

// HSV
final hsv = HSVColor.fromColor(color);
String hsvString = '${hsv.hue.round()}, ${(hsv.saturation * 100).round()}%, ${(hsv.value * 100).round()}%';

// When showAlpha is enabled (RGBA / HSVA)
int a = (color.a * 255).round() & 0xff; // 0..255
String rgba = '$a, ${(color.r * 255).round()}, ${(color.g * 255).round()}, ${(color.b * 255).round()}';
String hsva = '${hsv.hue.round()}, ${(hsv.saturation * 100).round()}%, ${(hsv.value * 100).round()}%, ${(100 * (a / 255)).round()}%';

Tips #

• Tap on the color square to toggle the picker lock (freeze hover updates).
• Use the switch under the status indicator to lock/unlock the picker.
• Use onChanged to reflect color live while dragging.

License #

MIT License