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