Files
submanager/lib/widgets/floating_navigation_bar.dart
JiWoong Sul 2f60ef585a feat: 글래스모피즘 디자인 시스템 및 색상 가이드 전면 적용
- @doc/color.md 가이드라인에 따른 색상 시스템 전면 개편
- 딥 블루(#2563EB), 스카이 블루(#60A5FA) 메인 컬러로 변경
- 모든 화면과 위젯에 글래스모피즘 효과 일관성 있게 적용
- darkNavy, navyGray 등 새로운 텍스트 색상 체계 도입
- 공통 스낵바 및 다이얼로그 컴포넌트 추가
- Claude AI 프로젝트 컨텍스트 파일(CLAUDE.md) 추가

영향받은 컴포넌트:
- 10개 스크린 (main, settings, detail, splash 등)
- 30개 이상 위젯 (buttons, cards, forms 등)
- 테마 시스템 (AppColors, AppTheme)

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-11 18:41:05 +09:00

318 lines
8.8 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import '../theme/app_colors.dart';
import 'glassmorphism_card.dart';
class FloatingNavigationBar extends StatefulWidget {
final int selectedIndex;
final Function(int) onItemTapped;
final bool isVisible;
const FloatingNavigationBar({
super.key,
required this.selectedIndex,
required this.onItemTapped,
this.isVisible = true,
});
@override
State<FloatingNavigationBar> createState() => _FloatingNavigationBarState();
}
class _FloatingNavigationBarState extends State<FloatingNavigationBar>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
);
if (widget.isVisible) {
_controller.forward();
}
}
@override
void didUpdateWidget(FloatingNavigationBar oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.isVisible != oldWidget.isVisible) {
if (widget.isVisible) {
_controller.forward();
} else {
_controller.reverse();
}
}
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return Positioned(
bottom: 20,
left: 20,
right: 20,
child: Transform.translate(
offset: Offset(0, 100 * (1 - _animation.value)),
child: Opacity(
opacity: _animation.value,
child: Stack(
children: [
// 차단 레이어 - 크기 명시
Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.9),
borderRadius: BorderRadius.circular(24),
),
),
),
// 글래스모피즘 레이어
GlassmorphismCard(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
borderRadius: 24,
blur: 10.0,
backgroundColor: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_NavigationItem(
icon: Icons.home_rounded,
label: '',
isSelected: widget.selectedIndex == 0,
onTap: () => _onItemTapped(0),
),
_NavigationItem(
icon: Icons.analytics_rounded,
label: '분석',
isSelected: widget.selectedIndex == 1,
onTap: () => _onItemTapped(1),
),
_AddButton(
onTap: () => _onItemTapped(2),
),
_NavigationItem(
icon: Icons.qr_code_scanner_rounded,
label: 'SMS',
isSelected: widget.selectedIndex == 3,
onTap: () => _onItemTapped(3),
),
_NavigationItem(
icon: Icons.settings_rounded,
label: '설정',
isSelected: widget.selectedIndex == 4,
onTap: () => _onItemTapped(4),
),
],
),
),
],
),
),
),
);
},
);
}
void _onItemTapped(int index) {
HapticFeedback.lightImpact();
widget.onItemTapped(index);
}
}
class _NavigationItem extends StatelessWidget {
final IconData icon;
final String label;
final bool isSelected;
final VoidCallback onTap;
const _NavigationItem({
required this.icon,
required this.label,
required this.isSelected,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: isSelected
? AppColors.primaryColor.withValues(alpha: 0.1)
: Colors.transparent,
borderRadius: BorderRadius.circular(12),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 200),
child: Icon(
icon,
color: isSelected ? AppColors.primaryColor : AppColors.navyGray,
size: isSelected ? 26 : 24,
),
),
const SizedBox(height: 4),
AnimatedDefaultTextStyle(
duration: const Duration(milliseconds: 200),
style: TextStyle(
fontSize: 11,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? AppColors.primaryColor : AppColors.navyGray,
),
child: Text(label),
),
],
),
),
);
}
}
class _AddButton extends StatefulWidget {
final VoidCallback onTap;
const _AddButton({required this.onTap});
@override
State<_AddButton> createState() => _AddButtonState();
}
class _AddButtonState extends State<_AddButton>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 150),
vsync: this,
);
_scaleAnimation = Tween<double>(
begin: 1.0,
end: 0.9,
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
));
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) => _controller.forward(),
onTapUp: (_) {
_controller.reverse();
widget.onTap();
},
onTapCancel: () => _controller.reverse(),
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation.value,
child: Container(
width: 56,
height: 56,
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: AppColors.blueGradient,
),
borderRadius: BorderRadius.circular(16),
boxShadow: const [
BoxShadow(
color: AppColors.shadowBlack,
blurRadius: 12,
offset: Offset(0, 4),
),
],
),
child: const Icon(
Icons.add_rounded,
color: AppColors.pureWhite,
size: 28,
),
),
);
},
),
);
}
}
// 스크롤 감지를 위한 유틸리티 클래스
class FloatingNavBarScrollController {
final ScrollController scrollController;
final VoidCallback onHide;
final VoidCallback onShow;
double _lastScrollPosition = 0;
bool _isVisible = true;
FloatingNavBarScrollController({
required this.scrollController,
required this.onHide,
required this.onShow,
}) {
scrollController.addListener(_handleScroll);
}
void _handleScroll() {
final currentScroll = scrollController.position.pixels;
if (currentScroll > _lastScrollPosition && currentScroll > 50) {
// 스크롤 다운
if (_isVisible) {
_isVisible = false;
onHide();
}
} else if (currentScroll < _lastScrollPosition - 5) {
// 스크롤 업
if (!_isVisible) {
_isVisible = true;
onShow();
}
}
_lastScrollPosition = currentScroll;
}
void dispose() {
scrollController.removeListener(_handleScroll);
}
}