gabehf/Fladder
1
0
Fork 0
mirror of https://github.com/gabehf/Fladder.git synced 2026-03-14 17:55:58 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: properly implement button feedback for banners

Browse source
This commit is contained in:
PartyDonut 2024-10-25 09:13:15 +02:00
parent 1baaf569b9
commit c5e39db9ec
3 changed files with 237 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

4
lib/screens/shared/flat_button.dart
View file

@ -1,7 +1,9 @@
import 'package:fladder/theme.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/theme.dart';
class FlatButton extends ConsumerWidget { class FlatButton extends ConsumerWidget {
final Widget? child; final Widget? child;
final Function()? onTap; final Function()? onTap;

68
lib/screens/shared/media/carousel_banner.dart
View file

@ -4,6 +4,7 @@ import 'package:collection/collection.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/item_base_model.dart'; import 'package:fladder/models/item_base_model.dart';
import 'package:fladder/screens/shared/flat_button.dart';
import 'package:fladder/screens/shared/media/banner_play_button.dart'; import 'package:fladder/screens/shared/media/banner_play_button.dart';
import 'package:fladder/util/adaptive_layout.dart'; import 'package:fladder/util/adaptive_layout.dart';
import 'package:fladder/util/fladder_image.dart'; import 'package:fladder/util/fladder_image.dart';
@ -53,38 +54,7 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
...widget.items.mapIndexed( ...widget.items.mapIndexed(
(index, item) => LayoutBuilder(builder: (context, constraints) { (index, item) => LayoutBuilder(builder: (context, constraints) {
final opacity = (constraints.maxWidth / maxExtent); final opacity = (constraints.maxWidth / maxExtent);
return GestureDetector( return Stack(
onTap: () => widget.items[index].navigateTo(context),
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.pointer
? null
: () {
final poster = widget.items[index];
showBottomSheetPill(
context: context,
item: poster,
content: (scrollContext, scrollController) => ListView(
shrinkWrap: true,
controller: scrollController,
children:
poster.generateActions(context, ref).listTileItems(scrollContext, useIcons: true),
),
);
},
onSecondaryTapDown: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
? null
: (details) async {
Offset localPosition = details.globalPosition;
RelativeRect position = RelativeRect.fromLTRB(
localPosition.dx - 320, localPosition.dy, localPosition.dx, localPosition.dy);
final poster = widget.items[index];
await showMenu(
context: context,
position: position,
items: poster.generateActions(context, ref).popupMenuItems(useIcons: true),
);
},
child: Stack(
clipBehavior: Clip.none, clipBehavior: Clip.none,
children: [ children: [
FladderImage(image: item.bannerImage), FladderImage(image: item.bannerImage),
@ -136,6 +106,39 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
), ),
), ),
), ),
FlatButton(
onTap: () => widget.items[index].navigateTo(context),
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.pointer
? null
: () {
final poster = widget.items[index];
showBottomSheetPill(
context: context,
item: poster,
content: (scrollContext, scrollController) => ListView(
shrinkWrap: true,
controller: scrollController,
children: poster
.generateActions(context, ref)
.listTileItems(scrollContext, useIcons: true),
),
);
},
onSecondaryTapDown: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
? null
: (details) async {
Offset localPosition = details.globalPosition;
RelativeRect position = RelativeRect.fromLTRB(
localPosition.dx - 320, localPosition.dy, localPosition.dx, localPosition.dy);
final poster = widget.items[index];
await showMenu(
context: context,
position: position,
items: poster.generateActions(context, ref).popupMenuItems(useIcons: true),
);
},
),
BannerPlayButton(item: widget.items[index]), BannerPlayButton(item: widget.items[index]),
IgnorePointer( IgnorePointer(
child: Container( child: Container(
@ -148,7 +151,6 @@ class _CarouselBannerState extends ConsumerState<CarouselBanner> {
), ),
), ),
], ],
),
); );
}), }),
) )

81
lib/screens/shared/media/media_banner.dart
View file

@ -5,6 +5,7 @@ import 'package:ficonsax/ficonsax.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fladder/models/item_base_model.dart'; import 'package:fladder/models/item_base_model.dart';
import 'package:fladder/screens/shared/flat_button.dart';
import 'package:fladder/screens/shared/media/banner_play_button.dart'; import 'package:fladder/screens/shared/media/banner_play_button.dart';
import 'package:fladder/util/adaptive_layout.dart'; import 'package:fladder/util/adaptive_layout.dart';
import 'package:fladder/util/fladder_image.dart'; import 'package:fladder/util/fladder_image.dart';
@ -103,42 +104,6 @@ class _MediaBannerState extends ConsumerState<MediaBanner> {
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
surfaceTintColor: overlayColor, surfaceTintColor: overlayColor,
color: overlayColor, color: overlayColor,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () => currentItem.navigateTo(context),
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
? () async {
interacting = true;
final poster = currentItem;
showBottomSheetPill(
context: context,
item: poster,
content: (scrollContext, scrollController) => ListView(
shrinkWrap: true,
controller: scrollController,
children:
poster.generateActions(context, ref).listTileItems(scrollContext, useIcons: true),
),
);
interacting = false;
timer.reset();
}
: null,
onSecondaryTapDown: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
? null
: (details) async {
Offset localPosition = details.globalPosition;
RelativeRect position = RelativeRect.fromLTRB(
localPosition.dx - 320, localPosition.dy, localPosition.dx, localPosition.dy);
final poster = currentItem;
await showMenu(
context: context,
position: position,
items: poster.generateActions(context, ref).popupMenuItems(useIcons: true),
);
},
child: MouseRegion( child: MouseRegion(
onEnter: (event) => setState(() => showControls = true), onEnter: (event) => setState(() => showControls = true),
onHover: (event) => timer.reset(), onHover: (event) => timer.reset(),
@ -186,7 +151,9 @@ class _MediaBannerState extends ConsumerState<MediaBanner> {
], ],
), ),
), ),
child: SizedBox( child: Stack(
children: [
SizedBox(
width: double.infinity, width: double.infinity,
height: double.infinity, height: double.infinity,
child: Padding( child: Padding(
@ -197,6 +164,44 @@ class _MediaBannerState extends ConsumerState<MediaBanner> {
), ),
), ),
), ),
FlatButton(
onTap: () => currentItem.navigateTo(context),
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
? () async {
interacting = true;
final poster = currentItem;
showBottomSheetPill(
context: context,
item: poster,
content: (scrollContext, scrollController) => ListView(
shrinkWrap: true,
controller: scrollController,
children: poster
.generateActions(context, ref)
.listTileItems(scrollContext, useIcons: true),
),
);
interacting = false;
timer.reset();
}
: null,
onSecondaryTapDown: AdaptiveLayout.of(context).inputDevice == InputDevice.touch
? null
: (details) async {
Offset localPosition = details.globalPosition;
RelativeRect position = RelativeRect.fromLTRB(localPosition.dx - 320,
localPosition.dy, localPosition.dx, localPosition.dy);
final poster = currentItem;
await showMenu(
context: context,
position: position,
items: poster.generateActions(context, ref).popupMenuItems(useIcons: true),
);
},
),
],
),
), ),
), ),
), ),
@ -269,8 +274,6 @@ class _MediaBannerState extends ConsumerState<MediaBanner> {
), ),
), ),
), ),
),
),
if (widget.items.length > 1) if (widget.items.length > 1)
FractionallySizedBox( FractionallySizedBox(
widthFactor: 0.35, widthFactor: 0.35,