CINXE.COM

<!DOCTYPE html> <html lang="en-us"><head><script src="https://www.googletagmanager.com/gtm.js?id=GTM-MX6DBN9" async="async"></script><script src="/static/hash-j60jq2j3/js/gtm.js" async="async"></script><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="twitter:card" content="summary"/><meta name="twitter:site" content="@dart_lang"/><meta name="twitter:description" content="A multifunctional Flutter image widget. Supports placeholders, error widgets and image transformers with fading."/><meta name="twitter:image" content="https://pub.dev/static/hash-j60jq2j3/img/pub-dev-icon-cover-image.png"/><meta property="og:type" content="website"/><meta property="og:site_name" content="Dart packages"/><meta property="og:title" content="octo_image | Flutter package"/><meta property="og:description" content="A multifunctional Flutter image widget. Supports placeholders, error widgets and image transformers with fading."/><meta property="og:image" content="https://pub.dev/static/hash-j60jq2j3/img/pub-dev-icon-cover-image.png"/><meta property="og:url" content="https://pub.dev/packages/octo_image"/><title>octo_image | Flutter package</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Display:wght@400&family=Google+Sans+Text:wght@400;500;700&family=Google+Sans+Mono:wght@400;700&display=swap"/><link rel="shortcut icon" href="/static/hash-j60jq2j3/img/flutter-logo-32x32.png"/><meta rel="apple-touch-icon" href="/static/hash-j60jq2j3/img/flutter-logo-32x32.png"/><meta rel="apple-touch-icon-precomposed" href="/static/hash-j60jq2j3/img/flutter-logo-32x32.png"/><link rel="stylesheet" href="https://www.gstatic.com/glue/v25_0/ccb.min.css"/><link rel="search" type="application/opensearchdescription+xml" title="Dart packages" href="/osd.xml"/><link rel="canonical" href="https://pub.dev/packages/octo_image"/><meta name="description" content="A multifunctional Flutter image widget. Supports placeholders, error widgets and image transformers with fading."/><link rel="alternate" type="application/atom+xml" title="Updated Packages Feed for Pub" href="/feed.atom"/><link rel="stylesheet" type="text/css" href="/static/hash-j60jq2j3/material/bundle/styles.css"/><link rel="stylesheet" type="text/css" href="/static/hash-j60jq2j3/css/style.css"/><script src="/static/hash-j60jq2j3/material/bundle/script.min.js" defer="defer"></script><script src="/static/hash-j60jq2j3/js/script.dart.js" defer="defer"></script><script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" defer="defer" data-autoload-cookie-consent-bar="true"></script><meta name="pub-page-data" content="eyJwa2dEYXRhIjp7InBhY2thZ2UiOiJvY3RvX2ltYWdlIiwidmVyc2lvbiI6IjIuMS4wIiwibGlrZXMiOjczNywicHVibGlzaGVySWQiOiJiYXNlZmxvdy5jb20iLCJpc0Rpc2NvbnRpbnVlZCI6ZmFsc2UsImlzTGF0ZXN0Ijp0cnVlfSwic2Vzc2lvbkF3YXJlIjpmYWxzZX0="/><link rel="preload" href="/static/hash-j60jq2j3/highlight/highlight-with-init.js" as="script"/></head><body class="light-theme"><script src="/static/hash-j60jq2j3/js/dark-init.js"></script><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MX6DBN9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><div class="site-header"><button class="hamburger" aria-label="menu toggle"></button><a class="logo" href="/" aria-label="Go to the landing page of pub.dev"><img class="site-logo" src="/static/hash-j60jq2j3/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/></a><div class="site-header-space"></div><div class="site-header-mask"></div><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-j60jq2j3/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-j60jq2j3/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-j60jq2j3/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><button class="-pub-theme-toggle" aria-label="light/dark theme toggle"></button></div><div id="banner-container"></div><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 pub-monochrome-icon-hoverable">octo_image 2.1.0 <span class="pkg-page-title-copy"><img class="pub-monochrome-icon pkg-page-title-copy-icon filter-invert-on-dark" src="/static/hash-j60jq2j3/img/content-copy-icon.svg" alt="copy "octo_image: ^2.1.0" to clipboard" width="18" height="18" title="Copy "octo_image: ^2.1.0" to clipboard" data-copy-content="octo_image: ^2.1.0" data-ga-click-event="copy-package-version"/><div class="pkg-page-title-copy-feedback"><span class="code">octo_image: ^2.1.0</span> copied to clipboard</div></span></h1><div class="metadata">Published <span><a class="-x-ago" href="" title="Aug 1, 2024" role="button" data-timestamp="1722533456265">8 months ago</a></span> • <a class="-pub-publisher" href="/publishers/baseflow.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>baseflow.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-j60jq2j3/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-j60jq2j3/img/like-active.svg" alt="liked status: active" width="18" height="18"/></button><span class="likes-count"><span id="likes-count">737</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 multifunctional Flutter image widget. Supports placeholders, error widgets and image transformers with fading.</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-button detail-tab-readme-title -active">Readme</li><li class="detail-tab tab-link detail-tab-changelog-title"><a href="/packages/octo_image/changelog" role="button">Changelog</a></li><li class="detail-tab tab-link detail-tab-example-title"><a href="/packages/octo_image/example" role="button">Example</a></li><li class="detail-tab tab-link detail-tab-installing-title"><a href="/packages/octo_image/install" role="button">Installing</a></li><li class="detail-tab tab-link detail-tab-versions-title"><a href="/packages/octo_image/versions" role="button">Versions</a></li><li class="detail-tab tab-link detail-tab-analysis-title"><a href="/packages/octo_image/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-readme-content -active markdown-body"><h1 id="octoimage" class="hash-header">OctoImage <a href="#octoimage" class="hash-link">#</a></h1> <p><a href="https://pub.dartlang.org/packages/octo_image" rel="ugc"><img src="https://img.shields.io/pub/v/octo_image.svg" alt="pub package"></a> <a href="https://app.bitrise.io/app/151357c29b430916" rel="ugc"><img src="https://app.bitrise.io/app/151357c29b430916/status.svg?token=U1ggYfh_wrBR0l5elPwryQ&branch=master" alt="Build Status"></a> <a href="https://codecov.io/gh/Baseflow/octo_image" rel="ugc"><img src="https://codecov.io/gh/Baseflow/octo_image/branch/master/graph/badge.svg" alt="codecov"></a></p> <p>An image library for showing placeholders, error widgets and transform your image.</p> <p>Recommended using with <a href="https://pub.dev/packages/cached_network_image">CachedNetworkImage</a> version 2.2.0 or newer.</p> <img src="https://raw.githubusercontent.com/Baseflow/octo_image/develop/resources/set-demo.gif"> <h2 id="getting-started" class="hash-header">Getting Started <a href="#getting-started" class="hash-link">#</a></h2> <p>The OctoImage widget needs an <a href="#imageProviders">ImageProvider</a> to show the image. You can either supply the widget with a <a href="#placeholders-and-progress-indicators">placeholder or progress indicator</a>, an <a href="#image-builders">ImageBuilder</a> and/or an <a href="#error-widgets">error widget</a>.</p> <p>However, what OctoImage makes is the use of <a href="#octosets">OctoSets</a>. OctoSets are predefined combinations of placeholders, imagebuilders and error widgets.</p> <p>So, either set the all the components yourself:</p> <pre><code class="language-dart">OctoImage( image: CachedNetworkImageProvider( 'https://blurha.sh/assets/images/img1.jpg'), placeholderBuilder: OctoPlaceholder.blurHash( 'LEHV6nWB2yk8pyo0adR*.7kCMdnj', ), errorBuilder: OctoError.icon(color: Colors.red), fit: BoxFit.cover, ); </code></pre> <p>Or use an OctoSet:</p> <pre><code class="language-dart">OctoImage.fromSet( fit: BoxFit.cover, image: CachedNetworkImageProvider( 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Macaca_nigra_self-portrait_large.jpg/1024px-Macaca_nigra_self-portrait_large.jpg', ), octoSet: OctoSet.circleAvatar( backgroundColor: Colors.red, text: Text("M"), ), ); </code></pre> <p>The CircleAvatar set shows a colored circle with the text inside during loading and when the image failed loading. When the image loads it animates to the image clipped as a circle.</p> <h2 id="imageproviders" class="hash-header">ImageProviders <a href="#imageproviders" class="hash-link">#</a></h2> <p>The recommended one is CachedNetworkImageProvider, as that supports the progress indicator, error and caching. It also works on Android, iOS, web and macOS, although without caching on the web. Make sure you use at least version 2.2.0.</p> <p>The second best is NetworkImage, but any ImageProvider works in theory. However, for some ImageProviders (such as MemoryImage) it doesn't make sense to use OctoImage.</p> <h2 id="placeholders-and-progress-indicators" class="hash-header">Placeholders and progress indicators <a href="#placeholders-and-progress-indicators" class="hash-link">#</a></h2> <p>It would be best if you used either a placeholder or a progress indicator, but not both. Placeholders are only building once the image starts loading, but progress indicators are rebuilt every time new progress information is received. So if you don't use that progress indication, for example, with a static image, you should use a placeholder.</p> <p>The most simple progress indicators use a CircularProgressIndicator.</p> <pre><code class="language-dart">OctoImage( image: image, progressIndicatorBuilder: (context) => const CircularProgressIndicator(), ), </code></pre> <pre><code class="language-dart">OctoImage( image: image, progressIndicatorBuilder: (context, progress) { double value; if (progress != null && progress.expectedTotalBytes != null) { value = progress.cumulativeBytesLoaded / progress.expectedTotalBytes; } return CircularProgressIndicator(value: value); }, ), </code></pre> <p>However, because these are used so often, we prebuild these widgets for you. Just use <code>OctoProgressIndicator.circularProgressIndicator()</code></p> <pre><code class="language-dart">OctoImage( image: image, progressIndicatorBuilder: OctoProgressIndicator.circularProgressIndicator(), ), </code></pre> <p>All included placeholders and progress indicators:</p> <table> <thead> <tr> <th><strong>OctoPlaceholder</strong></th> <th><strong>Explanation</strong></th> </tr> </thead> <tbody> <tr> <td>blurHash</td> <td>Shows a <a href="https://blurha.sh/" rel="ugc">BlurHash</a> image</td> </tr> <tr> <td>circleAvatar</td> <td>Shows a colored circle with a text</td> </tr> <tr> <td>circularProgressIndicator</td> <td>Shows a circularProgressIndicator with indeterminate progress.</td> </tr> <tr> <td>frame</td> <td>Shows the Flutter Placeholder</td> </tr> </tbody> </table> <table> <thead> <tr> <th><strong>OctoProgressIndicator</strong></th> <th><strong>Explanation</strong></th> </tr> </thead> <tbody> <tr> <td>circularProgressIndicator</td> <td>Shows a simple CircularProgressIndicator</td> </tr> </tbody> </table> <h2 id="error-widgets" class="hash-header">Error widgets <a href="#error-widgets" class="hash-link">#</a></h2> <p>Error widgets are shown when the ImageProvider throws an error because the image failed loading. You can build a custom widget, or use the prebuild widgets:</p> <pre><code class="language-dart">OctoImage( image: image, errorBuilder: (context, error, stacktrace) => const Icon(Icons.error), ); </code></pre> <pre><code class="language-dart">OctoImage( image: image, errorBuilder: OctoError.icon(), ), </code></pre> <p>All included error widgets are:</p> <table> <thead> <tr> <th><strong>OctoError</strong></th> <th><strong>Explanation</strong></th> </tr> </thead> <tbody> <tr> <td>blurHash</td> <td>Shows a BlurHash placeholder with an error icon.</td> </tr> <tr> <td>circleAvatar</td> <td>Shows a colored circle with a text</td> </tr> <tr> <td>icon</td> <td>Shows an icon, default to Icons.error</td> </tr> <tr> <td>placeholderWithErrorIcon</td> <td>Shows any placeholder with an icon op top.</td> </tr> </tbody> </table> <h2 id="image-builders" class="hash-header">Image builders <a href="#image-builders" class="hash-link">#</a></h2> <p>Image builders can be used to adapt the image before it is shown. For example the circleAvatar clips the image in a circle, but you could also add an overlay or anything else.</p> <p>The builder function supplies a context and a child. The child is the image widget that is rendered.</p> <p>An example that shows the image with 50% opacity:</p> <pre><code class="language-dart">OctoImage( image: image, imageBuilder: (context, child) => Opacity( opacity: 0.5, child: child, ), ), </code></pre> <p>A prebuild image transformer that clips the image as a circle:</p> <pre><code class="language-dart">OctoImage( image: image, imageBuilder: OctoImageTransformer.circleAvatar(), ), </code></pre> <p>All included image transformers are:</p> <table> <thead> <tr> <th><strong>OctoImageTransformer</strong></th> <th><strong>Explanation</strong></th> </tr> </thead> <tbody> <tr> <td>circleAvatar</td> <td>Clips the image in a circle</td> </tr> </tbody> </table> <h2 id="octosets" class="hash-header">OctoSets <a href="#octosets" class="hash-link">#</a></h2> <p>You get the most out of OctoImage when you use OctoSets. These sets contain a combination of a placeholder or progress indicator, an image builder and/or an error widget builder. It always contains at least a placeholder or progress indicator and an error widget.</p> <p>You can use them with OctoImage.fromSet:</p> <pre><code class="language-dart">OctoImage.fromSet( image: image, octoSet: OctoSet.circleAvatar(backgroundColor: Colors.red, text: Text("M")), ), </code></pre> <p>All included OctoSets are:</p> <table> <thead> <tr> <th><strong>OctoSet</strong></th> <th><strong>Explanation</strong></th> </tr> </thead> <tbody> <tr> <td>circleAvatar</td> <td>Shows a colored circle with text during load and error. Clips the image after successful load.</td> </tr> <tr> <td>circularIndicatorAndIcon</td> <td>Shows a circularProgressIndicator with or without progress and an icon on error.</td> </tr> </tbody> </table> <h3 id="blurhash" class="hash-header">Blurhash <a href="#blurhash" class="hash-link">#</a></h3> <p>You can easily create your own OctoSet though, for example if you want to use blurHash as a placeholder:</p> <pre><code class="language-dart">/// Simple set to show [OctoPlaceholder.circularProgressIndicator] as /// placeholder and [OctoError.icon] as error. OctoSet blurHash( String hash, { BoxFit? fit, Text? errorMessage, }) { return OctoSet( placeholderBuilder: blurHashPlaceholderBuilder(hash, fit: fit), errorBuilder: blurHashErrorBuilder(hash, fit: fit), ); } OctoPlaceholderBuilder blurHashPlaceholderBuilder(String hash, {BoxFit? fit}) { return (context) => SizedBox.expand( child: Image( image: BlurHashImage(hash), fit: fit ?? BoxFit.cover, ), ); } OctoErrorBuilder blurHashErrorBuilder( String hash, { BoxFit? fit, Text? message, IconData? icon, Color? iconColor, double? iconSize, }) { return OctoError.placeholderWithErrorIcon( blurHashPlaceholderBuilder(hash, fit: fit), message: message, icon: icon, iconColor: iconColor, iconSize: iconSize, ); } </code></pre> <h1 id="contribute" class="hash-header">Contribute <a href="#contribute" class="hash-link">#</a></h1> <p>If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), please carefully review our <a href="https://github.com/Baseflow/octo_image/blob/develop/CONTRIBUTING.md" rel="ugc">contribution guide</a> and send us your <a href="https://github.com/Baseflow/octo_image/pulls" rel="ugc">pull request</a>.</p> <p>PR's with any new prebuild widgets or sets are highly appreciated.</p> <h1 id="support" class="hash-header">Support <a href="#support" class="hash-link">#</a></h1> <ul> <li>Feel free to open an issue. Make sure to use one of the templates!</li> <li>Commercial support is available. Integration with your app or services, samples, feature request, etc. Email: <a href="mailto:hello@baseflow.com"></a><a href="mailto:hello@baseflow.com">hello@baseflow.com</a></li> <li>Powered by: <a href="https://baseflow.com" rel="ugc">baseflow.com</a></li> </ul> </section></div></div></div><aside class="detail-info-box"><a class="packages-scores" href="/packages/octo_image/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">737</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">160</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">points</div></div><div class="packages-score packages-score-downloads" title="Number of downloads of this package during the past 30 days"><div class="packages-score-value -has-value"><span class="packages-score-value-number">1.85M</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">downloads</div></div></a><h3 class="title">Publisher</h3><p><a href="/publishers/baseflow.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>baseflow.com</a></p><h3 class="title">Weekly Downloads</h3><div id="-weekly-downloads-sparkline" class="weekly-downloads-sparkline" data-widget="weekly-sparkline" data-weekly-sparkline-points="gHLwZ0xXBgAoCQcAk/YGACsZBwDCogYA0ngHACj6BgAdGAcAUtEGAJrjBgDRNwcA06YGAPP6BQBEwwMAgPMDAFcsBgDPOwcA7B0HAOYQBwDYHAcAyTsHAPmgBgBdTAYAxJYGAOJ+BgAP7wYA+D8GABpxBgDo2AUAL7IGAHlfBgCWPQYA8SMGAC7pBQAkEAYAlr0FAJZOBQD1CwUANOgEAOClBAC6ZAUAtvcEABPkBABbwgQAm5MEAJcYBQBF7gQAglwEAGEbBAD55wQANsoEAKNsBAA="></div><h3 class="title pkg-infobox-metadata">Metadata</h3><p>A multifunctional Flutter image widget. Supports placeholders, error widgets and image transformers with fading.</p><p><a class="link" href="https://github.com/Baseflow/octo_image" rel="ugc">Repository (GitHub)</a><br/><a class="link" href="https://github.com/Baseflow/octo_image/blob/develop/CONTRIBUTING.md" rel="ugc">Contributing</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="/documentation/octo_image/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/octo_image/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="https://api.flutter.dev/">flutter</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Aocto_image" rel="nofollow">Packages that depend on octo_image</a></p></aside></div><script type="application/ld+json">{"@context":"http\u003a\u002f\u002fschema.org","@type":"SoftwareSourceCode","name":"octo\u005fimage","version":"2.1.0","description":"octo\u005fimage - A multifunctional Flutter image widget. Supports placeholders, error widgets and image transformers with fading.","url":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002focto\u005fimage","dateCreated":"2020-05-08T12\u003a52\u003a36.920153Z","dateModified":"2024-08-01T17\u003a30\u003a56.265130Z","programmingLanguage":"Dart","image":"https\u003a\u002f\u002fpub.dev\u002fstatic\u002fimg\u002fpub-dev-icon-cover-image.png","license":"https\u003a\u002f\u002fpub.dev\u002fpackages\u002focto\u005fimage\u002flicense"}</script></div><div class="detail-metadata"><h3 class="detail-metadata-title"><span class="detail-metadata-toggle">←</span> Metadata</h3><div class="detail-info-box"><a class="packages-scores" href="/packages/octo_image/score"><div class="packages-score packages-score-like"><div class="packages-score-value -has-value"><span class="packages-score-value-number">737</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">likes</div></div><div class="packages-score packages-score-health"><div class="packages-score-value -has-value"><span class="packages-score-value-number">160</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">points</div></div><div class="packages-score packages-score-downloads" title="Number of downloads of this package during the past 30 days"><div class="packages-score-value -has-value"><span class="packages-score-value-number">1.85M</span><span class="packages-score-value-sign"></span></div><div class="packages-score-label">downloads</div></div></a><h3 class="title">Publisher</h3><p><a href="/publishers/baseflow.com"><img class="-pub-publisher-shield filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-verified.svg" alt="verified publisher" width="14" height="14" title="Published by a pub.dev verified publisher"/>baseflow.com</a></p><h3 class="title">Weekly Downloads</h3><div id="-weekly-downloads-sparkline" class="weekly-downloads-sparkline" data-widget="weekly-sparkline" data-weekly-sparkline-points="gHLwZ0xXBgAoCQcAk/YGACsZBwDCogYA0ngHACj6BgAdGAcAUtEGAJrjBgDRNwcA06YGAPP6BQBEwwMAgPMDAFcsBgDPOwcA7B0HAOYQBwDYHAcAyTsHAPmgBgBdTAYAxJYGAOJ+BgAP7wYA+D8GABpxBgDo2AUAL7IGAHlfBgCWPQYA8SMGAC7pBQAkEAYAlr0FAJZOBQD1CwUANOgEAOClBAC6ZAUAtvcEABPkBABbwgQAm5MEAJcYBQBF7gQAglwEAGEbBAD55wQANsoEAKNsBAA="></div><h3 class="title pkg-infobox-metadata">Metadata</h3><p>A multifunctional Flutter image widget. Supports placeholders, error widgets and image transformers with fading.</p><p><a class="link" href="https://github.com/Baseflow/octo_image" rel="ugc">Repository (GitHub)</a><br/><a class="link" href="https://github.com/Baseflow/octo_image/blob/develop/CONTRIBUTING.md" rel="ugc">Contributing</a><br/></p><h3 class="title">Documentation</h3><p><a class="link" href="/documentation/octo_image/latest/">API reference</a><br/></p><h3 class="title">License</h3><p><img class="inline-icon-img filter-invert-on-dark" src="/static/hash-j60jq2j3/img/material-icon-balance.svg" alt="" width="14" height="14" role="presentation"/>MIT (<a href="/packages/octo_image/license">license</a>)</p><h3 class="title">Dependencies</h3><p><a href="https://api.flutter.dev/">flutter</a></p><h3 class="title">More</h3><p><a href="/packages?q=dependency%3Aocto_image" rel="nofollow">Packages that depend on octo_image</a></p></div><p class="detail-lead-back"><a class="detail-metadata-toggle">Back</a></p></div><div id="-screenshot-carousel" class="carousel"><fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-j60jq2j3/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/></fab><div id="-image-container" class="image-container"></div><fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0"><div class="mdc-fab__ripple"></div><img class="mdc-fab__icon" src="/static/hash-j60jq2j3/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/></fab><p id="-screenshot-description" class="screenshot-description"></p></div></main><footer class="site-footer"><a class="link" href="https://dart.dev/">Dart language</a><a class="link sep" href="/report?subject=package%3Aocto_image&url=https%3A%2F%2Fpub.dev%2Fpackages%2Focto_image">Report package</a><a class="link sep" href="/policy">Policy</a><a class="link sep" href="https://www.google.com/intl/en/policies/terms/">Terms</a><a class="link sep" href="https://developers.google.com/terms/">API Terms</a><a class="link sep" href="/security">Security</a><a class="link sep" href="https://www.google.com/intl/en/policies/privacy/">Privacy</a><a class="link sep" href="/help">Help</a><a class="link icon sep" href="/feed.atom"><img class="inline-icon" src="/static/hash-j60jq2j3/img/rss-feed-icon.svg" alt="RSS" width="20" height="20" title="RSS/atom feed"/></a><a class="link icon github_issue" href="https://github.com/dart-lang/pub-dev/issues/new"><img class="inline-icon" src="/static/hash-j60jq2j3/img/bug-report-white-96px.png" alt="bug report" width="20" height="20" title="Report an issue with this site"/></a></footer><script src="/static/hash-j60jq2j3/highlight/highlight-with-init.js" defer="defer"></script></body></html>