gabehf/Fladder
1
0
Fork 0
mirror of https://github.com/gabehf/Fladder.git synced 2026-03-09 07:28:14 -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;

178
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,102 +54,103 @@ 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), clipBehavior: Clip.none,
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.pointer children: [
? null FladderImage(image: item.bannerImage),
: () { Opacity(
final poster = widget.items[index]; opacity: opacity.clamp(0, 1),
showBottomSheetPill( child: Stack(
context: context, children: [
item: poster, Positioned.fill(
content: (scrollContext, scrollController) => ListView( child: Container(
shrinkWrap: true, decoration: BoxDecoration(
controller: scrollController, gradient: LinearGradient(
children: begin: Alignment.bottomLeft,
poster.generateActions(context, ref).listTileItems(scrollContext, useIcons: true), end: Alignment.topCenter,
), colors: [
); ThemesData.of(context).dark.colorScheme.primaryContainer.withOpacity(0.85),
}, Colors.transparent,
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,
children: [
FladderImage(image: item.bannerImage),
Opacity(
opacity: opacity.clamp(0, 1),
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topCenter,
colors: [
ThemesData.of(context).dark.colorScheme.primaryContainer.withOpacity(0.85),
Colors.transparent,
],
),
), ),
), ),
), ),
],
),
),
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.all(16.0).copyWith(right: constraints.maxWidth * 0.2),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
maxLines: 2,
softWrap: item.title.length > 25,
overflow: TextOverflow.fade,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(color: Colors.white),
),
if (item.label(context) != null || item.subText != null)
Text(
item.label(context) ?? item.subText ?? "",
maxLines: 2,
softWrap: false,
overflow: TextOverflow.fade,
style: Theme.of(context).textTheme.titleMedium?.copyWith(color: Colors.white),
),
].addInBetween(const SizedBox(height: 4)),
), ),
), ],
), ),
BannerPlayButton(item: widget.items[index]), ),
IgnorePointer( Align(
child: Container( alignment: Alignment.bottomLeft,
decoration: BoxDecoration( child: Padding(
border: Border.all( padding: const EdgeInsets.all(16.0).copyWith(right: constraints.maxWidth * 0.2),
color: Colors.white.withOpacity(0.1), child: Column(
width: 1.0, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
maxLines: 2,
softWrap: item.title.length > 25,
overflow: TextOverflow.fade,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(color: Colors.white),
),
if (item.label(context) != null || item.subText != null)
Text(
item.label(context) ?? item.subText ?? "",
maxLines: 2,
softWrap: false,
overflow: TextOverflow.fade,
style: Theme.of(context).textTheme.titleMedium?.copyWith(color: Colors.white),
), ),
borderRadius: border), ].addInBetween(const SizedBox(height: 4)),
), ),
), ),
], ),
), 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]),
IgnorePointer(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.white.withOpacity(0.1),
width: 1.0,
),
borderRadius: border),
),
),
],
); );
}), }),
) )

