2f60ef585a
- @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>
431 lines
14 KiB
Dart
431 lines
14 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
|
|
import '../../controllers/add_subscription_controller.dart';
|
|
import '../../providers/category_provider.dart';
|
|
import '../common/form_fields/base_text_field.dart';
|
|
import '../common/form_fields/currency_input_field.dart';
|
|
import '../common/form_fields/date_picker_field.dart';
|
|
|
|
/// 구독 추가 화면의 폼 섹션
|
|
class AddSubscriptionForm extends StatelessWidget {
|
|
final AddSubscriptionController controller;
|
|
final Animation<double> fadeAnimation;
|
|
final Animation<Offset> slideAnimation;
|
|
final Function setState;
|
|
|
|
const AddSubscriptionForm({
|
|
super.key,
|
|
required this.controller,
|
|
required this.fadeAnimation,
|
|
required this.slideAnimation,
|
|
required this.setState,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return FadeTransition(
|
|
opacity: Tween<double>(begin: 0.0, end: 1.0).animate(
|
|
CurvedAnimation(
|
|
parent: controller.animationController!,
|
|
curve: const Interval(0.2, 1.0, curve: Curves.easeIn),
|
|
),
|
|
),
|
|
child: SlideTransition(
|
|
position: Tween<Offset>(
|
|
begin: const Offset(0.0, 0.4),
|
|
end: Offset.zero,
|
|
).animate(CurvedAnimation(
|
|
parent: controller.animationController!,
|
|
curve: const Interval(0.2, 1.0, curve: Curves.easeOutCubic),
|
|
)),
|
|
child: Card(
|
|
elevation: 1,
|
|
shadowColor: Colors.black12,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(24),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// 헤더
|
|
Row(
|
|
children: [
|
|
ShaderMask(
|
|
shaderCallback: (bounds) => LinearGradient(
|
|
colors: controller.gradientColors,
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
).createShader(bounds),
|
|
child: const Icon(
|
|
FontAwesomeIcons.fileLines,
|
|
size: 20,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
const Text(
|
|
'서비스 정보',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w700,
|
|
letterSpacing: -0.5,
|
|
color: Color(0xFF1E293B),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 24),
|
|
|
|
// 서비스명 필드
|
|
BaseTextField(
|
|
controller: controller.serviceNameController,
|
|
focusNode: controller.serviceNameFocus,
|
|
label: '서비스명',
|
|
hintText: '예: Netflix, Spotify',
|
|
textInputAction: TextInputAction.next,
|
|
onEditingComplete: () {
|
|
controller.monthlyCostFocus.requestFocus();
|
|
},
|
|
validator: (value) {
|
|
if (value == null || value.isEmpty) {
|
|
return '서비스명을 입력해주세요';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// 월 지출 및 통화 선택
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Expanded(
|
|
flex: 2,
|
|
child: CurrencyInputField(
|
|
controller: controller.monthlyCostController,
|
|
currency: controller.currency,
|
|
label: '월 지출',
|
|
focusNode: controller.monthlyCostFocus,
|
|
textInputAction: TextInputAction.next,
|
|
onEditingComplete: () {
|
|
controller.billingCycleFocus.requestFocus();
|
|
},
|
|
validator: (value) {
|
|
if (value == null || value.isEmpty) {
|
|
return '금액을 입력해주세요';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'통화',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
_CurrencySelector(
|
|
currency: controller.currency,
|
|
onChanged: (value) {
|
|
setState(() {
|
|
controller.currency = value;
|
|
});
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// 결제 주기
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'결제 주기',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
_BillingCycleSelector(
|
|
billingCycle: controller.billingCycle,
|
|
gradientColors: controller.gradientColors,
|
|
onChanged: (value) {
|
|
setState(() {
|
|
controller.billingCycle = value;
|
|
});
|
|
},
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// 다음 결제일
|
|
DatePickerField(
|
|
selectedDate: controller.nextBillingDate ?? DateTime.now(),
|
|
onDateSelected: (date) {
|
|
setState(() {
|
|
controller.nextBillingDate = date;
|
|
});
|
|
},
|
|
label: '다음 결제일',
|
|
firstDate: DateTime.now(),
|
|
lastDate: DateTime.now().add(const Duration(days: 365 * 2)),
|
|
primaryColor: controller.gradientColors[0],
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// 웹사이트 URL
|
|
BaseTextField(
|
|
controller: controller.websiteUrlController,
|
|
focusNode: controller.websiteUrlFocus,
|
|
label: '웹사이트 URL (선택)',
|
|
hintText: 'https://example.com',
|
|
keyboardType: TextInputType.url,
|
|
prefixIcon: Icon(
|
|
Icons.link_rounded,
|
|
color: Colors.grey[600],
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
|
|
// 카테고리 선택
|
|
Consumer<CategoryProvider>(
|
|
builder: (context, categoryProvider, child) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'카테고리',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
_CategorySelector(
|
|
categories: categoryProvider.categories,
|
|
selectedCategoryId: controller.selectedCategoryId,
|
|
gradientColors: controller.gradientColors,
|
|
onChanged: (categoryId) {
|
|
setState(() {
|
|
controller.selectedCategoryId = categoryId;
|
|
});
|
|
},
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 통화 선택기
|
|
class _CurrencySelector extends StatelessWidget {
|
|
final String currency;
|
|
final ValueChanged<String> onChanged;
|
|
|
|
const _CurrencySelector({
|
|
required this.currency,
|
|
required this.onChanged,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
children: [
|
|
_CurrencyOption(
|
|
label: '₩',
|
|
value: 'KRW',
|
|
isSelected: currency == 'KRW',
|
|
onTap: () => onChanged('KRW'),
|
|
),
|
|
const SizedBox(width: 8),
|
|
_CurrencyOption(
|
|
label: '\$',
|
|
value: 'USD',
|
|
isSelected: currency == 'USD',
|
|
onTap: () => onChanged('USD'),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 통화 옵션
|
|
class _CurrencyOption extends StatelessWidget {
|
|
final String label;
|
|
final String value;
|
|
final bool isSelected;
|
|
final VoidCallback onTap;
|
|
|
|
const _CurrencyOption({
|
|
required this.label,
|
|
required this.value,
|
|
required this.isSelected,
|
|
required this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Expanded(
|
|
child: InkWell(
|
|
onTap: onTap,
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
decoration: BoxDecoration(
|
|
color: isSelected
|
|
? const Color(0xFF3B82F6)
|
|
: Colors.grey.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
color: isSelected ? Colors.white : Colors.grey[600],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 결제 주기 선택기
|
|
class _BillingCycleSelector extends StatelessWidget {
|
|
final String billingCycle;
|
|
final List<Color> gradientColors;
|
|
final ValueChanged<String> onChanged;
|
|
|
|
const _BillingCycleSelector({
|
|
required this.billingCycle,
|
|
required this.gradientColors,
|
|
required this.onChanged,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final cycles = ['월간', '분기별', '반기별', '연간'];
|
|
|
|
return SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(
|
|
children: cycles.map((cycle) {
|
|
final isSelected = billingCycle == cycle;
|
|
return Padding(
|
|
padding: const EdgeInsets.only(right: 8),
|
|
child: InkWell(
|
|
onTap: () => onChanged(cycle),
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 20,
|
|
vertical: 12,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: isSelected
|
|
? gradientColors[0]
|
|
: Colors.grey.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
cycle,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: isSelected ? Colors.white : Colors.grey[700],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
/// 카테고리 선택기
|
|
class _CategorySelector extends StatelessWidget {
|
|
final List<dynamic> categories;
|
|
final String? selectedCategoryId;
|
|
final List<Color> gradientColors;
|
|
final ValueChanged<String?> onChanged;
|
|
|
|
const _CategorySelector({
|
|
required this.categories,
|
|
required this.selectedCategoryId,
|
|
required this.gradientColors,
|
|
required this.onChanged,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
children: categories.map((category) {
|
|
final isSelected = selectedCategoryId == category.id;
|
|
return InkWell(
|
|
onTap: () => onChanged(category.id),
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 10,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: isSelected
|
|
? gradientColors[0]
|
|
: Colors.grey.withValues(alpha: 0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
category.icon,
|
|
style: const TextStyle(fontSize: 16),
|
|
),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
category.name,
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: isSelected ? Colors.white : Colors.grey[700],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
);
|
|
}
|
|
} |