{"id":27599988,"url":"https://github.com/renancaraujo/photo_view","last_synced_at":"2026-01-09T23:03:13.827Z","repository":{"id":39743244,"uuid":"131659232","full_name":"bluefireteam/photo_view","owner":"bluefireteam","description":"📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.","archived":false,"fork":false,"pushed_at":"2024-09-04T06:46:42.000Z","size":59208,"stargazers_count":1953,"open_issues_count":112,"forks_count":556,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-04-18T17:07:43.282Z","etag":null,"topics":["flutter","gallery","hacktoberfest","images","photos","photoview","pinch-to-zoom","rotate","widget","zoom","zoomable"],"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/bluefireteam.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2018-05-01T00:11:28.000Z","updated_at":"2025-04-16T05:18:00.000Z","dependencies_parsed_at":"2023-09-23T11:03:55.423Z","dependency_job_id":"db65207a-5c3a-4b8d-b581-9bcd6bf1044b","html_url":"https://github.com/bluefireteam/photo_view","commit_stats":{"total_commits":323,"total_committers":50,"mean_commits":6.46,"dds":0.6501547987616099,"last_synced_commit":"a13ca2fc387a3fb1276126959e092c44d0029987"},"previous_names":["renancaraujo/photo_view","fireslime/photo_view"],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefireteam%2Fphoto_view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefireteam%2Fphoto_view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefireteam%2Fphoto_view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bluefireteam%2Fphoto_view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bluefireteam","download_url":"https://codeload.github.com/bluefireteam/photo_view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250275397,"owners_count":21403674,"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":["flutter","gallery","hacktoberfest","images","photos","photoview","pinch-to-zoom","rotate","widget","zoom","zoomable"],"created_at":"2025-04-22T16:01:13.210Z","updated_at":"2026-01-09T23:03:13.793Z","avatar_url":"https://github.com/bluefireteam.png","language":"Dart","funding_links":["https://www.patreon.com/fireslime"],"categories":["组件","Uncategorized","Components","Image [🔝](#readme)"],"sub_categories":["图片","Uncategorized","Image"],"readme":"# Flutter Photo View \n\n[![Tests status](https://img.shields.io/github/actions/workflow/status/bluefireteam/photo_view/ci.yml?branch=master)](https://github.com/bluefireteam/photo_view/actions) [![Pub](https://img.shields.io/pub/v/photo_view.svg?style=popout)](https://pub.dartlang.org/packages/photo_view) [![Chat](https://img.shields.io/discord/509714518008528896)](https://discord.gg/pxrBmy4)\n\nA simple zoomable image/content widget for Flutter.\n\nPhotoView enables images to become able to zoom and pan with user gestures such as pinch, rotate and drag.\n\nIt also can show any widget instead of an image, such as Container, Text or a SVG. \n\nEven though being super simple to use, PhotoView is extremely customizable though its options and the controllers. \n\n\n## Installation\n\nAdd `photo_view` as a dependency in your pubspec.yaml file.\n\nImport Photo View:\n```dart\nimport 'package:photo_view/photo_view.dart';\n```\n\n## Docs \u0026 API\n\nThe [API Docs](https://pub.dartlang.org/documentation/photo_view/latest/photo_view/photo_view-library.html) some detailed information about how to use PhotoView.\n\n\nIf you want to see it in practice, check the [example app](https://github.com/bluefireteam/photo_view/tree/master/example/lib) that explores most of Photo View's use cases or download the latest version apk on the [releases page](https://github.com/bluefireteam/photo_view/releases)\n \n\n## (Very) Basic usage\n\nGiven a `ImageProvider imageProvider` (such as [AssetImage](https://docs.flutter.io/flutter/painting/AssetImage-class.html) or [NetworkImage](https://docs.flutter.io/flutter/painting/NetworkImage-class.html)):\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return Container(\n    child: PhotoView(\n      imageProvider: AssetImage(\"assets/large-image.jpg\"),\n    )\n  );\n}\n```\n\nResult: \n\n![In action](https://user-images.githubusercontent.com/6718144/56463745-45ec0380-63b0-11e9-8e56-0dba5deabb1a.gif)\n\n\nRead more about the `PhotoView` widget [here](https://pub.dartlang.org/documentation/photo_view/latest/photo_view/PhotoView-class.html).\n\n\n## Gallery\n\nTo show several images and let user change between them, use `PhotoViewGallery`.\n\nRead more about the gallery [here](https://pub.dartlang.org/documentation/photo_view/latest/photo_view_gallery/PhotoViewGallery-class.html).\n\n```dart\nimport 'package:photo_view/photo_view.dart';\nimport 'package:photo_view/photo_view_gallery.dart';\n// ...\n\n\n@override\nWidget build(BuildContext context) {\n  return Container(\n    child: PhotoViewGallery.builder(\n      scrollPhysics: const BouncingScrollPhysics(),\n      builder: (BuildContext context, int index) {\n        return PhotoViewGalleryPageOptions(\n          imageProvider: AssetImage(widget.galleryItems[index].image),\n          initialScale: PhotoViewComputedScale.contained * 0.8,\n          heroAttributes: PhotoViewHeroAttributes(tag: galleryItems[index].id),\n        );\n      },\n      itemCount: galleryItems.length,\n      loadingBuilder: (context, event) =\u003e Center(\n        child: Container(\n          width: 20.0,\n          height: 20.0,\n          child: CircularProgressIndicator(\n            value: event == null\n                ? 0\n                : event.cumulativeBytesLoaded / event.expectedTotalBytes,\n          ),\n        ),\n      ),\n      backgroundDecoration: widget.backgroundDecoration,\n      pageController: widget.pageController,\n      onPageChanged: onPageChanged,\n    )\n  );\n}\n```\n\nGallery sample in the example app: \n\n![In action](https://user-images.githubusercontent.com/6718144/56463769-e93d1880-63b0-11e9-8586-55827c95b89c.gif)\n\nSee the code [here](https://github.com/bluefireteam/photo_view/blob/master/example/lib/screens/examples/gallery/gallery_example.dart).\n\n\n\n## Usage with controllers\n\nWhen you need to interact with PhotoView's internal state values, `PhotoViewController` and `PhotoViewScaleStateController` are the way to.\n\nControllers, when specified to PhotoView widget, enables the author(you) to listen for state updates through a `Stream` and change those values externally.\n\nRead more about controllers [here](https://pub.dartlang.org/documentation/photo_view/latest/photo_view/PhotoView-class.html#controllers).\n\nIn the example app, we can see what can be achieved with controllers: \n\n![In action](https://user-images.githubusercontent.com/6718144/56464051-3328fd00-63b7-11e9-9c4d-73b04f72a81e.gif)\n\n### More screenshots\n\n\n| **Custom background, \u003cbr\u003esmall image \u003cbr\u003eand custom alignment** | **Limited scale** | **Hero animation** |\n| ------------- | ------------- | ------------- |\n| ![In action](https://user-images.githubusercontent.com/6718144/56464128-ff4ed700-63b8-11e9-802e-a933b3e79ea3.gif) | ![In action](https://user-images.githubusercontent.com/6718144/56464182-23f77e80-63ba-11e9-87a9-4838ef20af7e.gif) | ![In action](https://user-images.githubusercontent.com/6718144/56464202-9700f500-63ba-11e9-9f47-14e8bf441958.gif) |\n| **Part of the screen** | **Custom child** |\n| ![In action](https://user-images.githubusercontent.com/6718144/56464215-d92a3680-63ba-11e9-9c37-d4796e992123.gif) | ![In action](https://user-images.githubusercontent.com/6718144/56464225-1b537800-63bb-11e9-9c5b-ea8632c99969.gif) |\n\n## Support us\n\nYou can support us by becoming a patron on Patreon, any support is much appreciated.\n\n[![Patreon](https://c5.patreon.com/external/logo/become_a_patron_button.png)](https://www.patreon.com/fireslime)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenancaraujo%2Fphoto_view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frenancaraujo%2Fphoto_view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frenancaraujo%2Fphoto_view/lists"}