mirror of
https://github.com/gabehf/Fladder.git
synced 2026-04-24 13:01:51 -07:00
feat: UI 2.0 and other Improvements (#357)
Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>
This commit is contained in:
PartyDonut
GitHub
parent
9ca06eaa37
commit
e7b5bb40ff
169 changed files with 4584 additions and 3626 deletions
|
|
@ -2,14 +2,18 @@ import 'package:flutter/material.dart';
|
|||
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import 'package:fladder/util/widget_extensions.dart';
|
||||
import 'package:fladder/util/localization_helper.dart';
|
||||
import 'package:fladder/widgets/shared/item_actions.dart';
|
||||
|
||||
class NavigationButton extends ConsumerStatefulWidget {
|
||||
final String? label;
|
||||
final Widget selectedIcon;
|
||||
final Widget icon;
|
||||
final bool horizontal;
|
||||
final bool expanded;
|
||||
final Function()? onPressed;
|
||||
final Function()? onLongPress;
|
||||
final List<ItemAction> trailing;
|
||||
final bool selected;
|
||||
final Duration duration;
|
||||
const NavigationButton({
|
||||
|
|
@ -17,8 +21,11 @@ class NavigationButton extends ConsumerStatefulWidget {
|
|||
required this.selectedIcon,
|
||||
required this.icon,
|
||||
this.horizontal = false,
|
||||
this.expanded = false,
|
||||
this.onPressed,
|
||||
this.onLongPress,
|
||||
this.selected = false,
|
||||
this.trailing = const [],
|
||||
this.duration = const Duration(milliseconds: 125),
|
||||
super.key,
|
||||
});
|
||||
|
|
@ -28,106 +35,119 @@ class NavigationButton extends ConsumerStatefulWidget {
|
|||
}
|
||||
|
||||
class _NavigationButtonState extends ConsumerState<NavigationButton> {
|
||||
bool showPopupButton = false;
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Tooltip(
|
||||
waitDuration: const Duration(seconds: 1),
|
||||
preferBelow: false,
|
||||
triggerMode: TooltipTriggerMode.longPress,
|
||||
message: widget.label ?? "",
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
final foreGroundColor = widget.selected
|
||||
? widget.expanded
|
||||
? Theme.of(context).colorScheme.onPrimary
|
||||
: Theme.of(context).colorScheme.primary
|
||||
: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6),
|
||||
child: ElevatedButton(
|
||||
onHover: (value) => setState(() => showPopupButton = value),
|
||||
style: ButtonStyle(
|
||||
elevation: const WidgetStatePropertyAll(0),
|
||||
padding: const WidgetStatePropertyAll(EdgeInsets.zero),
|
||||
backgroundColor: WidgetStatePropertyAll(
|
||||
widget.expanded && widget.selected ? Theme.of(context).colorScheme.primary : Colors.transparent,
|
||||
),
|
||||
iconSize: const WidgetStatePropertyAll(24),
|
||||
iconColor: WidgetStateProperty.resolveWith((states) {
|
||||
return foreGroundColor;
|
||||
}),
|
||||
foregroundColor: WidgetStateProperty.resolveWith((states) {
|
||||
return foreGroundColor;
|
||||
})),
|
||||
onPressed: widget.onPressed,
|
||||
onLongPress: widget.onLongPress,
|
||||
child: widget.horizontal
|
||||
? Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: getChildren(context),
|
||||
)
|
||||
: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: getChildren(context),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
List<Widget> getChildren(BuildContext context) {
|
||||
return [
|
||||
Flexible(
|
||||
child: ElevatedButton(
|
||||
style: ButtonStyle(
|
||||
elevation: const WidgetStatePropertyAll(0),
|
||||
padding: const WidgetStatePropertyAll(EdgeInsets.zero),
|
||||
backgroundColor: const WidgetStatePropertyAll(Colors.transparent),
|
||||
iconSize: const WidgetStatePropertyAll(24),
|
||||
iconColor: WidgetStateProperty.resolveWith((states) {
|
||||
return widget.selected
|
||||
? Theme.of(context).colorScheme.primary
|
||||
: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45);
|
||||
}),
|
||||
foregroundColor: WidgetStateProperty.resolveWith((states) {
|
||||
return widget.selected
|
||||
? Theme.of(context).colorScheme.primary
|
||||
: Theme.of(context).colorScheme.onSurface.withValues(alpha: 0.45);
|
||||
})),
|
||||
onPressed: widget.onPressed,
|
||||
child: AnimatedContainer(
|
||||
curve: Curves.fastOutSlowIn,
|
||||
duration: widget.duration,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Row(
|
||||
? Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
|
||||
child: SizedBox(
|
||||
height: 35,
|
||||
child: Row(
|
||||
spacing: 4,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
height: widget.selected ? 16 : 0,
|
||||
margin: const EdgeInsets.only(top: 1.5),
|
||||
width: 6,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Theme.of(context)
|
||||
.colorScheme
|
||||
.primary
|
||||
.withValues(alpha: widget.selected && !widget.expanded ? 1 : 0),
|
||||
),
|
||||
),
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected
|
||||
? widget.selectedIcon.setKey(Key("${widget.label}+selected"))
|
||||
: widget.icon.setKey(Key("${widget.label}+normal")),
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
if (widget.horizontal && widget.label != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 8.0),
|
||||
child: _Label(widget: widget),
|
||||
)
|
||||
const SizedBox(width: 6),
|
||||
if (widget.horizontal && widget.expanded) ...[
|
||||
if (widget.label != null)
|
||||
Expanded(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(minWidth: 80),
|
||||
child: Text(
|
||||
widget.label!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.trailing.isNotEmpty)
|
||||
AnimatedOpacity(
|
||||
duration: const Duration(milliseconds: 125),
|
||||
opacity: showPopupButton ? 1 : 0,
|
||||
child: PopupMenuButton(
|
||||
tooltip: context.localized.options,
|
||||
iconColor: foreGroundColor,
|
||||
iconSize: 18,
|
||||
itemBuilder: (context) => widget.trailing.popupMenuItems(useIcons: true),
|
||||
),
|
||||
)
|
||||
],
|
||||
],
|
||||
),
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
margin: EdgeInsets.only(top: widget.selected ? 8 : 0),
|
||||
height: widget.selected ? 6 : 0,
|
||||
width: widget.selected ? 14 : 0,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Theme.of(context).colorScheme.primary.withValues(alpha: widget.selected ? 1 : 0),
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Row(
|
||||
spacing: 8,
|
||||
children: [
|
||||
AnimatedSwitcher(
|
||||
duration: widget.duration,
|
||||
child: widget.selected ? widget.selectedIcon : widget.icon,
|
||||
),
|
||||
if (widget.label != null && widget.horizontal && widget.expanded)
|
||||
Flexible(child: Text(widget.label!))
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
margin: EdgeInsets.only(top: widget.selected ? 4 : 0),
|
||||
height: widget.selected ? 6 : 0,
|
||||
width: widget.selected ? 14 : 0,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
color: Theme.of(context).colorScheme.primary.withValues(alpha: widget.selected ? 1 : 0),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
class _Label extends StatelessWidget {
|
||||
const _Label({required this.widget});
|
||||
|
||||
final NavigationButton widget;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Text(
|
||||
widget.label!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.fade,
|
||||
style:
|
||||
Theme.of(context).textTheme.labelMedium?.copyWith(color: Theme.of(context).colorScheme.onSecondaryContainer),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue