fullscreen: reimplemented PhotoViewGallery to force rebuild after rotation

This commit is contained in:
Thibault Deckers 2020-02-26 15:42:47 +09:00
parent a51ab4c07a
commit 4b9625afea
4 changed files with 62 additions and 47 deletions

View file

@ -1,12 +1,9 @@
import 'dart:io';
import 'package:aves/model/image_file_service.dart'; import 'package:aves/model/image_file_service.dart';
import 'package:aves/model/image_metadata.dart'; import 'package:aves/model/image_metadata.dart';
import 'package:aves/model/metadata_service.dart'; import 'package:aves/model/metadata_service.dart';
import 'package:aves/utils/change_notifier.dart'; import 'package:aves/utils/change_notifier.dart';
import 'package:aves/utils/time_utils.dart'; import 'package:aves/utils/time_utils.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:geocoder/geocoder.dart'; import 'package:geocoder/geocoder.dart';
import 'package:path/path.dart'; import 'package:path/path.dart';
import 'package:tuple/tuple.dart'; import 'package:tuple/tuple.dart';
@ -232,8 +229,6 @@ class ImageEntry {
final orientationDegrees = newFields['orientationDegrees']; final orientationDegrees = newFields['orientationDegrees'];
if (orientationDegrees is int) this.orientationDegrees = orientationDegrees; if (orientationDegrees is int) this.orientationDegrees = orientationDegrees;
// TODO TLAD move cache eviction out of ImageEntry and into ImagePage together with `imageChangeNotifier` handling
await FileImage(File(this.path)).evict();
imageChangeNotifier.notifyListeners(); imageChangeNotifier.notifyListeners();
return true; return true;
} }

View file

@ -86,7 +86,7 @@ class FullscreenActionDelegate {
Future<void> _rotate(BuildContext context, ImageEntry entry, {@required bool clockwise}) async { Future<void> _rotate(BuildContext context, ImageEntry entry, {@required bool clockwise}) async {
final success = await entry.rotate(clockwise: clockwise); final success = await entry.rotate(clockwise: clockwise);
_showFeedback(context, success ? 'Done!' : 'Failed'); if (!success) _showFeedback(context, 'Failed');
} }
Future<void> _showDeleteDialog(BuildContext context, ImageEntry entry) async { Future<void> _showDeleteDialog(BuildContext context, ImageEntry entry) async {

View file

@ -322,16 +322,24 @@ class _FullscreenVerticalPageViewState extends State<FullscreenVerticalPageView>
void _registerWidget(FullscreenVerticalPageView widget) { void _registerWidget(FullscreenVerticalPageView widget) {
widget.verticalPager.addListener(_onVerticalPageControllerChange); widget.verticalPager.addListener(_onVerticalPageControllerChange);
widget.entry.imageChangeNotifier.addListener(_onImageChange);
} }
void _unregisterWidget(FullscreenVerticalPageView widget) { void _unregisterWidget(FullscreenVerticalPageView widget) {
widget.verticalPager.removeListener(_onVerticalPageControllerChange); widget.verticalPager.removeListener(_onVerticalPageControllerChange);
widget.entry.imageChangeNotifier.removeListener(_onImageChange);
} }
void _onVerticalPageControllerChange() { void _onVerticalPageControllerChange() {
_backgroundColorNotifier.value = _backgroundColorNotifier.value.withOpacity(min(1.0, widget.verticalPager.page)); _backgroundColorNotifier.value = _backgroundColorNotifier.value.withOpacity(min(1.0, widget.verticalPager.page));
} }
void _onImageChange() async {
await FileImage(File(widget.entry.path)).evict();
// rebuild to refresh the Image inside ImagePage
setState(() {});
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ValueListenableBuilder( return ValueListenableBuilder(

View file

@ -5,7 +5,6 @@ import 'package:aves/model/image_entry.dart';
import 'package:aves/widgets/fullscreen/video.dart'; import 'package:aves/widgets/fullscreen/video.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart'; import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'package:tuple/tuple.dart'; import 'package:tuple/tuple.dart';
import 'package:video_player/video_player.dart'; import 'package:video_player/video_player.dart';
@ -36,51 +35,64 @@ class ImagePageState extends State<ImagePage> with AutomaticKeepAliveClientMixin
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
super.build(context); super.build(context);
return PhotoViewGallery.builder(
itemCount: entries.length, const scrollDirection = Axis.horizontal;
builder: (context, index) { const backgroundDecoration = BoxDecoration(color: Colors.transparent);
final entry = entries[index]; final scaleStateChangedCallback = widget.onScaleChanged;
if (entry.isVideo) {
final videoController = widget.videoControllers.firstWhere((kv) => kv.item1 == entry.path, orElse: () => null)?.item2; return PhotoViewGestureDetectorScope(
return PhotoViewGalleryPageOptions.customChild( axis: scrollDirection,
child: videoController != null child: PageView.builder(
? AvesVideo( controller: widget.pageController,
entry: entry, onPageChanged: widget.onPageChanged,
controller: videoController, itemCount: entries.length,
) itemBuilder: (context, index) {
: const SizedBox(), final entry = entries[index];
// no hero as most videos fullscreen image is different from its thumbnail if (entry.isVideo) {
final videoController = widget.videoControllers.firstWhere((kv) => kv.item1 == entry.path, orElse: () => null)?.item2;
return PhotoView.customChild(
child: videoController != null
? AvesVideo(
entry: entry,
controller: videoController,
)
: const SizedBox(),
backgroundDecoration: backgroundDecoration,
// no hero as most videos fullscreen image is different from its thumbnail
scaleStateChangedCallback: scaleStateChangedCallback,
minScale: PhotoViewComputedScale.contained,
initialScale: PhotoViewComputedScale.contained,
onTapUp: (tapContext, details, value) => widget.onTap?.call(),
);
}
return PhotoView(
// key includes size and orientation to refresh when the image is rotated
key: ValueKey('${entry.orientationDegrees}_${entry.width}_${entry.height}_${entry.path}'),
imageProvider: FileImage(File(entry.path)),
loadingBuilder: (context, event) => const Center(
child: SizedBox(
width: 64,
height: 64,
child: CircularProgressIndicator(
strokeWidth: 2,
),
),
),
backgroundDecoration: backgroundDecoration,
heroAttributes: PhotoViewHeroAttributes(
tag: entry.uri,
transitionOnUserGestures: true,
),
scaleStateChangedCallback: scaleStateChangedCallback,
minScale: PhotoViewComputedScale.contained, minScale: PhotoViewComputedScale.contained,
initialScale: PhotoViewComputedScale.contained, initialScale: PhotoViewComputedScale.contained,
onTapUp: (tapContext, details, value) => widget.onTap?.call(), onTapUp: (tapContext, details, value) => widget.onTap?.call(),
filterQuality: FilterQuality.low,
); );
} },
return PhotoViewGalleryPageOptions( scrollDirection: scrollDirection,
imageProvider: FileImage(File(entry.path)), physics: const BouncingScrollPhysics(),
heroAttributes: PhotoViewHeroAttributes(
tag: entry.uri,
transitionOnUserGestures: true,
),
minScale: PhotoViewComputedScale.contained,
initialScale: PhotoViewComputedScale.contained,
onTapUp: (tapContext, details, value) => widget.onTap?.call(),
filterQuality: FilterQuality.low,
);
},
loadingBuilder: (context, event) => const Center(
child: SizedBox(
width: 64,
height: 64,
child: CircularProgressIndicator(
strokeWidth: 2,
),
),
), ),
backgroundDecoration: BoxDecoration(color: Colors.transparent),
pageController: widget.pageController,
onPageChanged: widget.onPageChanged,
scaleStateChangedCallback: widget.onScaleChanged,
scrollPhysics: const BouncingScrollPhysics(),
); );
} }