First release

.gitignore

@@ -1,13 +1,12 @@
-# See https://www.dartlang.org/guides/libraries/private-files
-
-# Files and directories created by pub
+.DS_Store
 .dart_tool/
+
 .packages
 .pub/
+
 build/
-# If you're building an application, you may want to check-in your pubspec.lock
-pubspec.lock
+ios/.generated/
+ios/Flutter/Generated.xcconfig
+ios/Runner/GeneratedPluginRegistrant.*
 
-# Directory created by dartdoc
-# If you don't generate documentation locally you can remove this line.
-doc/api/
+pubspec.lock

CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.0.1
+
+* Initial release

README.md

@@ -1 +1,17 @@
-# material_color_picker
+# Color Picker
+
+Color picker is a Flutter widget, that can be customizable.
+
+By default, it's the material colors, but you can define your colors.
+
+You can also use CircleColor widget to display color in your app.
+Example, you can set the color picker in a dialog and display the selected color in a ListTile, for settings.
+
+## How to use it
+
+**SOON**
+
+
+## Screenshot
+
+**SOON**

color_picker.iml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/lib" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/test" isTestSource="true" />
+      <excludeFolder url="file://$MODULE_DIR$/.dart_tool" />
+      <excludeFolder url="file://$MODULE_DIR$/.idea" />
+      <excludeFolder url="file://$MODULE_DIR$/.pub" />
+      <excludeFolder url="file://$MODULE_DIR$/build" />
+    </content>
+    <orderEntry type="jdk" jdkName="Android API 25 Platform" jdkType="Android SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="Dart Packages" level="project" />
+    <orderEntry type="library" name="Dart SDK" level="project" />
+    <orderEntry type="library" name="Flutter Plugins" level="project" />
+  </component>
+</module>

lib/color_picker.dart

@@ -0,0 +1,4 @@
+library color_picker;
+
+export 'src/material_color_picker.dart';
+export 'src/circle_color.dart';

lib/src/circle_color.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+class CircleColor extends StatelessWidget {
+  static const double _kBorderWidth = 2.0;
+  static const double _kBorderWidthSelected = 5.0;
+  static const double _kColorElevation = 4.0;
+
+  static const ShapeBorder _kShape = const CircleBorder(
+      side: const BorderSide(color: Colors.black12, width: _kBorderWidth));
+
+  static const ShapeBorder _kShapeSelected = const CircleBorder(
+      side: const BorderSide(
+          color: Colors.black54, width: _kBorderWidthSelected));
+
+  final bool isSelected;
+  final Color color;
+  final VoidCallback onColorChoose;
+  final double circleSize;
+  final double elevation;
+  final ShapeBorder shape;
+  final ShapeBorder shapeSelected;
+
+  const CircleColor(
+      {Key key,
+      this.isSelected,
+      @required this.color,
+      this.onColorChoose,
+      @required this.circleSize,
+      this.elevation = _kColorElevation,
+      this.shape = _kShape,
+      this.shapeSelected = _kShapeSelected})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+        elevation: elevation,
+        shape: (isSelected ?? false) ? shapeSelected : shape,
+        color: color,
+        child: InkWell(
+            onTap: onColorChoose,
+            child: Container(
+                width: circleSize,
+                height: circleSize,
+                color: Colors.transparent)));
+  }
+}

lib/src/material_color_picker.dart

@@ -0,0 +1,146 @@
+import 'package:color_picker/src/circle_color.dart';
+import 'package:flutter/material.dart';
+
+const List<MaterialColor> materialColors = const <MaterialColor>[
+  Colors.red,
+  Colors.pink,
+  Colors.purple,
+  Colors.deepPurple,
+  Colors.indigo,
+  Colors.blue,
+  Colors.lightBlue,
+  Colors.cyan,
+  Colors.teal,
+  Colors.green,
+  Colors.lightGreen,
+  Colors.lime,
+  Colors.yellow,
+  Colors.amber,
+  Colors.orange,
+  Colors.deepOrange,
+  Colors.brown,
+  Colors.grey,
+  Colors.blueGrey
+];
+
+class MaterialColorPicker extends StatefulWidget {
+  final Color selectedColor;
+  final ValueChanged<Color> onColorChange;
+  final VoidCallback onColorSelected;
+  final WrapAlignment colorsAlignement;
+  final List<MaterialColor> colors;
+
+  const MaterialColorPicker(
+      {Key key,
+      this.selectedColor,
+      this.onColorChange,
+      this.onColorSelected,
+      this.colorsAlignement = WrapAlignment.start,
+      this.colors = materialColors})
+      : super(key: key);
+
+  @override
+  _MaterialColorPickerState createState() => _MaterialColorPickerState();
+}
+
+class _MaterialColorPickerState extends State<MaterialColorPicker> {
+  static const double _kCircleColorSize = 47.0;
+  static const double _kPadding = 9.0;
+
+  MaterialColor _mainColor;
+  Color _shadeColor;
+  bool _isMainSelection;
+
+  @override
+  void initState() {
+    super.initState();
+    _mainColor = widget.colors[0];
+    _shadeColor = _mainColor.shade500;
+    _isMainSelection = true;
+  }
+
+  void _onMainColorSelected(MaterialColor color) {
+    setState(() {
+      _mainColor = color;
+      _shadeColor = _mainColor.shade500;
+      _isMainSelection = false;
+    });
+  }
+
+  void _onShadeColorSelected(Color color) {
+    setState(() {
+      _shadeColor = color;
+    });
+    widget.onColorChange(color);
+  }
+
+  void _onBack() {
+    setState(() {
+      _isMainSelection = true;
+    });
+  }
+
+  List<Widget> _buildListMainColor(List<MaterialColor> colors) {
+    List<Widget> circles = [];
+    for (final color in colors) {
+      final isSelected = _mainColor == color;
+
+      circles.add(CircleColor(
+          color: color,
+          circleSize: _kCircleColorSize,
+          onColorChoose: () => _onMainColorSelected(color),
+          isSelected: isSelected));
+    }
+
+    return circles;
+  }
+
+  List<Color> _getMaterialColorShades(MaterialColor color) {
+    return [
+      color.shade50,
+      color.shade100,
+      color.shade200,
+      color.shade300,
+      color.shade400,
+      color.shade500,
+      color.shade600,
+      color.shade700,
+      color.shade800,
+      color.shade900
+    ];
+  }
+
+  List<Widget> _buildListShadesColor(MaterialColor color) {
+    List<Widget> circles = [];
+
+    circles.add(IconButton(icon: Icon(Icons.arrow_back), onPressed: _onBack));
+
+    final shades = _getMaterialColorShades(color);
+    for (final color in shades) {
+      final isSelected = _shadeColor == color;
+
+      circles.add(CircleColor(
+          color: color,
+          circleSize: _kCircleColorSize,
+          onColorChoose: () => _onShadeColorSelected(color),
+          isSelected: isSelected));
+    }
+    return circles;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final listChildren = _isMainSelection
+        ? _buildListMainColor(widget.colors)
+        : _buildListShadesColor(_mainColor);
+
+    return Container(
+        padding: const EdgeInsets.all(16.0),
+        child: Wrap(
+            runSpacing: _kPadding,
+            spacing: _kPadding,
+            children: listChildren,
+            verticalDirection: VerticalDirection.down,
+            alignment: widget.colorsAlignement));
+  }
+}

pubspec.yaml

@@ -0,0 +1,13 @@
+name: color_picker
+description: Color picker for Flutter
+version: 0.0.1
+author: Jean-Charles Moussé <[email protected]>
+homepage: https://github.com/pyozer/color_picker
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter