added top overlay
This commit is contained in:
parent
ba88896e52
commit
82b875e591
2 changed files with 58 additions and 13 deletions
|
@ -6,24 +6,60 @@ import 'package:aves/model/image_fetcher.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:intl/intl.dart';
|
import 'package:intl/intl.dart';
|
||||||
|
|
||||||
class FullscreenOverlay extends StatefulWidget {
|
class FullscreenTopOverlay extends StatelessWidget {
|
||||||
final List<Map> entries;
|
final List<Map> entries;
|
||||||
final int index;
|
final int index;
|
||||||
|
|
||||||
const FullscreenOverlay({Key key, this.entries, this.index}) : super(key: key);
|
Map get entry => entries[index];
|
||||||
|
|
||||||
|
const FullscreenTopOverlay({Key key, this.entries, this.index}) : super(key: key);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
State<StatefulWidget> createState() => _FullscreenOverlayState();
|
Widget build(BuildContext context) {
|
||||||
|
return ClipRect(
|
||||||
|
child: BackdropFilter(
|
||||||
|
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
|
||||||
|
child: SafeArea(
|
||||||
|
child: Container(
|
||||||
|
height: kToolbarHeight,
|
||||||
|
child: AppBar(
|
||||||
|
title: Text('${index + 1}/${entries.length}'),
|
||||||
|
actions: [
|
||||||
|
// IconButton(icon: Icon(Icons.delete), onPressed: delete),
|
||||||
|
IconButton(icon: Icon(Icons.share), onPressed: share),
|
||||||
|
],
|
||||||
|
elevation: 0,
|
||||||
|
backgroundColor: Colors.black26,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
class _FullscreenOverlayState extends State<FullscreenOverlay> {
|
delete() {}
|
||||||
|
|
||||||
|
share() {
|
||||||
|
ImageFetcher.share(entry['uri'], entry['mimeType']);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class FullscreenBottomOverlay extends StatefulWidget {
|
||||||
|
final List<Map> entries;
|
||||||
|
final int index;
|
||||||
|
|
||||||
|
const FullscreenBottomOverlay({Key key, this.entries, this.index}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
State<StatefulWidget> createState() => _FullscreenBottomOverlayState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _FullscreenBottomOverlayState extends State<FullscreenBottomOverlay> {
|
||||||
Future<Map> _detailLoader;
|
Future<Map> _detailLoader;
|
||||||
Map _lastDetails;
|
Map _lastDetails;
|
||||||
|
|
||||||
Map get entry => widget.entries[widget.index];
|
Map get entry => widget.entries[widget.index];
|
||||||
|
|
||||||
int get total => widget.entries.length;
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
super.initState();
|
super.initState();
|
||||||
|
@ -31,7 +67,7 @@ class _FullscreenOverlayState extends State<FullscreenOverlay> {
|
||||||
}
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void didUpdateWidget(FullscreenOverlay oldWidget) {
|
void didUpdateWidget(FullscreenBottomOverlay oldWidget) {
|
||||||
super.didUpdateWidget(oldWidget);
|
super.didUpdateWidget(oldWidget);
|
||||||
initDetailLoader();
|
initDetailLoader();
|
||||||
}
|
}
|
||||||
|
@ -70,7 +106,7 @@ class _FullscreenOverlayState extends State<FullscreenOverlay> {
|
||||||
SizedBox(
|
SizedBox(
|
||||||
width: screenWidth,
|
width: screenWidth,
|
||||||
child: Text(
|
child: Text(
|
||||||
'${widget.index + 1}/$total – ${entry['title']}',
|
entry['title'],
|
||||||
overflow: TextOverflow.ellipsis,
|
overflow: TextOverflow.ellipsis,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
|
@ -25,7 +25,7 @@ class ImageFullscreenPageState extends State<ImageFullscreenPage> with SingleTic
|
||||||
PageController _pageController;
|
PageController _pageController;
|
||||||
ValueNotifier<bool> _overlayVisible = ValueNotifier(false);
|
ValueNotifier<bool> _overlayVisible = ValueNotifier(false);
|
||||||
AnimationController _overlayAnimationController;
|
AnimationController _overlayAnimationController;
|
||||||
Animation<Offset> _overlayOffset;
|
Animation<Offset> _topOverlayOffset, _bottomOverlayOffset;
|
||||||
|
|
||||||
List<Map> get entries => widget.entries;
|
List<Map> get entries => widget.entries;
|
||||||
|
|
||||||
|
@ -39,7 +39,8 @@ class ImageFullscreenPageState extends State<ImageFullscreenPage> with SingleTic
|
||||||
duration: Duration(milliseconds: 250),
|
duration: Duration(milliseconds: 250),
|
||||||
vsync: this,
|
vsync: this,
|
||||||
);
|
);
|
||||||
_overlayOffset = Tween(begin: Offset(0, 0), end: Offset(0, 1)).animate(CurvedAnimation(parent: _overlayAnimationController, curve: Curves.easeOutQuart, reverseCurve: Curves.easeInQuart));
|
_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);
|
_overlayVisible.addListener(onOverlayVisibleChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -78,17 +79,25 @@ class ImageFullscreenPageState extends State<ImageFullscreenPage> with SingleTic
|
||||||
transitionOnUserGestures: true,
|
transitionOnUserGestures: true,
|
||||||
scrollPhysics: BouncingScrollPhysics(),
|
scrollPhysics: BouncingScrollPhysics(),
|
||||||
),
|
),
|
||||||
if (_currentPage != null)
|
if (_currentPage != null) ...[
|
||||||
|
SlideTransition(
|
||||||
|
position: _topOverlayOffset,
|
||||||
|
child: FullscreenTopOverlay(
|
||||||
|
entries: entries,
|
||||||
|
index: _currentPage,
|
||||||
|
),
|
||||||
|
),
|
||||||
Positioned(
|
Positioned(
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
child: SlideTransition(
|
child: SlideTransition(
|
||||||
position: _overlayOffset,
|
position: _bottomOverlayOffset,
|
||||||
child: FullscreenOverlay(
|
child: FullscreenBottomOverlay(
|
||||||
entries: entries,
|
entries: entries,
|
||||||
index: _currentPage,
|
index: _currentPage,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
]
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
resizeToAvoidBottomInset: false,
|
resizeToAvoidBottomInset: false,
|
||||||
|
|
Loading…
Reference in a new issue