added overlay disappear after a short time

This commit is contained in:
Myzel394 2022-08-14 17:30:36 +02:00
parent f5fd31d592
commit 2339fd27a0
6 changed files with 147 additions and 66 deletions

View File

@ -0,0 +1,15 @@
import 'package:flutter/material.dart';
class TimelineOverlay extends ChangeNotifier {
bool _showOverlay = true;
bool get showOverlay => _showOverlay;
void hideOverlay() => setShowOverlay(false);
void restoreOverlay() => setShowOverlay(true);
void setShowOverlay(bool showOverlay) {
_showOverlay = showOverlay;
notifyListeners();
}
}

View File

@ -1,8 +1,10 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:share_location/controllers/memory_slide_controller.dart';
import 'package:share_location/controllers/status_controller.dart';
import 'package:share_location/enums.dart';
import 'package:share_location/foreign_types/memory.dart';
import 'package:share_location/models/timeline_overlay.dart';
import 'package:share_location/widgets/status.dart';
import 'memory.dart';
@ -66,35 +68,38 @@ class _MemorySlideState extends State<MemorySlide>
@override
Widget build(BuildContext context) {
return Status(
controller: controller,
child: MemoryView(
creationDate: widget.memory.creationDate,
location: widget.memory.location,
filename: widget.memory.filename,
loopVideo: false,
onFileDownloaded: () {
if (widget.memory.type == MemoryType.photo) {
initializeAnimation(DEFAULT_IMAGE_DURATION);
}
},
onVideoControllerInitialized: (controller) {
if (mounted) {
initializeAnimation(controller.value.duration);
return Consumer<TimelineOverlay>(
builder: (context, overlayController, _) => Status(
controller: controller,
disabled: !overlayController.showOverlay,
child: MemoryView(
creationDate: widget.memory.creationDate,
location: widget.memory.location,
filename: widget.memory.filename,
loopVideo: false,
onFileDownloaded: () {
if (widget.memory.type == MemoryType.photo) {
initializeAnimation(DEFAULT_IMAGE_DURATION);
}
},
onVideoControllerInitialized: (controller) {
if (mounted) {
initializeAnimation(controller.value.duration);
widget.controller.addListener(() {
if (!mounted) {
return;
}
widget.controller.addListener(() {
if (!mounted) {
return;
}
if (widget.controller.paused) {
controller.pause();
} else {
controller.play();
}
});
}
},
if (widget.controller.paused) {
controller.pause();
} else {
controller.play();
}
});
}
},
),
),
);
}

View File

@ -7,10 +7,12 @@ const BAR_HEIGHT = 4.0;
class Status extends StatefulWidget {
final StatusController? controller;
final Widget child;
final bool disabled;
const Status({
Key? key,
required this.child,
this.disabled = false,
this.controller,
}) : super(key: key);
@ -29,6 +31,12 @@ class _StatusState extends State<Status> with TickerProviderStateMixin {
if (widget.controller != null && animationController == null) {
initializeAnimation();
}
if (widget.disabled) {
animationController?.stop();
} else {
animationController?.forward();
}
}
@override
@ -75,28 +83,33 @@ class _StatusState extends State<Status> with TickerProviderStateMixin {
height: BAR_HEIGHT,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: SMALL_SPACE),
child: (widget.controller == null)
? ClipRRect(
borderRadius: BorderRadius.circular(HUGE_SPACE),
child: LinearProgressIndicator(
value: null,
valueColor: AlwaysStoppedAnimation<Color>(
Colors.white.withOpacity(.3)),
backgroundColor: Colors.white.withOpacity(0.1),
),
)
: AnimatedBuilder(
animation: animation,
builder: (_, __) => ClipRRect(
child: AnimatedOpacity(
duration: const Duration(milliseconds: 500),
curve: Curves.linearToEaseOut,
opacity: widget.disabled ? 0.0 : 1.0,
child: (widget.controller == null)
? ClipRRect(
borderRadius: BorderRadius.circular(HUGE_SPACE),
child: LinearProgressIndicator(
value: animation.value,
valueColor:
const AlwaysStoppedAnimation<Color>(Colors.white),
value: null,
valueColor: AlwaysStoppedAnimation<Color>(
Colors.white.withOpacity(.3)),
backgroundColor: Colors.white.withOpacity(0.1),
),
)
: AnimatedBuilder(
animation: animation,
builder: (_, __) => ClipRRect(
borderRadius: BorderRadius.circular(HUGE_SPACE),
child: LinearProgressIndicator(
value: animation.value,
valueColor:
const AlwaysStoppedAnimation<Color>(Colors.white),
backgroundColor: Colors.white.withOpacity(0.1),
),
),
),
),
),
),
),
],

View File

@ -1,8 +1,12 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:share_location/constants/spacing.dart';
import 'package:share_location/controllers/memory_slide_controller.dart';
import 'package:share_location/foreign_types/memory.dart';
import 'package:share_location/models/timeline_overlay.dart';
import 'package:share_location/widgets/memory_slide.dart';
class TimelinePage extends StatefulWidget {
@ -24,9 +28,12 @@ class TimelinePage extends StatefulWidget {
}
class _TimelinePageState extends State<TimelinePage> {
final timelineOverlayController = TimelineOverlay();
final pageController = PageController();
late final MemorySlideController controller;
Timer? overlayRemover;
@override
void initState() {
super.initState();
@ -52,6 +59,7 @@ class _TimelinePageState extends State<TimelinePage> {
@override
void dispose() {
controller.dispose();
timelineOverlayController.dispose();
super.dispose();
}
@ -61,11 +69,23 @@ class _TimelinePageState extends State<TimelinePage> {
return GestureDetector(
onTapDown: (_) {
controller.setPaused(true);
overlayRemover = Timer(
const Duration(milliseconds: 200),
timelineOverlayController.hideOverlay,
);
},
onTapUp: (_) {
overlayRemover?.cancel();
controller.setPaused(false);
timelineOverlayController.restoreOverlay();
},
onTapCancel: () {
overlayRemover?.cancel();
timelineOverlayController.restoreOverlay();
controller.setPaused(false);
},
onHorizontalDragEnd: (details) {
@ -85,30 +105,43 @@ class _TimelinePageState extends State<TimelinePage> {
);
}
},
child: Stack(
fit: StackFit.expand,
children: <Widget>[
PageView.builder(
controller: pageController,
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
itemBuilder: (_, __) => MemorySlide(
key: Key(controller.index.toString()),
controller: controller,
memory: widget.memories[controller.index],
child: ChangeNotifierProvider<TimelineOverlay>(
create: (_) => timelineOverlayController,
child: Stack(
fit: StackFit.expand,
children: <Widget>[
PageView.builder(
controller: pageController,
physics: const NeverScrollableScrollPhysics(),
scrollDirection: Axis.horizontal,
itemBuilder: (_, __) => MemorySlide(
key: Key(controller.index.toString()),
controller: controller,
memory: widget.memories[controller.index],
),
itemCount: widget.memories.length,
),
itemCount: widget.memories.length,
),
Padding(
padding: const EdgeInsets.only(
top: LARGE_SPACE, left: MEDIUM_SPACE, right: MEDIUM_SPACE),
child: Text(
DateFormat('dd. MMMM yyyy').format(widget.date),
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline1,
Padding(
padding: const EdgeInsets.only(
top: LARGE_SPACE,
left: MEDIUM_SPACE,
right: MEDIUM_SPACE,
),
child: Consumer<TimelineOverlay>(
builder: (context, overlayController, _) => AnimatedOpacity(
duration: const Duration(milliseconds: 500),
curve: Curves.linearToEaseOut,
opacity: overlayController.showOverlay ? 1.0 : 0.0,
child: Text(
DateFormat('dd. MMMM yyyy').format(widget.date),
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline1,
),
),
),
),
),
],
],
),
),
);
}

View File

@ -310,6 +310,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.2"
nested:
dependency: transitive
description:
name: nested
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.0"
path:
dependency: "direct main"
description:
@ -457,6 +464,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "0.3.0"
provider:
dependency: "direct main"
description:
name: provider
url: "https://pub.dartlang.org"
source: hosted
version: "6.0.3"
quiver:
dependency: transitive
description:

View File

@ -45,6 +45,7 @@ dependencies:
intl: ^0.17.0
property_change_notifier: ^0.3.0
path: ^1.8.1
provider: ^6.0.3
dev_dependencies:
flutter_test: