Color Preview

Packages for easy confirmation of widget colors, Intuitive design.

demo

Features

  • Real-time color adjustment for design

Orientation support

DarkMode support

Recommendation: Do not include this package in production distributions due to the possibility of unexpected behavior.

Installation

dependencies:
  color_preview: latest

You can install packages from the command line:

$ flutter pub get

Usage

  • Wrap Target Widget.
import 'package:color_preview/color_preview.dart';
...
// Wrap Widget
ColorPreview(
  // initial Color
  initialColor: Colors.red,
  onTargetWidget: (preview) {
    // preview is Picked Color
     return Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
        // Specify a color for the property
        color: preview,
      ),
    );
  },
),

arguments

name required Default mean
onTargetWidget ⚪︎ Set the target widget
initialColor ⚪︎ Colors.white Initial color value
isEnable true Enable package feature
buttonOffset Offset of the button to display Elements

  • At that time a color selectable button will be overlaid on the widget.

    • Default position is shown in the upper right. target button

  • Tap to display the Color Picker & Color Label on the screen.

    • These elements can be placed anywhere on the screen by DragAndDrop(Long Tap).

  • Picked Color!

  • The color value is copied to the clipboard by Long Tap on the Color Label. qYm5gnjwIQnX7KU1728176819_1728176969 (1)

Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.

Notes

Libraries

color_preview