Extract ZoomableImage to separate class; add it for artist page

This commit is contained in:
kilowatt 2020-10-23 00:24:30 +03:00
parent e959827cdb
commit bdada46541
3 changed files with 61 additions and 42 deletions

View File

@ -2,6 +2,7 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:palette_generator/palette_generator.dart'; import 'package:palette_generator/palette_generator.dart';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:photo_view/photo_view.dart';
ImagesDatabase imagesDatabase = ImagesDatabase(); 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)));
}));
});
}
}

View File

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

View File

@ -1,4 +1,3 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:audio_service/audio_service.dart'; import 'package:audio_service/audio_service.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@ -15,7 +14,6 @@ import 'package:freezer/ui/tiles.dart';
import 'package:async/async.dart'; import 'package:async/async.dart';
import 'package:just_audio/just_audio.dart'; import 'package:just_audio/just_audio.dart';
import 'package:marquee/marquee.dart'; import 'package:marquee/marquee.dart';
import 'package:photo_view/photo_view.dart';
import 'cached_image.dart'; import 'cached_image.dart';
import '../api/definitions.dart'; import '../api/definitions.dart';
@ -431,8 +429,6 @@ class _BigAlbumArtState extends State<BigAlbumArt> {
); );
StreamSubscription _currentItemSub; StreamSubscription _currentItemSub;
bool _animationLock = true; bool _animationLock = true;
PhotoViewController controller;
bool photoViewOpened = false;
@override @override
void initState() { void initState() {
@ -442,8 +438,6 @@ class _BigAlbumArtState extends State<BigAlbumArt> {
_animationLock = false; _animationLock = false;
}); });
super.initState(); super.initState();
controller = PhotoViewController()
..outputStateStream.listen(listener);
} }
@override @override
@ -453,14 +447,6 @@ class _BigAlbumArtState extends State<BigAlbumArt> {
super.dispose(); 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return GestureDetector( return GestureDetector(
@ -475,32 +461,7 @@ class _BigAlbumArtState extends State<BigAlbumArt> {
if (_animationLock) return; if (_animationLock) return;
AudioService.skipToQueueItem(AudioService.queue[index].id); 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;
}
}));
});
}),
), ),
); );
} }