{"id":18903548,"url":"https://github.com/itisnajim/color_extract","last_synced_at":"2025-10-04T14:16:11.432Z","repository":{"id":75004459,"uuid":"605128398","full_name":"itisnajim/color_extract","owner":"itisnajim","description":"A Flutter package that extract the average color of a widget's background.","archived":false,"fork":false,"pushed_at":"2023-02-23T23:53:50.000Z","size":6508,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T03:47:03.390Z","etag":null,"topics":["android","cross-platform","dart","desktop","flutter","flutter-package","ios","mobile","mobile-development","web"],"latest_commit_sha":null,"homepage":"","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/itisnajim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"itisnajim"}},"created_at":"2023-02-22T14:04:14.000Z","updated_at":"2024-10-04T08:38:05.000Z","dependencies_parsed_at":"2023-07-11T07:33:04.177Z","dependency_job_id":null,"html_url":"https://github.com/itisnajim/color_extract","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/itisnajim/color_extract","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itisnajim%2Fcolor_extract","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itisnajim%2Fcolor_extract/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itisnajim%2Fcolor_extract/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itisnajim%2Fcolor_extract/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itisnajim","download_url":"https://codeload.github.com/itisnajim/color_extract/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itisnajim%2Fcolor_extract/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278322182,"owners_count":25967879,"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","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["android","cross-platform","dart","desktop","flutter","flutter-package","ios","mobile","mobile-development","web"],"created_at":"2024-11-08T09:05:31.313Z","updated_at":"2025-10-04T14:16:11.427Z","avatar_url":"https://github.com/itisnajim.png","language":"Dart","funding_links":["https://github.com/sponsors/itisnajim"],"categories":[],"sub_categories":[],"readme":"# color_extract\n[![pub package](https://img.shields.io/pub/v/color_extract.svg)](https://pub.dartlang.org/packages/color_extract) [![Build](https://github.com/itisnajim/color_extract/workflows/Main/badge.svg)](https://github.com/itisnajim/color_extract/actions) [![codecov](https://codecov.io/gh/itisnajim/color_extract/branch/main/graph/badge.svg?token=DQTMJA22JQ)](https://codecov.io/gh/itisnajim/color_extract) [![GitHub license](https://img.shields.io/github/license/itisnajim/color_extract)](https://github.com/itisnajim/color_extract/blob/master/LICENSE)  [![GitHub issues](https://img.shields.io/github/issues/itisnajim/color_extract)](https://github.com/itisnajim/color_extract/issues)\n\nColor Extract is a Flutter package that allows you to extract and calculate colors from your app's widgets.\nYou can use it to change the color of a widget depending/based on the color of the background (the other widget behind).\n\n\nPreview\n------------\n(Video player may not show on pub.dev, check github.com)\n\nhttps://user-images.githubusercontent.com/44414626/220677525-30942250-ceb2-4e85-a8af-1cb2317e4ed5.mp4\n\nDemo\n------------\nIn this demo see how you can make your widget change colors like a chameleon 🦎.\n\n![demo](https://raw.githubusercontent.com/itisnajim/color_extract/main/readme/example-demo.gif)\n\nInstallation\n------------\n\nAdd the following to your `pubspec.yaml`:\n\n\n```yaml\ndependencies:\n  color_extract: ^1.0.1\n```\n\nThen run `flutter pub get`.\n\nUsage\n-----\n\n### ColorExtractor\n\nThe `ColorExtractor` it's the widget we want to extract the average color from. It serves as a wrapper for RepaintBoundary, so you can utilize RepaintBoundary as an alternative.\n\n```dart\nColorExtractor(\n  boundaryKey: GlobalKey(),\n  child: Container(\n    width: 200,\n    height: 200,\n    color: Colors.red,\n  ),\n);\n```\n\n### ColorAverager\n\nThe `ColorAverager` widget computes the average color of a specific portion of either `ColorExtractor` or `RepaintBoundary`. Its application is useful in determining the dominant color of a certain area, such as the background behind a logo, image.\n\n```dart\nColorAverager(\n  boundaryKey: GlobalKey(),\n  child: SizedBox(\n    width: 50,\n    height: 50,\n  ),\n  onChanged: (color) {\n    // Handle the new average color.\n  },\n);\n```\n\nYou can also use the `ColorAveragerController` to calculate the average color programmatically.\n\n```dart\nfinal controller = ColorAveragerController();\n\n// ... render the widget ...\n\nfinal avgColor = await controller.calculateAvgColor();\n```\n\nExample\n-------\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:color_extract/color_extract.dart';\n\nclass MyHomePage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Stack(\n        children: [\n          ColorExtractor(\n            boundaryKey: boundaryKey,\n            child: Container(\n              width: 200,\n              height: 200,\n              color: Colors.blue,\n            ),\n          ),\n          ColorAverager(\n            // boundaryKey should be the same one in the above ColorExtractor boundaryKey\n            boundaryKey: boundaryKey,\n            // You can use the controller (ColorAveragerController) too.\n            // controller: controller,\n            child: const SizedBox(width: 50, height: 50),\n            onChanged: (color) {\n                // Do something with the average color.\n                // color should be = Colors.blue\n            },\n          )\n        ],\n      )\n    );\n  }\n}\n```\n\n## Author\n\nitisnajim, itisnajim@gmail.com\n\n## License\n\ncolor_extract is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitisnajim%2Fcolor_extract","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitisnajim%2Fcolor_extract","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitisnajim%2Fcolor_extract/lists"}