split fullscreen page widgets
This commit is contained in:
Thibault Deckers
parent
9caa3fb8c3
commit
1a6ed67893
9 changed files with 242 additions and 206 deletions
|
|
@ -1,201 +0,0 @@
|
||||||
import 'dart:io';
|
|
||||||
import 'dart:math';
|
|
||||||
|
|
||||||
import 'package:aves/image_fullscreen_overlay.dart';
|
|
||||||
import 'package:aves/model/image_entry.dart';
|
|
||||||
import 'package:aves/utils/file_utils.dart';
|
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'package:intl/intl.dart';
|
|
||||||
import 'package:photo_view/photo_view.dart';
|
|
||||||
import 'package:photo_view/photo_view_gallery.dart';
|
|
||||||
|
|
||||||
class ImageFullscreenPage extends StatefulWidget {
|
|
||||||
final List<ImageEntry> entries;
|
|
||||||
final String initialUri;
|
|
||||||
|
|
||||||
const ImageFullscreenPage({
|
|
||||||
Key key,
|
|
||||||
this.entries,
|
|
||||||
this.initialUri,
|
|
||||||
}) : super(key: key);
|
|
||||||
|
|
||||||
@override
|
|
||||||
ImageFullscreenPageState createState() => ImageFullscreenPageState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class ImageFullscreenPageState extends State<ImageFullscreenPage> with SingleTickerProviderStateMixin {
|
|
||||||
int _currentPage;
|
|
||||||
PageController _pageController;
|
|
||||||
ValueNotifier<bool> _overlayVisible = ValueNotifier(false);
|
|
||||||
AnimationController _overlayAnimationController;
|
|
||||||
Animation<Offset> _topOverlayOffset, _bottomOverlayOffset;
|
|
||||||
|
|
||||||
List<ImageEntry> get entries => widget.entries;
|
|
||||||
|
|
||||||
@override
|
|
||||||
void initState() {
|
|
||||||
super.initState();
|
|
||||||
final index = entries.indexWhere((entry) => entry.uri == widget.initialUri);
|
|
||||||
_currentPage = max(0, index);
|
|
||||||
_pageController = PageController(initialPage: _currentPage);
|
|
||||||
_overlayAnimationController = AnimationController(
|
|
||||||
duration: Duration(milliseconds: 250),
|
|
||||||
vsync: this,
|
|
||||||
);
|
|
||||||
_topOverlayOffset = Tween(begin: Offset(0, 0), end: Offset(0, -1)).animate(CurvedAnimation(parent: _overlayAnimationController, curve: Curves.easeOutQuart, reverseCurve: Curves.easeInQuart));
|
|
||||||
_bottomOverlayOffset = Tween(begin: Offset(0, 0), end: Offset(0, 1)).animate(CurvedAnimation(parent: _overlayAnimationController, curve: Curves.easeOutQuart, reverseCurve: Curves.easeInQuart));
|
|
||||||
_overlayVisible.addListener(onOverlayVisibleChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void dispose() {
|
|
||||||
_overlayVisible.removeListener(onOverlayVisibleChange);
|
|
||||||
super.dispose();
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return PageView(
|
|
||||||
scrollDirection: Axis.vertical,
|
|
||||||
children: [
|
|
||||||
ClipRect(
|
|
||||||
child: Scaffold(
|
|
||||||
backgroundColor: Colors.black,
|
|
||||||
body: Stack(
|
|
||||||
children: [
|
|
||||||
PhotoViewGallery.builder(
|
|
||||||
itemCount: entries.length,
|
|
||||||
builder: (context, index) {
|
|
||||||
final entry = entries[index];
|
|
||||||
return PhotoViewGalleryPageOptions(
|
|
||||||
imageProvider: FileImage(File(entry.path)),
|
|
||||||
heroTag: entry.uri,
|
|
||||||
minScale: PhotoViewComputedScale.contained,
|
|
||||||
initialScale: PhotoViewComputedScale.contained,
|
|
||||||
onTapUp: (tapContext, details, value) => _overlayVisible.value = !_overlayVisible.value,
|
|
||||||
);
|
|
||||||
},
|
|
||||||
loadingChild: Center(
|
|
||||||
child: CircularProgressIndicator(),
|
|
||||||
),
|
|
||||||
pageController: _pageController,
|
|
||||||
onPageChanged: (index) {
|
|
||||||
debugPrint('onPageChanged: index=$index');
|
|
||||||
setState(() => _currentPage = index);
|
|
||||||
},
|
|
||||||
transitionOnUserGestures: true,
|
|
||||||
scrollPhysics: BouncingScrollPhysics(),
|
|
||||||
),
|
|
||||||
if (_currentPage != null) ...[
|
|
||||||
SlideTransition(
|
|
||||||
position: _topOverlayOffset,
|
|
||||||
child: FullscreenTopOverlay(
|
|
||||||
entries: entries,
|
|
||||||
index: _currentPage,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Positioned(
|
|
||||||
bottom: 0,
|
|
||||||
child: SlideTransition(
|
|
||||||
position: _bottomOverlayOffset,
|
|
||||||
child: FullscreenBottomOverlay(
|
|
||||||
entries: entries,
|
|
||||||
index: _currentPage,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
]
|
|
||||||
],
|
|
||||||
),
|
|
||||||
resizeToAvoidBottomInset: false,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
InfoPage(entry: entries[_currentPage]),
|
|
||||||
],
|
|
||||||
// Hero(
|
|
||||||
// tag: uri,
|
|
||||||
// child: Stack(
|
|
||||||
// children: [
|
|
||||||
// Center(
|
|
||||||
// child: widget.thumbnail == null
|
|
||||||
// ? CircularProgressIndicator()
|
|
||||||
// : Image.memory(
|
|
||||||
// widget.thumbnail,
|
|
||||||
// width: requestWidth,
|
|
||||||
// height: requestHeight,
|
|
||||||
// fit: BoxFit.contain,
|
|
||||||
// ),
|
|
||||||
// ),
|
|
||||||
// Center(
|
|
||||||
// child: FadeInImage(
|
|
||||||
// placeholder: MemoryImage(kTransparentImage),
|
|
||||||
// image: FileImage(File(path)),
|
|
||||||
// fadeOutDuration: Duration(milliseconds: 1),
|
|
||||||
// fadeInDuration: Duration(milliseconds: 200),
|
|
||||||
// width: requestWidth,
|
|
||||||
// height: requestHeight,
|
|
||||||
// fit: BoxFit.contain,
|
|
||||||
// ),
|
|
||||||
// ),
|
|
||||||
// ],
|
|
||||||
// ),
|
|
||||||
// ),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
onOverlayVisibleChange() {
|
|
||||||
if (_overlayVisible.value)
|
|
||||||
_overlayAnimationController.forward();
|
|
||||||
else
|
|
||||||
_overlayAnimationController.reverse();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class InfoPage extends StatelessWidget {
|
|
||||||
final ImageEntry entry;
|
|
||||||
|
|
||||||
const InfoPage({this.entry});
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
final date = entry.getBestDate();
|
|
||||||
return Scaffold(
|
|
||||||
appBar: AppBar(
|
|
||||||
title: Text('Info'),
|
|
||||||
),
|
|
||||||
body: Padding(
|
|
||||||
padding: EdgeInsets.all(8.0),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
InfoRow('Title', entry.title),
|
|
||||||
InfoRow('Date', '${DateFormat.yMMMd().format(date)} – ${DateFormat.Hm().format(date)}'),
|
|
||||||
InfoRow('Size', formatFilesize(entry.sizeBytes)),
|
|
||||||
InfoRow('Resolution', '${entry.width} × ${entry.height} (${entry.getMegaPixels()} MP)'),
|
|
||||||
InfoRow('Path', entry.path),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class InfoRow extends StatelessWidget {
|
|
||||||
final String label, value;
|
|
||||||
|
|
||||||
const InfoRow(this.label, this.value);
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Wrap(
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
label,
|
|
||||||
style: TextStyle(color: Colors.white70),
|
|
||||||
),
|
|
||||||
SizedBox(width: 8),
|
|
||||||
Text(value),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import 'package:aves/common/fake_app_bar.dart';
|
|
||||||
import 'package:aves/model/image_decode_service.dart';
|
import 'package:aves/model/image_decode_service.dart';
|
||||||
import 'package:aves/model/image_entry.dart';
|
import 'package:aves/model/image_entry.dart';
|
||||||
import 'package:aves/thumbnail_collection.dart';
|
import 'package:aves/thumbnail_collection.dart';
|
||||||
|
import 'package:aves/widgets/common/fake_app_bar.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter/services.dart';
|
import 'package:flutter/services.dart';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import 'package:aves/common/draggable_scrollbar.dart';
|
|
||||||
import 'package:aves/common/outlined_text.dart';
|
|
||||||
import 'package:aves/image_fullscreen_page.dart';
|
|
||||||
import 'package:aves/model/image_entry.dart';
|
import 'package:aves/model/image_entry.dart';
|
||||||
import 'package:aves/thumbnail.dart';
|
import 'package:aves/thumbnail.dart';
|
||||||
import 'package:aves/utils/date_utils.dart';
|
import 'package:aves/utils/date_utils.dart';
|
||||||
|
import 'package:aves/widgets/common/draggable_scrollbar.dart';
|
||||||
|
import 'package:aves/widgets/common/outlined_text.dart';
|
||||||
|
import 'package:aves/widgets/fullscreen/image_page.dart';
|
||||||
import "package:collection/collection.dart";
|
import "package:collection/collection.dart";
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
|
import 'package:flutter_sticky_header/flutter_sticky_header.dart';
|
||||||
|
|
@ -103,7 +103,7 @@ class SectionSliver extends StatelessWidget {
|
||||||
return Navigator.push(
|
return Navigator.push(
|
||||||
context,
|
context,
|
||||||
MaterialPageRoute(
|
MaterialPageRoute(
|
||||||
builder: (context) => ImageFullscreenPage(
|
builder: (context) => FullscreenPage(
|
||||||
entries: entries,
|
entries: entries,
|
||||||
initialUri: entry.uri,
|
initialUri: entry.uri,
|
||||||
),
|
),
|
||||||
|
|
|
||||||
184
lib/widgets/fullscreen/image_page.dart
Normal file
184
lib/widgets/fullscreen/image_page.dart
Normal file
|
|
@ -0,0 +1,184 @@
|
||||||
|
import 'dart:io';
|
||||||
|
import 'dart:math';
|
||||||
|
|
||||||
|
import 'package:aves/model/image_entry.dart';
|
||||||
|
import 'package:aves/widgets/fullscreen/info_page.dart';
|
||||||
|
import 'package:aves/widgets/fullscreen/overlay.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:photo_view/photo_view.dart';
|
||||||
|
import 'package:photo_view/photo_view_gallery.dart';
|
||||||
|
|
||||||
|
class FullscreenPage extends StatefulWidget {
|
||||||
|
final List<ImageEntry> entries;
|
||||||
|
final String initialUri;
|
||||||
|
|
||||||
|
const FullscreenPage({
|
||||||
|
Key key,
|
||||||
|
this.entries,
|
||||||
|
this.initialUri,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
FullscreenPageState createState() => FullscreenPageState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class FullscreenPageState extends State<FullscreenPage> with SingleTickerProviderStateMixin {
|
||||||
|
int _currentHorizontalPage, _currentVerticalPage = 0;
|
||||||
|
PageController _horizontalPager, _verticalPager;
|
||||||
|
ValueNotifier<bool> _overlayVisible = ValueNotifier(false);
|
||||||
|
AnimationController _overlayAnimationController;
|
||||||
|
Animation<Offset> _topOverlayOffset, _bottomOverlayOffset;
|
||||||
|
|
||||||
|
List<ImageEntry> get entries => widget.entries;
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
super.initState();
|
||||||
|
final index = entries.indexWhere((entry) => entry.uri == widget.initialUri);
|
||||||
|
_currentHorizontalPage = max(0, index);
|
||||||
|
_horizontalPager = PageController(initialPage: _currentHorizontalPage);
|
||||||
|
_verticalPager = PageController(initialPage: _currentVerticalPage);
|
||||||
|
_overlayAnimationController = AnimationController(
|
||||||
|
duration: Duration(milliseconds: 250),
|
||||||
|
vsync: this,
|
||||||
|
);
|
||||||
|
_topOverlayOffset = Tween(begin: Offset(0, 0), end: Offset(0, -1)).animate(CurvedAnimation(parent: _overlayAnimationController, curve: Curves.easeOutQuart, reverseCurve: Curves.easeInQuart));
|
||||||
|
_bottomOverlayOffset = Tween(begin: Offset(0, 0), end: Offset(0, 1)).animate(CurvedAnimation(parent: _overlayAnimationController, curve: Curves.easeOutQuart, reverseCurve: Curves.easeInQuart));
|
||||||
|
_overlayVisible.addListener(onOverlayVisibleChange);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
_overlayVisible.removeListener(onOverlayVisibleChange);
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
backgroundColor: Colors.black,
|
||||||
|
body: Stack(
|
||||||
|
children: [
|
||||||
|
PageView(
|
||||||
|
scrollDirection: Axis.vertical,
|
||||||
|
controller: _verticalPager,
|
||||||
|
onPageChanged: (page) => setState(() => _currentVerticalPage = page),
|
||||||
|
children: [
|
||||||
|
ImagePage(
|
||||||
|
entries: entries,
|
||||||
|
pageController: _horizontalPager,
|
||||||
|
onTap: () => _overlayVisible.value = !_overlayVisible.value,
|
||||||
|
onPageChanged: (page) => setState(() => _currentHorizontalPage = page),
|
||||||
|
),
|
||||||
|
InfoPage(
|
||||||
|
entry: entries[_currentHorizontalPage],
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
if (_currentHorizontalPage != null && _currentVerticalPage == 0) ...[
|
||||||
|
SlideTransition(
|
||||||
|
position: _topOverlayOffset,
|
||||||
|
child: FullscreenTopOverlay(
|
||||||
|
entries: entries,
|
||||||
|
index: _currentHorizontalPage,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
Positioned(
|
||||||
|
bottom: 0,
|
||||||
|
child: SlideTransition(
|
||||||
|
position: _bottomOverlayOffset,
|
||||||
|
child: FullscreenBottomOverlay(
|
||||||
|
entries: entries,
|
||||||
|
index: _currentHorizontalPage,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
]
|
||||||
|
],
|
||||||
|
),
|
||||||
|
resizeToAvoidBottomInset: false,
|
||||||
|
// Hero(
|
||||||
|
// tag: uri,
|
||||||
|
// child: Stack(
|
||||||
|
// children: [
|
||||||
|
// Center(
|
||||||
|
// child: widget.thumbnail == null
|
||||||
|
// ? CircularProgressIndicator()
|
||||||
|
// : Image.memory(
|
||||||
|
// widget.thumbnail,
|
||||||
|
// width: requestWidth,
|
||||||
|
// height: requestHeight,
|
||||||
|
// fit: BoxFit.contain,
|
||||||
|
// ),
|
||||||
|
// ),
|
||||||
|
// Center(
|
||||||
|
// child: FadeInImage(
|
||||||
|
// placeholder: MemoryImage(kTransparentImage),
|
||||||
|
// image: FileImage(File(path)),
|
||||||
|
// fadeOutDuration: Duration(milliseconds: 1),
|
||||||
|
// fadeInDuration: Duration(milliseconds: 200),
|
||||||
|
// width: requestWidth,
|
||||||
|
// height: requestHeight,
|
||||||
|
// fit: BoxFit.contain,
|
||||||
|
// ),
|
||||||
|
// ),
|
||||||
|
// ],
|
||||||
|
// ),
|
||||||
|
// ),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onOverlayVisibleChange() {
|
||||||
|
if (_overlayVisible.value)
|
||||||
|
_overlayAnimationController.forward();
|
||||||
|
else
|
||||||
|
_overlayAnimationController.reverse();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class ImagePage extends StatefulWidget {
|
||||||
|
final List<ImageEntry> entries;
|
||||||
|
final PageController pageController;
|
||||||
|
final VoidCallback onTap;
|
||||||
|
final ValueChanged<int> onPageChanged;
|
||||||
|
|
||||||
|
const ImagePage({
|
||||||
|
this.entries,
|
||||||
|
this.pageController,
|
||||||
|
this.onTap,
|
||||||
|
this.onPageChanged,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<StatefulWidget> createState() => ImagePageState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class ImagePageState extends State<ImagePage> with AutomaticKeepAliveClientMixin {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
super.build(context);
|
||||||
|
return PhotoViewGallery.builder(
|
||||||
|
itemCount: widget.entries.length,
|
||||||
|
builder: (context, index) {
|
||||||
|
final entry = widget.entries[index];
|
||||||
|
return PhotoViewGalleryPageOptions(
|
||||||
|
imageProvider: FileImage(File(entry.path)),
|
||||||
|
heroTag: entry.uri,
|
||||||
|
minScale: PhotoViewComputedScale.contained,
|
||||||
|
initialScale: PhotoViewComputedScale.contained,
|
||||||
|
onTapUp: (tapContext, details, value) => widget.onTap?.call(),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
loadingChild: Center(
|
||||||
|
child: CircularProgressIndicator(),
|
||||||
|
),
|
||||||
|
pageController: widget.pageController,
|
||||||
|
onPageChanged: widget.onPageChanged,
|
||||||
|
transitionOnUserGestures: true,
|
||||||
|
scrollPhysics: BouncingScrollPhysics(),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
bool get wantKeepAlive => true;
|
||||||
|
}
|
||||||
53
lib/widgets/fullscreen/info_page.dart
Normal file
53
lib/widgets/fullscreen/info_page.dart
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
import 'package:aves/model/image_entry.dart';
|
||||||
|
import 'package:aves/utils/file_utils.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:intl/intl.dart';
|
||||||
|
|
||||||
|
class InfoPage extends StatelessWidget {
|
||||||
|
final ImageEntry entry;
|
||||||
|
|
||||||
|
const InfoPage({this.entry});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final date = entry.getBestDate();
|
||||||
|
return Scaffold(
|
||||||
|
appBar: AppBar(
|
||||||
|
title: Text('Info'),
|
||||||
|
),
|
||||||
|
body: Padding(
|
||||||
|
padding: EdgeInsets.all(8.0),
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
InfoRow('Title', entry.title),
|
||||||
|
InfoRow('Date', '${DateFormat.yMMMd().format(date)} – ${DateFormat.Hm().format(date)}'),
|
||||||
|
InfoRow('Size', formatFilesize(entry.sizeBytes)),
|
||||||
|
InfoRow('Resolution', '${entry.width} × ${entry.height} (${entry.getMegaPixels()} MP)'),
|
||||||
|
InfoRow('Path', entry.path),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class InfoRow extends StatelessWidget {
|
||||||
|
final String label, value;
|
||||||
|
|
||||||
|
const InfoRow(this.label, this.value);
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Wrap(
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
label,
|
||||||
|
style: TextStyle(color: Colors.white70),
|
||||||
|
),
|
||||||
|
SizedBox(width: 8),
|
||||||
|
Text(value),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue