{"id":26758547,"url":"https://github.com/wdevore/gradient_colorstops_control","last_synced_at":"2025-07-05T14:33:12.359Z","repository":{"id":18946543,"uuid":"22166538","full_name":"wdevore/gradient_colorstops_control","owner":"wdevore","description":"Custom Dart color gradient widget.","archived":false,"fork":false,"pushed_at":"2014-07-29T01:27:13.000Z","size":176,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T16:36:06.614Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/wdevore.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-23T18:00:42.000Z","updated_at":"2017-05-14T16:45:33.000Z","dependencies_parsed_at":"2022-07-16T17:17:01.505Z","dependency_job_id":null,"html_url":"https://github.com/wdevore/gradient_colorstops_control","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wdevore/gradient_colorstops_control","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fgradient_colorstops_control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fgradient_colorstops_control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fgradient_colorstops_control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fgradient_colorstops_control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wdevore","download_url":"https://codeload.github.com/wdevore/gradient_colorstops_control/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wdevore%2Fgradient_colorstops_control/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263755656,"owners_count":23506430,"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":[],"created_at":"2025-03-28T16:29:28.327Z","updated_at":"2025-07-05T14:33:12.325Z","avatar_url":"https://github.com/wdevore.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dart Gradient Color Configurator\r\n\r\nThis control creates a simple color gradient configurator. It is designed purely in CSS/SVG/Dart; there is no Canvas rendering occurring. This control works in conjunction with the [Color Slider Control](https://github.com/wdevore/color_slider_control).\r\n\r\nThe control is appears as the `Top` portion of the compounded control as shown below. The `Bottom` section is the `Color slider control`.\r\n\r\n![Gradient Color Configurator](https://raw.githubusercontent.com/wdevore/gradient_colorstops_control/master/gradient_selector.png)\r\n\r\n##pubspec\r\nStart by adding a dependency for both the Gradient Color Configurator [configurator](https://github.com/wdevore/gradient_colorstops_control) and the Color Slider Selector [selector](https://github.com/wdevore/color_slider_control) in pubspec.yaml\r\n```yaml\r\n    dependencies:\r\n      color_slider_control:\r\n        git: git://github.com/wdevore/color_slider_control.git\r\n      gradient_colorstops_control:\r\n        git: git://github.com/wdevore/gradient_colorstops_control.git\r\n```\r\nImport the libraries into your project\r\n\r\n```dart\r\n    import 'package:color_slider_control/color_slider_control.dart';\r\n    import 'package:gradient_colorstops_control/gradient_colorstops_control.dart';\r\n```\r\n\r\nThe two controls need to created and joined together. This is done by:\r\n```dart\r\n    void main() {\r\n      ...\r\n      gradientWidget.colorWidget = colorWidget;\r\n    }\r\n```\r\n\r\nBelow is an example. The example is present in the `Web` directory.\r\n```dart\r\n    void main() {\r\n      ColorSliderWidget colorWidget = new ColorSliderWidget();\r\n      _targetColorContainer = querySelector(\"#color_pickerId\");\r\n      _targetColorContainer.nodes.add(colorWidget.container);\r\n\r\n      // We want the gradient widget to only send the colorstop of the marker\r\n      // not the marker's color stop on the bar.\r\n      GradientColorStopWidget gradientWidget = new GradientColorStopWidget(colorWidget.externalColorChange);\r\n      gradientWidget.colorWidget = colorWidget;\r\n\r\n      _targetGradientContainer = querySelector(\"#gradient_pickerId\");\r\n      _targetGradientContainer.nodes.add(gradientWidget.container);\r\n\r\n      colorWidget.colorChangeCallback = gradientWidget.externalColorChange;\r\n\r\n      colorWidget.bind();\r\n      gradientWidget.bind();\r\n\r\n    }\r\n```\r\n\r\nThe selector defaults to a light teal color.\r\n\r\n##Usage\r\nThe active `marker` is highlighted as darkgreen. Unselected `marker`s are blurred, grayscaled and translucent. The end `marker`s are highlighted in darkred and not movable.\r\n\r\n##Example\r\nA complete example on how to use the control can be found in the `Web` directory accompany the pub package.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwdevore%2Fgradient_colorstops_control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwdevore%2Fgradient_colorstops_control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwdevore%2Fgradient_colorstops_control/lists"}