hsl_colorpicker 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 54

Donate

hsl_colorpicker #

A HSL Color Picker for Flutter (Currently only supports Android and iOS)

Example appExample in other project

How to use it #

Installation #

You just need to add hsl_colorpicker as a dependency in your pubspec.yaml file.

dependencies:
  hsl_colorpicker: ^1.0.1

Then run the flutter tooling:

flutter packages get

Usage #

Put the HSLColorPicker widget as child of some other widget

import 'package:hsl_colorpicker/HSLColorPicker.dart';


HSLColorPicker(
  onChanged: (HSLColor color) {
    // Handle color changes
   },
),

API #

  /// Called during a drag when the user is selecting a color.
  /// Is the only required parameter.
  ///
  /// This callback called with latest HSLColor that user selected.
  final ValueChanged<HSLColor> onChanged;
  
  
  /// Initial color for picker.
  /// [onChanged] callback won't be called with initial value.
  ///
  /// Default value is Blue accent.
  final Color initialColor;


  /// The size of the ColorPicker.
  /// The size of the thumb is not included in the size of the ColorPicker,
  /// If the size of the thumb is greater than the strokeSize of the hue circle, it will be drawn beyond the size.
  ///
  /// Default value is 200 x 200.
  final double size;


  /// The width of hue color circle and saturation and lightness archs.
  ///
  /// Default value is relative to the size of the colorpicker.
  double strokeWidth;


  /// The size of each thumb in the picker.
  ///
  /// Default value is relative to the size of the colorpicker.
  double thumbSize;
  

  /// The size of each thumb strokes.
  ///
  /// Default value is relative to the size of the colorpicker.
  double thumbStrokeSize;
  

  /// Show or not the middle circle that indicates the selected color of the colorpicker.
  ///
  /// Default value is true.
  bool showCenterColorIndicator;
  

  /// The size of the middle circle that indicates the selected color of the colorpicker.
  /// The distance between the hue circle and the archs of lightness and saturation is determined by the size of the colorpicker and the   /// size of the middle circle that indicates the selected color.
  ///
  /// Default value is relative to the size of the colorpicker.
  bool centerColorIndicatorSize;  

Example #

import 'package:flutter/material.dart';
import 'package:hsl_colorpicker/HSLColorPicker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ColorPickerPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ColorPickerPage extends StatefulWidget {
  @override
  _ColorPickerPageState createState() => _ColorPickerPageState();
}

class _ColorPickerPageState extends State<ColorPickerPage> {
  HSLColor hslColor = HSLColor.fromColor(Colors.blue);
  Color color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: color,
        title: Stack(
          children: <Widget>[
            Text(
              "HSL COLOR PICKER: ${"#" + color.toString().split("0x")[1].toUpperCase().replaceFirst("FF", "").replaceAll(")", "")}",
              style: TextStyle(
                fontSize: 16,
                foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 1
                  ..color = Colors.grey,
              ),
            ),
            Text(
              "HSL COLOR PICKER: ${"#" + color.toString().split("0x")[1].toUpperCase().replaceFirst("FF", "").replaceAll(")", "")}",
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
              ),
            ),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            HSLColorPicker(
              onChanged: (colorSelected) {
                setState(() {
                  hslColor = colorSelected;
                  color = colorSelected.toColor();
                });
              },
              size: 200,
              strokeSize: 5,
              thumbSize: 9,
              thumbStrokeSize: 3,
              showCenterColorIndicator: true,
              centerColorIndicatorSize: 80,
              initialColor: Colors.blueAccent,
            ),
          ],
        ),
      ),
    );
  }
}

1.0.2 #

  • Changes on Readme

1.0.1 #

  • Initial Release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:hsl_colorpicker/HSLColorPicker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ColorPickerPage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class ColorPickerPage extends StatefulWidget {
  @override
  _ColorPickerPageState createState() => _ColorPickerPageState();
}

class _ColorPickerPageState extends State<ColorPickerPage> {
  HSLColor hslColor = HSLColor.fromColor(Colors.blue);
  Color color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: color,
        title: Stack(
          children: <Widget>[
            Text(
              "HSL COLOR PICKER: ${"#" + color.toString().split("0x")[1].toUpperCase().replaceFirst("FF", "").replaceAll(")", "")}",
              style: TextStyle(
                fontSize: 16,
                foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 1
                  ..color = Colors.grey,
              ),
            ),
            Text(
              "HSL COLOR PICKER: ${"#" + color.toString().split("0x")[1].toUpperCase().replaceFirst("FF", "").replaceAll(")", "")}",
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
              ),
            ),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            HSLColorPicker(
              onChanged: (colorSelected) {
                print(colorSelected);
                setState(() {
                  hslColor = colorSelected;
                  color = colorSelected.toColor();
                });
              },
              size: 200,
              strokeWidth: 5,
              thumbSize: 9,
              thumbStrokeSize: 3,
              showCenterColorIndicator: true,
              centerColorIndicatorSize: 80,
              initialColor: Colors.blueAccent,
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  hsl_colorpicker: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:hsl_colorpicker/ColorPicker.dart';
import 'package:hsl_colorpicker/HSLColorPicker.dart';
import 'package:hsl_colorpicker/hsl_color_picker.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
16
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
54
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • hsl_colorpicker that is a package requiring null.

Health suggestions

Fix lib/HSLColorPicker.dart. (-0.50 points)

Analysis of lib/HSLColorPicker.dart reported 1 hint:

line 10 col 7: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: HSLColorPicker.strokeWidth, HSLColorPicker.thumbSize, HSLColorPicker.thumbStrokeSize, HSLColorPicker.showCenterColorIndicator, HSLColorPicker.centerColorIndicatorSize

Maintenance suggestions

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test