color_extract example | Flutter package

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

细心的佛珠 · Photoshop ...· 1 周前 ·

刚分手的卤蛋 · 攻击者使用 VSTO ...· 5 月前 ·

气势凌人的灯泡 · clickonce发布方式创建桌面快捷方式- ...· 7 月前 ·

没有腹肌的沙滩裤 · Free Automated ...· 9 月前 ·

苦闷的木瓜 · 2018中国暖通空调产业发展峰会在京召开_中 ...· 1 年前 ·

</noscript><div class="site-header"><button class="hamburger" aria-label="menu toggle"/><a class="logo" href="/"><img class="site-logo" src="/static/hash-o6oemknr/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/></a><div class="site-header-space"/><div class="site-header-mask"/><div class="site-header-search"><form action="/packages" method="GET"><input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/></form></div><nav class="site-header-nav scroll-container"><div class="nav-login-container"><button id="-account-login" class="nav-main-button link">Sign in</button></div><div class="nav-container nav-help-container hoverable"><button class="nav-main-button">Help</button><div class="nav-hover-popup"><div class="nav-table-columns"><div class="nav-table-column"><h3>Pub.dev</h3><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div><div class="nav-table-column"><h3>Flutter</h3><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div><div class="nav-table-column"><h3>Dart</h3><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Pub.dev <img class="foldable-icon" src="/static/hash-o6oemknr/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="/help/search" rel="noopener" target="_blank">Searching for packages</a><a class="nav-link" href="/help/scoring" rel="noopener" target="_blank">Package scoring and pub points</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Flutter <img class="foldable-icon" src="/static/hash-o6oemknr/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://flutter.dev/using-packages/" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://flutter.dev/developing-packages/" rel="noopener" target="_blank">Developing packages and plugins</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div><div class="nav-container nav-help-container-mobile foldable"><h3 class="foldable-button">Dart <img class="foldable-icon" src="/static/hash-o6oemknr/img/nav-mobile-foldable-icon.svg" alt="toggle folding of the section" width="13" height="6"/></h3><div class="foldable-content"><a class="nav-link" href="https://dart.dev/guides/packages" rel="noopener" target="_blank">Using packages</a><a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a></div></div></nav></div><div id="banner-container"/><main class="container"><div class="detail-wrapper -active -has-info-box"><div class="detail-header -is-loose"><div class="detail-container"><div class="detail-header-outer-block"><div class="detail-header-content-block"><h1 class="title">color_extract 1.0.1+1 <span class="pkg-page-title-copy"><img class="pkg-page-title-copy-icon filter-invert-on-dark" src="/static/hash-o6oemknr/img/content-copy-icon.svg" alt="copy &quot;color_extract: ^1.0.1+1&quot; to clipboard" width="18" height="18" title="Copy &quot;color_extract: ^1.0.1+1&quot; to clipboard" data-copy-content="color_extract: ^1.0.1+1" data-ga-click-event="copy-package-version"/><div class="pkg-page-title-copy-feedback"><span class="code">color_extract: ^1.0.1+1</span> copied to clipboard</div></span></h1><div class="metadata">Published <span><a class="-x-ago" href="" title="Feb 23, 2023" aria-label="21 months ago" aria-role="button" role="button" data-timestamp="1677196332548">21 months ago</a></span> • <a class="-pub-publisher" href="/publishers/itisnajim.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-o6oemknr/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>itisnajim.com</a><span class="package-badge" title="Package is compatible with Dart 3.">Dart 3 compatible</span></div><div class="detail-tags-and-like"><div class="detail-tags"><div class="-pub-tag-badge"><span class="tag-badge-main">SDK</span><a class="tag-badge-sub" href="/packages?q=sdk%3Aflutter" rel="nofollow" title="Packages compatible with Flutter SDK">Flutter</a></div><div class="-pub-tag-badge"><span class="tag-badge-main">Platform</span><a class="tag-badge-sub" href="/packages?q=platform%3Aandroid" rel="nofollow" title="Packages compatible with Android platform">Android</a><a class="tag-badge-sub" href="/packages?q=platform%3Aios" rel="nofollow" title="Packages compatible with iOS platform">iOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Alinux" rel="nofollow" title="Packages compatible with Linux platform">Linux</a><a class="tag-badge-sub" href="/packages?q=platform%3Amacos" rel="nofollow" title="Packages compatible with macOS platform">macOS</a><a class="tag-badge-sub" href="/packages?q=platform%3Aweb" rel="nofollow" title="Packages compatible with Web platform">web</a><a class="tag-badge-sub" href="/packages?q=platform%3Awindows" rel="nofollow" title="Packages compatible with Windows platform">Windows</a></div></div><div class="detail-like"><button id="-pub-like-icon-button" class="mdc-icon-button" data-ga-click-event="toggle-like" aria-pressed="false" title="Like this package"><img class="mdc-icon-button__icon" src="/static/hash-o6oemknr/img/like-inactive.svg" alt="liked status: inactive" width="18" height="18"/><img class="mdc-icon-button__icon mdc-icon-button__icon--on" src="/static/hash-o6oemknr/img/like-active.svg" alt="liked status: active" width="18" height="18"/></button><span class="likes-count"><span id="likes-count">11</span></span></div></div></div></div></div></div><div class="detail-container"><div class="detail-lead"><div class="detail-metadata-toggle"><div class="detail-metadata-toggle-icon">→</div><h3 class="detail-lead-title">Metadata</h3></div><p class="detail-lead-text">A Flutter package that extract the average color of a widget's background.</p><p class="detail-lead-more"><a class="detail-metadata-toggle">More...</a></p></div></div><div class="detail-body"><div class="detail-tabs"><div class="detail-tabs-wide-header"><div class="detail-container"><ul class="detail-tabs-header"><li class="detail-tab tab-link detail-tab-readme-title"><a href="/packages/color_extract" role="button">Readme</a></li><li class="detail-tab tab-link detail-tab-changelog-title"><a href="/packages/color_extract/changelog" role="button">Changelog</a></li><li class="detail-tab tab-button detail-tab-example-title -active">Example</li><li class="detail-tab tab-link detail-tab-installing-title"><a href="/packages/color_extract/install" role="button">Installing</a></li><li class="detail-tab tab-link detail-tab-versions-title"><a href="/packages/color_extract/versions" role="button">Versions</a></li><li class="detail-tab tab-link detail-tab-analysis-title"><a href="/packages/color_extract/score" role="button">Scores</a></li></ul></div></div><div class="detail-container detail-body-main"><div class="detail-tabs-content"><section class="tab-content detail-tab-example-content -active markdown-body"><p style="font-family: monospace"><b><a href="https://github.com/itisnajim/color_extract/blob/main/example/lib/main.dart" rel="noopener noreferrer nofollow" target="_blank">example/lib/main.dart</a></b></p><pre><code class="language-dart">import 'dart:math'; import 'package:color_extract/color_extract.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/scheduler.dart'; void main() { runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, home: const MyHomePage(), class PosColor { Offset offset; Size size; Color color; PosColor({ required this.offset, required this.size, required this.color, List&lt;PosColor&gt; generatePosColors() { List&lt;PosColor&gt; posColors = []; final random = Random(); for (int i = 0; i &lt; 20; i++) { double width = random.nextDouble() * 200 + 100; double height = random.nextDouble() * 200 + 100; double x = random.nextDouble() * 300 + 50; double y = random.nextDouble() * 800 + 50; posColors.add( PosColor( offset: Offset(x, y), size: Size(width, height), color: getRandomColor(), for (int i = 0; i &lt; 5; i++) { double size = random.nextDouble() * 100 + 50; double x = 250 - size / 2; double y = 400 - size / 2; posColors.add( PosColor( offset: Offset(x, y), size: Size(size, size), color: Colors.white, for (int i = 0; i &lt; 5; i++) { double size = random.nextDouble() * 100 + 50; double x = 250 - size / 2; double y = 550 - size / 2; posColors.add( PosColor( offset: Offset(x, y), size: Size(size, size), color: Colors.black, for (int i = 0; i &lt; 20; i++) { double width = random.nextDouble() * 200 + 100; double height = random.nextDouble() * 200 + 100; double x = random.nextDouble() * 300 + 50; double y = random.nextDouble() * 800 + 600; posColors.add( PosColor( offset: Offset(x, y), size: Size(width, height), color: getRandomColor(), return posColors; class MyHomePage extends StatefulWidget { const MyHomePage({super.key}); @override State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState(); class _MyHomePageState extends State&lt;MyHomePage&gt; { final boundaryKey = GlobalKey(); final _scrollController = ScrollController(); final _controller = ColorAveragerController(); final recsInfo = ValueNotifier(generatePosColors()); final draggableInfo = ValueNotifier( PosColor( offset: const Offset(30, 30), color: Colors.blue, size: const Size(50, 50)), Future&lt;Color&gt; calcAvgColor([bool reverse = false]) async { var color = (await _controller.calculateAvgColor()) ?? Colors.blue; if (reverse) color = color.reverse; return color; bool isReversedColor = false; @override void initState() { _scrollController.addListener(() { if (_scrollController.hasClients) { if (_scrollController.position.userScrollDirection != ScrollDirection.idle) { SchedulerBinding.instance.addPostFrameCallback((_) { _controller.calculateAvgColor(); super.initState(); @override Widget build(BuildContext context) { return Scaffold( body: Stack( children: [ ColorExtractor( boundaryKey: boundaryKey, child: SingleChildScrollView( controller: _scrollController, child: SizedBox( height: 2000, child: Stack( children: recsInfo.value .map((posColor) =&gt; Positioned( left: posColor.offset.dx, top: posColor.offset.dy, child: Container( width: posColor.size.width, height: posColor.size.height, color: posColor.color, .toList()), ValueListenableBuilder( valueListenable: draggableInfo, builder: (_, __, ___) { return Positioned( left: draggableInfo.value.offset.dx, top: draggableInfo.value.offset.dy, child: Draggable( feedback: Opacity( opacity: 0.6, child: Container( width: draggableInfo.value.size.width, height: draggableInfo.value.size.height, decoration: BoxDecoration( color: draggableInfo.value.color, borderRadius: BorderRadius.circular(8), border: Border.all(color: Colors.grey.withOpacity(0.4)), onDragEnd: (dragDetails) async { draggableInfo.value = PosColor( color: await calcAvgColor(isReversedColor), offset: Offset( dragDetails.offset.dx, dragDetails.offset.dy - MediaQuery.of(context).padding.top, size: draggableInfo.value.size, WidgetsBinding.instance.addPostFrameCallback((_) async { draggableInfo.value = PosColor( color: await calcAvgColor(isReversedColor), offset: Offset( dragDetails.offset.dx, dragDetails.offset.dy - MediaQuery.of(context).padding.top, size: draggableInfo.value.size, child: ColorAverager( boundaryKey: boundaryKey, controller: _controller, fillerColor: Theme.of(context).scaffoldBackgroundColor, child: AnimatedContainer( duration: const Duration(milliseconds: 300), width: draggableInfo.value.size.width, height: draggableInfo.value.size.height, decoration: BoxDecoration( color: draggableInfo.value.color, borderRadius: BorderRadius.circular(8), border: Border.all(color: Colors.grey.withOpacity(0.4)), onChanged: (value) { //debugPrint('value $value'); final color = value ?? Colors.blue; draggableInfo.value = PosColor( color: isReversedColor ? color.reverse : color, offset: draggableInfo.value.offset, size: draggableInfo.value.size, Positioned( bottom: 0, left: 0, right: 0, child: ColoredBox( color: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.8), child: CheckboxListTile( controlAffinity: ListTileControlAffinity.trailing, title: const Text('Reverse Color'), value: isReversedColor, onChanged: (_) { setState(() { isReversedColor = !isReversedColor; WidgetsBinding.instance.addPostFrameCallback((_) async { draggableInfo.value = PosColor( color: await calcAvgColor(isReversedColor), offset: draggableInfo.value.offset, size: draggableInfo.value.size,