mini_color_picker 0.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 64

mini_color_picker #

Compact and simple color picker.

Using and description of arguments #

MiniColorPickerController _controller;

@override
void initState() {
  // You don't need to set anything here.
  _controller = MiniColorPickerController();
  // controller has:
  //   Stream<MiniColorPickerBrush> getBrushStream()
  //   StreamController<MiniColorPickerBrush> get brushStream
  //   bool get dragging - indicate dragging
  //   double get transparency - actual transparency value
  //   Color get color - actual color value
  // when you set transparency or color - they will be added to the stream.

  super.initState();
}
@override
dispose() {
  _controller?.dispose(); // don't forget to dispose
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Align(
      alignment: Alignment.center,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container( ///
            width: 30,    //  widget will expand so you need to wrap it with restricted container/box etc.
            height: 200,  ///
            child: MiniColorPicker(
              controller: _controller, // controller, required field

              color: Colors.red, // Just color

              // This field sets the direction of the gradient and determines
              // whether width or height will be divided by sizeDivider (see below).
              widgetDirection: MiniColorPickerDirection.vertical,

              // trancparency is a rough name for this field, it's just variables wich will be calculated
              // when user drag out of the color picker. Mostly it can be used for transparency,
              // but also you can use it (for example) as brush thickness or maybe even size of some widget.
              //
              // "Trancparency" value calculates as user drag from color picker to the
              // transparencyCalcSide up to 75% of screen size.
              transparency: 1,
              minTransparency: 0, // minimum value of "transparancy" will be at nearest point to color picker widget
              maxTransparency: 1, // will reach maximum value at the farthest point

              // Just side with the largest space from this widget. For example if you
              // place it in top with horizontal direction - best desicion will be "bottom".
              transparencyCalcSide: MiniColorPickerTransparencyCalcSide.right,

              // This field is responsible for size of gradient line regarding to gesture detector
              // wich fills all available space. By default gradient is half the size of the container,
              // if you will set it to 1, gradient will have same size as container,
              // but user will need to touch exactly on gradient to start onPanUpdate, while this reduction allows
              // to touch some around and UI will still respond.
              sizeDivider: 2,
            ),
          ),
          SizedBox(width: 20,),
          StreamBuilder(
            stream: _controller.getBrushStream(),
            initialData: MiniColorPickerBrush(),
            builder: (_, AsyncSnapshot<MiniColorPickerBrush> snapshot) {
              return Container(
                height: 100,
                width: 100,
                color: snapshot.data.color.withOpacity(1-snapshot.data.transparency),
              );
            },
          ),
        ],
      ),
    ),
  );
}

[0.0.1] - TODO: Add release date. #

  • TODO: Describe initial release.

[0.0.2] - TODO: Add release date. #

  • TODO: Describe initial release.

example/lib/main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  MiniColorPickerController _controller;
  MiniColorPickerController _controller2;
  MiniColorPickerController _controller3;

  @override
  void initState() {

    _controller = MiniColorPickerController();
    _controller2 = MiniColorPickerController();
    _controller3 = MiniColorPickerController();
    super.initState();
  }

  @override
  dispose() {
    _controller?.dispose();
    _controller2?.dispose();
    _controller3?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:

      Container(
        padding: const EdgeInsets.all(20),
        color: Colors.white,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[

            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[

                Row(
                  children: <Widget>[

                    Container(
                      width: 30,
                      height: 200,
                      child: MiniColorPicker(
                        controller: _controller3,
                        minTransparency: 0,
                        maxTransparency: 1,
                        widgetDirection: MiniColorPickerDirection.vertical,
                        transparencyCalcSide: MiniColorPickerTransparencyCalcSide.right,
                      ),
                    ),
                    SizedBox(width: 20,),
                    StreamBuilder(
                      stream: _controller3.getBrushStream(),
                      initialData: MiniColorPickerBrush(),
                      builder: (_, AsyncSnapshot<MiniColorPickerBrush> snapshot) {
                        return Container(
                          height: 100,
                          width: 100,
                          color: snapshot.data.color.withOpacity(1-snapshot.data.transparency),
                        );
                      },
                    ),

                  ],
                ),

                Row(
                  children: <Widget>[
                    StreamBuilder(
                      stream: _controller2.getBrushStream(),
                      initialData: MiniColorPickerBrush(),
                      builder: (_, AsyncSnapshot<MiniColorPickerBrush> asyncSnapshot) {
                        if(_controller2.dragging == false) {
                          return Container(
                            child: Icon(
                              Icons.brush,
                              size: 30,
                              color: asyncSnapshot.data.color,
                            )
                          );
                        }

                        return Container(
                          width: 30,
                          height: 30,
                          decoration: BoxDecoration(
                            color: asyncSnapshot.data.color,
                            shape: BoxShape.circle,
                          ),
                          alignment: Alignment.center,
                          child: Container(
                            width: asyncSnapshot.data.transparency,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              shape: BoxShape.circle,
                            ),
                          ),
                        );
                      },
                    ),
                    SizedBox(width: 20,),
                    Container(
                      width: 30,
                      height: 200,
                      child: MiniColorPicker(
                        controller: _controller2,
                        minTransparency: 3,
                        maxTransparency: 15,
                        widgetDirection: MiniColorPickerDirection.vertical,
                        transparencyCalcSide: MiniColorPickerTransparencyCalcSide.left,
                      ),
                    ),
                  ]
                ),

              ],
            ),

            Column(
              children: <Widget>[
                StreamBuilder(
                  stream: _controller.getBrushStream(),
                  initialData: MiniColorPickerBrush(color: Colors.transparent, transparency: 1),
                  builder: (_, AsyncSnapshot<MiniColorPickerBrush> snapshot) {

                    return Container(
                      // height: 100,
                      // width: 100,
                      child: ColorFiltered(
                        colorFilter: ColorFilter.mode(
                          snapshot.data.color.withOpacity(1-snapshot.data.transparency),
                          BlendMode.color
                        ),
                        child: Image.network('https://i.picsum.photos/id/451/200/200.jpg',),
                      ),
                    );
                  },
                ),
                SizedBox(height: 20,),
                Container(
                  width: 200,
                  height: 30,
                  child: MiniColorPicker(
                    controller: _controller,
                    minTransparency: 0,
                    maxTransparency: 1,
                    widgetDirection: MiniColorPickerDirection.horizontal,
                    transparencyCalcSide: MiniColorPickerTransparencyCalcSide.top,
                    sizeDivider: 2,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  mini_color_picker: ^0.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:mini_color_picker/mini_color_picker.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
41
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70
Overall:
Weighted score of the above. [more]
64
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health issues and suggestions

Document public APIs. (-0.30 points)

41 out of 42 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/controller.dart.

Run flutter format to format lib/controller.dart.

Format lib/mini_color_picker.dart.

Run flutter format to format lib/mini_color_picker.dart.

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.

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
image ^2.1.4 2.1.12
Transitive dependencies
archive 2.0.13
args 1.6.0
charcode 1.1.3
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.4
meta 1.1.8
path 1.6.4
petitparser 3.0.2
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
xml 3.7.0 4.1.0
Dev dependencies
flutter_test