added top overlay

This commit is contained in:
Thibault Deckers 2019-07-27 19:46:32 +09:00
parent ba88896e52
commit 82b875e591
2 changed files with 58 additions and 13 deletions

View file

@ -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,
),
),
),
),
);
}
delete() {}
share() {
ImageFetcher.share(entry['uri'], entry['mimeType']);
}
} }
class _FullscreenOverlayState extends State<FullscreenOverlay> { 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,
), ),
), ),

View file

@ -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,