285
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';
@ -104,89 +105,55 @@ class _MediaBannerState extends ConsumerState<MediaBanner> {
surfaceTintColor: overlayColor, surfaceTintColor: overlayColor,
color: overlayColor, color: overlayColor,
child: MouseRegion( child: MouseRegion(
cursor: SystemMouseCursors.click, onEnter: (event) => setState(() => showControls = true),
child: GestureDetector( onHover: (event) => timer.reset(),
onTap: () => currentItem.navigateTo(context), onExit: (event) => setState(() => showControls = false),
onLongPress: AdaptiveLayout.of(context).inputDevice == InputDevice.touch child: Stack(
? () async { fit: StackFit.expand,
interacting = true; children: [
final poster = currentItem; Dismissible(
showBottomSheetPill( key: const Key("Dismissable"),
context: context, direction: DismissDirection.horizontal,
item: poster, onUpdate: (details) {
content: (scrollContext, scrollController) => ListView( setState(() {
shrinkWrap: true, dragOffset = details.progress * 4;
controller: scrollController, });
children: },
poster.generateActions(context, ref).listTileItems(scrollContext, useIcons: true), confirmDismiss: (direction) async {
), if (direction == DismissDirection.startToEnd) {
); previousSlide();
interacting = false; } else {
timer.reset(); nextSlide();
} }
: null, return false;
onSecondaryTapDown: AdaptiveLayout.of(context).inputDevice == InputDevice.touch },
? null child: AnimatedOpacity(
: (details) async { duration: const Duration(milliseconds: 125),
Offset localPosition = details.globalPosition; opacity: dragOpacity.abs(),
RelativeRect position = RelativeRect.fromLTRB( child: AnimatedSwitcher(
localPosition.dx - 320, localPosition.dy, localPosition.dx, localPosition.dy); duration: const Duration(milliseconds: 125),
final poster = currentItem; child: Container(
key: Key(currentItem.id),
await showMenu( clipBehavior: Clip.hardEdge,
context: context, decoration: BoxDecoration(
position: position, borderRadius: BorderRadius.circular(14),
items: poster.generateActions(context, ref).popupMenuItems(useIcons: true), ),
); foregroundDecoration: BoxDecoration(
}, borderRadius: BorderRadius.circular(14),
child: MouseRegion( border: Border.all(
onEnter: (event) => setState(() => showControls = true), color: Colors.white.withOpacity(0.10), strokeAlign: BorderSide.strokeAlignInside),
onHover: (event) => timer.reset(), gradient: LinearGradient(
onExit: (event) => setState(() => showControls = false), begin: Alignment.bottomLeft,
child: Stack( end: Alignment.topCenter,
fit: StackFit.expand, colors: [
children: [ overlayColor.withOpacity(0.85),
Dismissible( Colors.transparent,
key: const Key("Dismissable"), ],
direction: DismissDirection.horizontal, ),
onUpdate: (details) { ),
setState(() { child: Stack(
dragOffset = details.progress * 4; children: [
}); SizedBox(
},
confirmDismiss: (direction) async {
if (direction == DismissDirection.startToEnd) {
previousSlide();
} else {
nextSlide();
}
return false;
},
child: AnimatedOpacity(
duration: const Duration(milliseconds: 125),
opacity: dragOpacity.abs(),
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 125),
child: Container(
key: Key(currentItem.id),
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
),
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
border: Border.all(
color: Colors.white.withOpacity(0.10), strokeAlign: BorderSide.strokeAlignInside),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topCenter,
colors: [
overlayColor.withOpacity(0.85),
Colors.transparent,
],
),
),
child: SizedBox(
width: double.infinity, width: double.infinity,
height: double.infinity, height: double.infinity,
child: Padding( child: Padding(
@ -197,76 +164,112 @@ 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),
);
},
),
],
), ),
), ),
), ),
Row( ),
children: [ ),
Expanded( Row(
child: Padding( children: [
padding: const EdgeInsets.all(16), Expanded(
child: Column( child: Padding(
mainAxisAlignment: MainAxisAlignment.end, padding: const EdgeInsets.all(16),
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ mainAxisAlignment: MainAxisAlignment.end,
Flexible( crossAxisAlignment: CrossAxisAlignment.start,
child: IgnorePointer( children: [
child: Column( Flexible(
crossAxisAlignment: CrossAxisAlignment.start, child: IgnorePointer(
mainAxisSize: MainAxisSize.min, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Flexible( mainAxisSize: MainAxisSize.min,
child: Text( children: [
currentItem.title, Flexible(
maxLines: 2, child: Text(
style: Theme.of(context).textTheme.headlineMedium?.copyWith( currentItem.title,
shadows: shadows, maxLines: 2,
color: Colors.white, style: Theme.of(context).textTheme.headlineMedium?.copyWith(
), shadows: shadows,
), color: Colors.white,
),
if (currentItem.label(context) != null || currentItem.subText != null)
Flexible(
child: Text(
currentItem.label(context) ?? currentItem.subText ?? "",
maxLines: 2,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
shadows: shadows,
color: Colors.white.withOpacity(0.75),
),
), ),
), ),
].addInBetween(const SizedBox(height: 6)),
), ),
), if (currentItem.label(context) != null || currentItem.subText != null)
Flexible(
child: Text(
currentItem.label(context) ?? currentItem.subText ?? "",
maxLines: 2,
style: Theme.of(context).textTheme.titleMedium?.copyWith(
shadows: shadows,
color: Colors.white.withOpacity(0.75),
),
),
),
].addInBetween(const SizedBox(height: 6)),
), ),
].addInBetween(const SizedBox(height: 16)), ),
), ),
), ].addInBetween(const SizedBox(height: 16)),
), ),
Padding( ),
padding: const EdgeInsets.symmetric(horizontal: 12), ),
child: AnimatedOpacity( Padding(
opacity: showControls ? 1 : 0, padding: const EdgeInsets.symmetric(horizontal: 12),
duration: const Duration(milliseconds: 250), child: AnimatedOpacity(
child: Column( opacity: showControls ? 1 : 0,
mainAxisAlignment: MainAxisAlignment.center, duration: const Duration(milliseconds: 250),
children: [ child: Column(
IconButton.filledTonal( mainAxisAlignment: MainAxisAlignment.center,
onPressed: () => nextSlide(), children: [
icon: const Icon(IconsaxOutline.arrow_right_3), IconButton.filledTonal(
) onPressed: () => nextSlide(),
], icon: const Icon(IconsaxOutline.arrow_right_3),
), )
), ],
), ),
], ),
), ),
BannerPlayButton(item: currentItem),
], ],
), ),
), BannerPlayButton(item: currentItem),
],
), ),
), ),
), ),