391 lines
11 KiB
Dart
391 lines
11 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_lucide/flutter_lucide.dart';
|
|
|
|
import '../../core/theme/app_colors.dart';
|
|
import '../../core/user/user_state.dart';
|
|
import '../../core/theme/app_spacing.dart';
|
|
import '../../core/theme/app_typography.dart';
|
|
import '../../shared/widgets/top_nav_bar.dart';
|
|
|
|
/// Recharge screen - matches Pencil tPjdN
|
|
class RechargeScreen extends StatelessWidget {
|
|
const RechargeScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: AppColors.background,
|
|
appBar: PreferredSize(
|
|
preferredSize: const Size.fromHeight(56),
|
|
child: TopNavBar(
|
|
title: 'Recharge',
|
|
credits: UserCreditsData.of(context)?.creditsDisplay ?? '--',
|
|
showBackButton: true,
|
|
onBack: () => Navigator.of(context).pop(),
|
|
onCreditsTap: null,
|
|
),
|
|
),
|
|
body: SingleChildScrollView(
|
|
padding: const EdgeInsets.only(bottom: AppSpacing.screenPaddingLarge),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_CreditsSection(
|
|
currentCredits:
|
|
UserCreditsData.of(context)?.creditsDisplay ?? '--',
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.screenPaddingLarge,
|
|
vertical: AppSpacing.xxl,
|
|
),
|
|
child: Text(
|
|
'Select Tier',
|
|
style: AppTypography.bodyMedium.copyWith(
|
|
color: AppColors.textPrimary,
|
|
),
|
|
),
|
|
),
|
|
_TierCard(
|
|
credits: '100 Credits',
|
|
price: '¥6',
|
|
onBuy: () {},
|
|
),
|
|
const SizedBox(height: AppSpacing.xl),
|
|
_TierCardRecommended(
|
|
credits: '500 Credits',
|
|
price: '¥25 Save ¥5',
|
|
onBuy: () {},
|
|
),
|
|
const SizedBox(height: AppSpacing.xl),
|
|
_TierCardPopular(
|
|
credits: '1,000 Credits',
|
|
price: '¥45 Save ¥15',
|
|
onBuy: () {},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _CreditsSection extends StatelessWidget {
|
|
const _CreditsSection({required this.currentCredits});
|
|
|
|
final String currentCredits;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
margin: const EdgeInsets.all(AppSpacing.screenPadding),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.xxl,
|
|
vertical: AppSpacing.xl,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primary,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(
|
|
color: AppColors.primary.withValues(alpha: 0.5),
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.primaryShadow.withValues(alpha: 0.25),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(LucideIcons.sparkles, size: 28, color: AppColors.surface),
|
|
const SizedBox(width: AppSpacing.md),
|
|
Text(
|
|
currentCredits,
|
|
style: AppTypography.bodyLarge.copyWith(
|
|
fontSize: 32,
|
|
fontWeight: FontWeight.w700,
|
|
color: AppColors.surface,
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Text(
|
|
'Current Credits',
|
|
style: AppTypography.caption.copyWith(
|
|
color: AppColors.surface.withValues(alpha: 0.8),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TierCard extends StatelessWidget {
|
|
const _TierCard({
|
|
required this.credits,
|
|
required this.price,
|
|
required this.onBuy,
|
|
});
|
|
|
|
final String credits;
|
|
final String price;
|
|
final VoidCallback onBuy;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
margin: const EdgeInsets.symmetric(horizontal: AppSpacing.screenPadding),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.xxl,
|
|
vertical: AppSpacing.xl,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surface,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: AppColors.border),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.shadowLight,
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
credits,
|
|
style: AppTypography.bodyLarge.copyWith(
|
|
color: AppColors.textPrimary,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.xs),
|
|
Text(
|
|
price,
|
|
style: AppTypography.bodyRegular.copyWith(
|
|
color: AppColors.textSecondary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
_BuyButton(onTap: onBuy),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TierCardRecommended extends StatelessWidget {
|
|
const _TierCardRecommended({
|
|
required this.credits,
|
|
required this.price,
|
|
required this.onBuy,
|
|
});
|
|
|
|
final String credits;
|
|
final String price;
|
|
final VoidCallback onBuy;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Container(
|
|
margin:
|
|
const EdgeInsets.symmetric(horizontal: AppSpacing.screenPadding),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.xxl,
|
|
vertical: AppSpacing.xl,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surface,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: AppColors.border),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.shadowLight,
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
credits,
|
|
style: AppTypography.bodyLarge.copyWith(
|
|
color: AppColors.textPrimary,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Text(
|
|
price,
|
|
style: AppTypography.bodyRegular.copyWith(
|
|
color: AppColors.textSecondary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
_BuyButton(onTap: onBuy),
|
|
],
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 0,
|
|
right: AppSpacing.screenPadding,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.xs,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primaryLight,
|
|
borderRadius: const BorderRadius.only(
|
|
topRight: Radius.circular(16),
|
|
bottomLeft: Radius.circular(16),
|
|
),
|
|
),
|
|
child: Text(
|
|
'Recommended',
|
|
style: AppTypography.label.copyWith(
|
|
color: AppColors.primary,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TierCardPopular extends StatelessWidget {
|
|
const _TierCardPopular({
|
|
required this.credits,
|
|
required this.price,
|
|
required this.onBuy,
|
|
});
|
|
|
|
final String credits;
|
|
final String price;
|
|
final VoidCallback onBuy;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
Container(
|
|
margin:
|
|
const EdgeInsets.symmetric(horizontal: AppSpacing.screenPadding),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.xxl,
|
|
vertical: AppSpacing.xl,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surface,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(color: AppColors.border),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: AppColors.shadowLight,
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
credits,
|
|
style: AppTypography.bodyLarge.copyWith(
|
|
color: AppColors.textPrimary,
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.sm),
|
|
Text(
|
|
price,
|
|
style: AppTypography.bodyRegular.copyWith(
|
|
color: AppColors.textSecondary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
_BuyButton(onTap: onBuy),
|
|
],
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 0,
|
|
right: AppSpacing.screenPadding,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.md,
|
|
vertical: AppSpacing.xs,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.accentOrangeLight,
|
|
borderRadius: const BorderRadius.only(
|
|
topRight: Radius.circular(16),
|
|
bottomLeft: Radius.circular(16),
|
|
),
|
|
),
|
|
child: Text(
|
|
'Most Popular',
|
|
style: AppTypography.label.copyWith(
|
|
color: AppColors.accentOrange,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _BuyButton extends StatelessWidget {
|
|
const _BuyButton({required this.onTap});
|
|
|
|
final VoidCallback onTap;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: AppSpacing.xl,
|
|
vertical: AppSpacing.md,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primary,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Text(
|
|
'Buy',
|
|
style: AppTypography.bodyRegular.copyWith(
|
|
color: AppColors.surface,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|