{"id":13549940,"url":"https://github.com/rxlabz/cyclop","last_synced_at":"2025-07-13T07:32:02.539Z","repository":{"id":53718812,"uuid":"275951668","full_name":"rxlabz/cyclop","owner":"rxlabz","description":"A Flutter color palette with eyedropper, HSL, RGB and Material colors","archived":false,"fork":false,"pushed_at":"2023-09-29T20:09:38.000Z","size":31843,"stargazers_count":118,"open_issues_count":1,"forks_count":36,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-03T19:37:26.926Z","etag":null,"topics":["dart","design","flutter"],"latest_commit_sha":null,"homepage":"https://rxlabz.github.io/cyclop","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rxlabz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-06-29T23:52:54.000Z","updated_at":"2024-08-26T20:24:42.000Z","dependencies_parsed_at":"2023-02-16T08:15:43.151Z","dependency_job_id":"d37959ab-49be-49af-b02f-64321b8bddee","html_url":"https://github.com/rxlabz/cyclop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxlabz%2Fcyclop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxlabz%2Fcyclop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxlabz%2Fcyclop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rxlabz%2Fcyclop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rxlabz","download_url":"https://codeload.github.com/rxlabz/cyclop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225303465,"owners_count":17453029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","design","flutter"],"created_at":"2024-08-01T12:01:27.274Z","updated_at":"2024-11-22T08:18:45.735Z","avatar_url":"https://github.com/rxlabz.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Cyclop [![Pub Version](https://img.shields.io/pub/v/cyclop)](https://pub.dev/packages/cyclop)\n\n![Cyclop logo](https://github.com/rxlabz/paco/raw/master/assets/cyclop_banner.png)\n\nA flutter colorpicker with an eyedropper tool. Works on mobile, desktop \u0026 web ( CanvasKit)\n\n## [Demo](https://rxlabz.github.io/cyclop/)\n\n| Desktop \u0026 tablet  |  Mobile|\n| --- | --- |\n| ![Cyclop desktop eyedropper](https://github.com/rxlabz/cyclop/raw/master/assets/cyclop.gif) | ![Cyclop onmobile](https://github.com/rxlabz/cyclop/raw/master/assets/pacomob.gif) |\n\n\n| Material | HSL | RVB | Custom |\n| --- | --- | --- | --- |\n| ![Cyclop material](https://github.com/rxlabz/cyclop/raw/master/assets/cyclop_material.png) | ![Cyclop hsl](https://github.com/rxlabz/cyclop/raw/master/assets/cyclop_hsl.png) | ![Cyclop hsl](https://github.com/rxlabz/cyclop/raw/master/assets/cyclop_rvb.png) | ![Cyclop hsl](https://github.com/rxlabz/cyclop/raw/master/assets/cyclop_custom.png) |\n\n\n\n| Light theme | Dark theme |\n| --- | --- |\n| ![Cyclop light](https://github.com/rxlabz/cyclop/raw/master/assets/cyclop_hsl.png) | ![Cyclop dark](https://github.com/rxlabz/cyclop/raw/master/assets/cyclop_dark.png) |\n\n\n### Eyedropper\n\nSelect a color from your Flutter mobile or desktop screen.\n\n![Cyclop eye dropper](https://github.com/rxlabz/cyclop/raw/master/assets/paco_eyedropper.png) \n\nTo use the eyedropper you need to wrap the app in the EyeDrop widget.\n\n```dart\n@override\n  Widget build(BuildContext context) {\n    return EyeDrop(\n      child: Builder(\n        builder: (context) =\u003e Scaffold(\n          backgroundColor: backgroundColor,\n          body: Container(\n            child: ColorButton(\n              key: Key('c1'),\n              color: color1,\n              config: ColorPickerConfig(enableEyePicker = true),\n              size: 32,\n              elevation: 5,\n              boxShape: BoxShape.rectangle, // default : circle\n              swatches: swatches,\n              onColorChanged: (value) =\u003e setState(() =\u003e color1 = value),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n```\n\n### Customisable\n\n- disable opacity slider\n- disable eye dropping \n- disable swatch library\n- Circle or Square color buttons\n\n```dart\nColorButton(\n  key: Key('c1'),\n  color: color1,\n  config: ColorPickerConfig(\n    this.enableOpacity = true,\n    this.enableLibrary = false,\n    this.enableEyePicker = true,\n  ),\n  boxShape: BoxShape.rectangle, // default : circle\n  size: 32,\n  swatches: swatches,\n  onColorChanged: (value) =\u003e setState( () =\u003e color1 = value ),\n );\n\nColorButton(\n  key: Key('c2'),\n  color: color2,\n  config: ColorPickerConfig(enableEyePicker: false),\n  size: 64,\n  swatches: swatches,\n  onColorChanged: (value) =\u003e setState( () =\u003e color2 = value ),\n  onSwatchesChanged: (newSwatches) =\u003e setState(() =\u003e swatches = newSwatches),\n );\n```\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frxlabz%2Fcyclop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frxlabz%2Fcyclop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frxlabz%2Fcyclop/lists"}