Implement PhotoView library to enable zoom on gesture

Modernism-in-Architecture · Mar 28, 2023 · ccfe79e · ccfe79e
1 parent 84918bf
commit ccfe79e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/lib/src/widgets/building_details/gallery_carousel.dart b/lib/src/widgets/building_details/gallery_carousel.dart
@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:photo_view/photo_view.dart';
+import 'package:photo_view/photo_view_gallery.dart';
 
 class GalleryCarousel extends StatefulWidget {
   const GalleryCarousel({Key? key, required this.galleryImages, required this.imageIndex}) : super(key: key);
@@ -32,26 +34,31 @@ class _GalleryCarouselState extends State<GalleryCarousel> {
                 padding: const EdgeInsets.fromLTRB(0, 40, 0, 0),
                 child:Row(
                   children: [
-                  IconButton(
-                    icon: const Icon(Icons.cancel, color: Colors.white),
-                    onPressed: () {Navigator.pop(context);}
-                  )],
+                    IconButton(
+                      icon: const Icon(Icons.cancel, color: Colors.white),
+                      onPressed: () {Navigator.pop(context);}
+                    )
+                  ],
                 )
             ),
             Expanded(
-              child: PageView.builder(
-                  itemCount: widget.galleryImages.length,
-                  pageSnapping: true,
-                  controller: _pageController,
-                  onPageChanged: (page) {
-                    setState(() {
-                      _activePage = page;
-                    });
-                  },
-                  itemBuilder: (context, pagePosition) {
-                      bool active = pagePosition == _activePage;
-                      return slider(widget.galleryImages, pagePosition, active);
-                  }
+              child: PhotoViewGallery.builder(
+                scrollPhysics: const BouncingScrollPhysics(),
+                builder: (BuildContext context, int index) {
+                  return PhotoViewGalleryPageOptions(
+                    imageProvider: NetworkImage(widget.galleryImages[index]),
+                    initialScale: PhotoViewComputedScale.contained * 0.9,
+                    minScale: PhotoViewComputedScale.contained * 0.8,
+                    maxScale: PhotoViewComputedScale.covered * 1.1,
+                  );
+                },
+                itemCount: widget.galleryImages.length,
+                pageController: _pageController,
+                onPageChanged: (page) {
+                  setState(() {
+                    _activePage = page;
+                  });
+                },
               )
             ),
             Padding(
@@ -67,19 +74,6 @@ class _GalleryCarouselState extends State<GalleryCarousel> {
   }
 }
 
-AnimatedContainer slider(images, pagePosition, active) {
-  double margin = active ? 10 : 20;
-
-  return AnimatedContainer(
-    duration: const Duration(milliseconds: 500),
-    curve: Curves.easeInOutCubic,
-    margin: EdgeInsets.all(margin),
-    decoration: BoxDecoration(
-        image: DecorationImage(image: NetworkImage(images[pagePosition]))
-    ),
-  );
-}
-
 List<Widget> indicators(imagesLength, currentIndex) {
   return List<Widget>.generate(imagesLength, (index) {
     return Expanded(

diff --git a/pubspec.lock b/pubspec.lock
@@ -376,6 +376,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.3"
+  photo_view:
+    dependency: "direct main"
+    description:
+      name: photo_view
+      sha256: "8036802a00bae2a78fc197af8a158e3e2f7b500561ed23b4c458107685e645bb"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.14.0"
   platform:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -42,6 +42,7 @@ dependencies:
   latlong2: ^0.8.1
   flutter_share_me: ^1.4.0
   path_provider: ^2.0.11
+  photo_view: ^0.14.0
 
 dev_dependencies:
   flutter_test: