Extract ZoomableImage to separate class; add it for artist page

lib/ui/cached_image.dart

@@ -2,6 +2,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:palette_generator/palette_generator.dart';
 import 'package:cached_network_image/cached_network_image.dart';
+import 'package:photo_view/photo_view.dart';
 
 ImagesDatabase imagesDatabase = ImagesDatabase();
 
@@ -78,3 +79,61 @@ class _CachedImageState extends State<CachedImage> {
     );
   }
 }
+
+class ZoomableImage extends StatefulWidget {
+  final String url;
+  final bool rounded;
+  final double width;
+
+  ZoomableImage({@required this.url, this.rounded = false, this.width});
+
+  @override
+  _ZoomableImageState createState() => _ZoomableImageState();
+}
+
+class _ZoomableImageState extends State<ZoomableImage> {
+  BuildContext ctx;
+  PhotoViewController controller;
+  bool photoViewOpened = false;
+
+  @override
+  void initState() {
+    super.initState();
+    controller = PhotoViewController()
+      ..outputStateStream.listen(listener);
+  }
+
+  // Listener of PhotoView scale changes. Used for closing PhotoView by pinch-in
+  void listener(PhotoViewControllerValue value) {
+    if (value.scale < 0.16 && photoViewOpened) {
+      Navigator.pop(ctx);
+      photoViewOpened = false; // to avoid multiple pop() when picture are being scaled out too slowly
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    ctx = context;
+    return FlatButton(
+        child: CachedImage(
+          url: widget.url,
+          rounded: widget.rounded,
+          width: widget.width,
+          fullThumb: true,
+        ),
+        onPressed: () {
+          Navigator.of(context).push(PageRouteBuilder(
+              opaque: false, // transparent background
+              pageBuilder: (context, a, b) {
+                photoViewOpened = true;
+                return PhotoView(
+                    imageProvider: CachedNetworkImageProvider(widget.url),
+                    maxScale: 8.0,
+                    minScale: 0.2,
+                    controller: controller,
+                    backgroundDecoration:
+                        BoxDecoration(color: Color.fromARGB(0x90, 0, 0, 0)));
+              }));
+        });
+  }
+}

lib/ui/details_screens.dart

@@ -303,11 +303,10 @@ class ArtistDetails extends StatelessWidget {
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                   children: <Widget>[
-                    CachedImage(
+                    ZoomableImage(
                       url: artist.picture.full,
                       width: MediaQuery.of(context).size.width / 2 - 8,
                       rounded: true,
-                      fullThumb: true,
                     ),
                     Container(
                       width: MediaQuery.of(context).size.width / 2 - 8,

lib/ui/player_screen.dart

@@ -1,4 +1,3 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:audio_service/audio_service.dart';
 import 'package:flutter/services.dart';
@@ -15,7 +14,6 @@ import 'package:freezer/ui/tiles.dart';
 import 'package:async/async.dart';
 import 'package:just_audio/just_audio.dart';
 import 'package:marquee/marquee.dart';
-import 'package:photo_view/photo_view.dart';
 
 import 'cached_image.dart';
 import '../api/definitions.dart';
@@ -431,8 +429,6 @@ class _BigAlbumArtState extends State<BigAlbumArt> {
   );
   StreamSubscription _currentItemSub;
   bool _animationLock = true;
-  PhotoViewController controller;
-  bool photoViewOpened = false;
 
   @override
   void initState() {
@@ -442,8 +438,6 @@ class _BigAlbumArtState extends State<BigAlbumArt> {
       _animationLock = false;
     });
     super.initState();
-    controller = PhotoViewController()
-      ..outputStateStream.listen(listener);
   }
 
   @override
@@ -453,14 +447,6 @@ class _BigAlbumArtState extends State<BigAlbumArt> {
     super.dispose();
   }
 
-  // Listener of PhotoView scale changes. Used for closing PhotoView by pinch-in
-  void listener(PhotoViewControllerValue value){
-    if (value.scale < 0.16 && photoViewOpened) {
-      Navigator.pop(context);
-      photoViewOpened = false;  // to avoid multiple pop() when picture are being scaled out too slowly
-    }
-  }
-
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
@@ -475,32 +461,7 @@ class _BigAlbumArtState extends State<BigAlbumArt> {
           if (_animationLock) return;
           AudioService.skipToQueueItem(AudioService.queue[index].id);
         },
-        children: List.generate(AudioService.queue.length, (i) {
+        children: List.generate(AudioService.queue.length, (i) => ZoomableImage(url: AudioService.queue[i].artUri)),
-          String artUri = AudioService.queue[i].artUri;
-          return FlatButton(
-              child: CachedImage(
-                url: artUri,
-                fullThumb: true,
-              ),
-              onPressed: () {
-                Navigator.of(context).push(PageRouteBuilder(
-                    opaque: false, // transparent background
-                    pageBuilder: (context, a, b) {
-                      if (AudioService.queue != null) {
-                        photoViewOpened = true;
-                        return PhotoView(
-                            imageProvider: CachedNetworkImageProvider(artUri),
-                            maxScale: 8.0,
-                            minScale: 0.2,
-                            controller: controller,
-                            backgroundDecoration: BoxDecoration(
-                                color: Color.fromARGB(0x90, 0, 0, 0)));
-                      } else {
-                        return null;
-                      }
-                    }));
-              });
-        }),
       ),
     );
   }