149 lines
4.5 KiB
Dart
149 lines
4.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import '../tema/pluriwave_theme.dart';
|
|
import 'pluri_glass_surface.dart';
|
|
import 'pluri_icon.dart';
|
|
|
|
class PluriNavItem {
|
|
const PluriNavItem({required this.glyph, required this.label});
|
|
|
|
final PluriIconGlyph glyph;
|
|
final String label;
|
|
}
|
|
|
|
class PluriBottomNavigation extends StatelessWidget {
|
|
const PluriBottomNavigation({
|
|
super.key,
|
|
required this.items,
|
|
required this.selectedIndex,
|
|
required this.onSelected,
|
|
});
|
|
|
|
final List<PluriNavItem> items;
|
|
final int selectedIndex;
|
|
final ValueChanged<int> onSelected;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final t = context.pluriTokens;
|
|
return PluriGlassSurface(
|
|
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 7),
|
|
borderRadius: BorderRadius.circular(999),
|
|
glowColor: t.glowColor.withValues(alpha: 0.28),
|
|
child: Row(
|
|
children: [
|
|
for (var i = 0; i < items.length; i++)
|
|
Expanded(
|
|
flex: i == selectedIndex ? 15 : 10,
|
|
child: _PluriNavButton(
|
|
item: items[i],
|
|
selected: i == selectedIndex,
|
|
onTap: () => onSelected(i),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _PluriNavButton extends StatelessWidget {
|
|
const _PluriNavButton({
|
|
required this.item,
|
|
required this.selected,
|
|
required this.onTap,
|
|
});
|
|
|
|
final PluriNavItem item;
|
|
final bool selected;
|
|
final VoidCallback onTap;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final t = context.pluriTokens;
|
|
final foreground = Theme.of(context).colorScheme.onSurface;
|
|
return Semantics(
|
|
button: true,
|
|
selected: selected,
|
|
label: item.label,
|
|
child: AnimatedContainer(
|
|
duration: context.pluriMotion.normal,
|
|
curve: Curves.easeOutCubic,
|
|
margin: EdgeInsets.symmetric(horizontal: selected ? 3 : 2),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(999),
|
|
gradient: selected
|
|
? LinearGradient(
|
|
colors: [
|
|
t.electricMagenta.withValues(alpha: 0.32),
|
|
t.warmCoral.withValues(alpha: 0.18),
|
|
],
|
|
)
|
|
: null,
|
|
border: Border.all(
|
|
color: selected
|
|
? Colors.white.withValues(alpha: 0.22)
|
|
: Colors.white.withValues(alpha: 0.06),
|
|
),
|
|
boxShadow: selected
|
|
? [
|
|
BoxShadow(
|
|
color: t.glowColor.withValues(alpha: 0.36),
|
|
blurRadius: 24,
|
|
spreadRadius: -6,
|
|
offset: const Offset(0, 8),
|
|
),
|
|
]
|
|
: const [],
|
|
),
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(999),
|
|
onTap: onTap,
|
|
child: Padding(
|
|
padding: EdgeInsets.symmetric(
|
|
horizontal: selected ? 8 : 3,
|
|
vertical: selected ? 8 : 7,
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
AnimatedScale(
|
|
scale: selected ? 1.16 : 0.96,
|
|
duration: context.pluriMotion.quick,
|
|
curve: Curves.easeOutBack,
|
|
child: PluriIcon(
|
|
glyph: item.glyph,
|
|
variant: selected
|
|
? PluriIconVariant.activeGlow
|
|
: PluriIconVariant.filled,
|
|
size: selected ? 42 : 34,
|
|
),
|
|
),
|
|
AnimatedSize(
|
|
duration: context.pluriMotion.quick,
|
|
curve: Curves.easeOutCubic,
|
|
child: selected
|
|
? Padding(
|
|
padding: const EdgeInsets.only(top: 2),
|
|
child: Text(
|
|
item.label,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
|
color: foreground,
|
|
fontWeight: FontWeight.w900,
|
|
letterSpacing: -0.2,
|
|
),
|
|
),
|
|
)
|
|
: const SizedBox.shrink(),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|