Fabio/aves
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

viewer: changed multipage overlay shading

Browse source
This commit is contained in:
Thibault Deckers 2021-02-04 18:26:14 +09:00
parent 8fa3f18aef
commit b1fc6c2460
4 changed files with 55 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
lib/theme/durations.dart
View file

@ -30,10 +30,11 @@ class Durations {
static const filterRowExpandAnimation = Duration(milliseconds: 300); static const filterRowExpandAnimation = Duration(milliseconds: 300);
// viewer animations // viewer animations
static const viewerPageAnimation = Duration(milliseconds: 300); static const viewerVerticalPageScrollAnimation = Duration(milliseconds: 300);
static const viewerOverlayAnimation = Duration(milliseconds: 200); static const viewerOverlayAnimation = Duration(milliseconds: 200);
static const viewerOverlayChangeAnimation = Duration(milliseconds: 150); static const viewerOverlayChangeAnimation = Duration(milliseconds: 150);
static const viewerOverlayPageChooserAnimation = Duration(milliseconds: 200); static const viewerOverlayPageScrollAnimation = Duration(milliseconds: 200);
static const viewerOverlayPageShadeAnimation = Duration(milliseconds: 150);
// info animations // info animations
static const mapStyleSwitchAnimation = Duration(milliseconds: 300); static const mapStyleSwitchAnimation = Duration(milliseconds: 300);

2
lib/widgets/viewer/entry_viewer_stack.dart
View file

@ -358,7 +358,7 @@ class _EntryViewerStackState extends State<EntryViewerStack> with SingleTickerPr
Future<void> _goToVerticalPage(int page) { Future<void> _goToVerticalPage(int page) {
return _verticalPager.animateToPage( return _verticalPager.animateToPage(
page, page,
duration: Durations.viewerPageAnimation, duration: Durations.viewerVerticalPageScrollAnimation,
curve: Curves.easeInOut, curve: Curves.easeInOut,
); );
} }

2
lib/widgets/viewer/info/info_page.dart
View file

@ -107,7 +107,7 @@ class _InfoPageState extends State<InfoPage> {
BackUpNotification().dispatch(context); BackUpNotification().dispatch(context);
_scrollController.animateTo( _scrollController.animateTo(
0, 0,
duration: Durations.viewerPageAnimation, duration: Durations.viewerVerticalPageScrollAnimation,
curve: Curves.easeInOut, curve: Curves.easeInOut,
); );
} }

130
lib/widgets/viewer/overlay/multipage.dart
View file

@ -79,13 +79,6 @@ class _MultiPageOverlayState extends State<MultiPageOverlay> {
final marginWidth = max(0, (availableWidth - extent) / 2 - separatorWidth); final marginWidth = max(0, (availableWidth - extent) / 2 - separatorWidth);
final horizontalMargin = SizedBox(width: marginWidth); final horizontalMargin = SizedBox(width: marginWidth);
final separator = SizedBox(width: separatorWidth); final separator = SizedBox(width: separatorWidth);
final shade = IgnorePointer(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black38,
),
),
);
return FutureBuilder<MultiPageInfo>( return FutureBuilder<MultiPageInfo>(
future: controller.info, future: controller.info,
@ -93,80 +86,57 @@ class _MultiPageOverlayState extends State<MultiPageOverlay> {
final multiPageInfo = snapshot.data; final multiPageInfo = snapshot.data;
if ((multiPageInfo?.pageCount ?? 0) <= 1) return SizedBox(); if ((multiPageInfo?.pageCount ?? 0) <= 1) return SizedBox();
if (multiPageInfo.uri != mainEntry.uri) return SizedBox(); if (multiPageInfo.uri != mainEntry.uri) return SizedBox();
return Container( return SizedBox(
height: extent + separatorWidth * 2, height: extent,
child: Stack( child: ListView.separated(
children: [ key: ValueKey(mainEntry),
Positioned( scrollDirection: Axis.horizontal,
top: separatorWidth, controller: _scrollController,
width: availableWidth, // default padding in scroll direction matches `MediaQuery.viewPadding`,
height: extent, // but we already accommodate for it, so make sure horizontal padding is 0
child: ListView.separated( padding: EdgeInsets.zero,
key: ValueKey(mainEntry), itemBuilder: (context, index) {
scrollDirection: Axis.horizontal, if (index == 0 || index == multiPageInfo.pageCount + 1) return horizontalMargin;
controller: _scrollController, final page = index - 1;
// default padding in scroll direction matches `MediaQuery.viewPadding`, final pageEntry = mainEntry.getPageEntry(multiPageInfo.getByIndex(page));
// but we already accommodate for it, so make sure horizontal padding is 0
padding: EdgeInsets.zero,
itemBuilder: (context, index) {
if (index == 0 || index == multiPageInfo.pageCount + 1) return horizontalMargin;
final page = index - 1;
final pageEntry = mainEntry.getPageEntry(multiPageInfo.getByIndex(page));
return GestureDetector( return Stack(
onTap: () async { children: [
_syncScroll = false; GestureDetector(
controller.page = page; onTap: () async {
await _scrollController.animateTo( _syncScroll = false;
pageToScrollOffset(page), controller.page = page;
duration: Durations.viewerOverlayPageChooserAnimation, await _scrollController.animateTo(
curve: Curves.easeOutCubic, pageToScrollOffset(page),
); duration: Durations.viewerOverlayPageScrollAnimation,
_syncScroll = true; curve: Curves.easeOutCubic,
}, );
child: DecoratedThumbnail( _syncScroll = true;
entry: pageEntry, },
extent: extent, child: DecoratedThumbnail(
// the retrieval task queue can pile up for thumbnails of heavy pages entry: pageEntry,
// (e.g. thumbnails of 15MP HEIF images inside 100MB+ HEIC containers) extent: extent,
// so we cancel these requests when possible // the retrieval task queue can pile up for thumbnails of heavy pages
cancellableNotifier: _cancellableNotifier, // (e.g. thumbnails of 15MP HEIF images inside 100MB+ HEIC containers)
selectable: false, // so we cancel these requests when possible
highlightable: false, cancellableNotifier: _cancellableNotifier,
), selectable: false,
); highlightable: false,
}, ),
separatorBuilder: (context, index) => separator, ),
itemCount: multiPageInfo.pageCount + 2, IgnorePointer(
), child: AnimatedContainer(
), color: controller.page == page ? Colors.transparent : Colors.black45,
Positioned( width: extent,
left: 0, height: extent,
top: separatorWidth, duration: Durations.viewerOverlayPageShadeAnimation,
width: marginWidth + separatorWidth, ),
height: extent, )
child: shade, ],
), );
Positioned( },
top: separatorWidth, separatorBuilder: (context, index) => separator,
right: 0, itemCount: multiPageInfo.pageCount + 2,
width: marginWidth + separatorWidth,
height: extent,
child: shade,
),
Positioned(
top: 0,
width: availableWidth,
height: separatorWidth,
child: shade,
),
Positioned(
bottom: 0,
width: availableWidth,
height: separatorWidth,
child: shade,
),
],
), ),
); );
}, },