2ndbeam/fluffychat-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Swipe to next or previous image in image viewer

Browse source
This commit is contained in:
Krille 2025-01-05 16:55:07 +01:00
commit fb685c03cf
No known key found for this signature in database
GPG key ID: E067ECD60F1A0652
5 changed files with 142 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

158
lib/pages/image_viewer/image_viewer_view.dart
View file

@ -2,7 +2,9 @@ import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/l10n.dart';
import 'package:fluffychat/config/themes.dart';
import 'package:fluffychat/utils/platform_infos.dart';
import 'package:fluffychat/widgets/hover_builder.dart';
import 'package:fluffychat/widgets/mxc_image.dart';
import 'image_viewer.dart';
@ -13,73 +15,109 @@ class ImageViewerView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
final iconButtonStyle = IconButton.styleFrom(
backgroundColor: Colors.black.withAlpha(128),
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
leading: IconButton(
style: IconButton.styleFrom(
backgroundColor: Colors.black.withAlpha(128),
),
icon: const Icon(Icons.close),
onPressed: Navigator.of(context).pop,
color: Colors.white,
tooltip: L10n.of(context).close,
),
backgroundColor: Colors.transparent,
actions: [
IconButton(
style: IconButton.styleFrom(
backgroundColor: Colors.black.withAlpha(128),
),
icon: const Icon(Icons.reply_outlined),
onPressed: controller.forwardAction,
foregroundColor: Colors.white,
);
return GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Scaffold(
backgroundColor: Colors.black.withAlpha(128),
extendBodyBehindAppBar: true,
appBar: AppBar(
elevation: 0,
leading: IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.close),
onPressed: Navigator.of(context).pop,
color: Colors.white,
tooltip: L10n.of(context).share,
tooltip: L10n.of(context).close,
),
const SizedBox(width: 8),
IconButton(
style: IconButton.styleFrom(
backgroundColor: Colors.black.withAlpha(128),
backgroundColor: Colors.transparent,
actions: [
IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.reply_outlined),
onPressed: controller.forwardAction,
color: Colors.white,
tooltip: L10n.of(context).share,
),
icon: const Icon(Icons.download_outlined),
onPressed: () => controller.saveFileAction(context),
color: Colors.white,
tooltip: L10n.of(context).downloadFile,
),
const SizedBox(width: 8),
if (PlatformInfos.isMobile)
// Use builder context to correctly position the share dialog on iPad
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Builder(
builder: (context) => IconButton(
style: IconButton.styleFrom(
backgroundColor: Colors.black.withAlpha(128),
const SizedBox(width: 8),
IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.download_outlined),
onPressed: () => controller.saveFileAction(context),
color: Colors.white,
tooltip: L10n.of(context).downloadFile,
),
const SizedBox(width: 8),
if (PlatformInfos.isMobile)
// Use builder context to correctly position the share dialog on iPad
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Builder(
builder: (context) => IconButton(
style: IconButton.styleFrom(
backgroundColor: Colors.black.withAlpha(128),
),
onPressed: () => controller.shareFileAction(context),
tooltip: L10n.of(context).share,
color: Colors.white,
icon: Icon(Icons.adaptive.share_outlined),
),
onPressed: () => controller.shareFileAction(context),
tooltip: L10n.of(context).share,
color: Colors.white,
icon: Icon(Icons.adaptive.share_outlined),
),
),
),
],
),
body: InteractiveViewer(
minScale: 1.0,
maxScale: 10.0,
onInteractionEnd: controller.onInteractionEnds,
child: Center(
child: Hero(
tag: controller.widget.event.eventId,
child: MxcImage(
event: controller.widget.event,
fit: BoxFit.contain,
isThumbnail: false,
animated: true,
),
],
),
body: HoverBuilder(
builder: (context, hovered) => Stack(
children: [
PageView.builder(
controller: controller.pageController,
itemCount: controller.allEvents.length,
itemBuilder: (context, i) => InteractiveViewer(
minScale: 1.0,
maxScale: 10.0,
onInteractionEnd: controller.onInteractionEnds,
child: Center(
child: Hero(
tag: controller.allEvents[i].eventId,
child: MxcImage(
key: ValueKey(controller.allEvents[i].eventId),
event: controller.allEvents[i],
fit: BoxFit.contain,
isThumbnail: false,
animated: true,
),
),
),
),
),
if (hovered && controller.canGoBack)
Align(
alignment: Alignment.centerLeft,
child: IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.chevron_left_outlined),
onPressed: () => controller.pageController.previousPage(
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
),
),
),
if (hovered && controller.canGoNext)
Align(
alignment: Alignment.centerRight,
child: IconButton(
style: iconButtonStyle,
icon: const Icon(Icons.chevron_right_outlined),
onPressed: () => controller.pageController.nextPage(
duration: FluffyThemes.animationDuration,
curve: FluffyThemes.animationCurve,
),
),
),
],
),
),
),