yumi-flutter/lib/modules/user/vip/vip_detail_page.dart

787 lines
23 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:yumi/app/constants/sc_global_config.dart';
import 'package:yumi/app/routes/sc_fluro_navigator.dart';
import 'package:yumi/modules/user/vip/vip_route.dart';
class VipDetailPage extends StatefulWidget {
const VipDetailPage({super.key});
@override
State<VipDetailPage> createState() => _VipDetailPageState();
}
class _VipDetailPageState extends State<VipDetailPage> {
int _selectedLevel = 1;
late bool _showUpdateButton;
@override
void initState() {
super.initState();
_showUpdateButton = false;
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Stack(
children: [
Positioned.fill(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: const [Color(0xFF0D2B22), Color(0xFF0E0E0E)],
stops: const [0, 0.40],
),
),
),
),
Positioned(
left: 0,
right: 0,
top: 0,
child: Image.asset(
'sc_images/vip/sc_vip_page_bg.png',
width: ScreenUtil().screenWidth,
fit: BoxFit.fitWidth,
alignment: Alignment.topCenter,
),
),
Positioned(
left: 0,
right: 0,
top: 0,
height: 300.w,
child: IgnorePointer(
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.black.withValues(alpha: 0.36),
Colors.black.withValues(alpha: 0.62),
Colors.transparent,
],
stops: const [0, 0.52, 1],
),
),
),
),
),
SafeArea(
bottom: false,
child: Column(
children: [
_buildTopBar(),
_buildLevelTabs(),
Expanded(
child: SingleChildScrollView(
physics: const BouncingScrollPhysics(),
padding: EdgeInsets.fromLTRB(12.w, 40.w, 12.w, 18.w),
child: Column(
children: [
_buildLevelCard(),
SizedBox(height: 30.w),
_buildLevelDivider(),
SizedBox(height: 3.w),
_buildSectionTitle('Decoration Privileges'),
SizedBox(height: 10.w),
_buildDecorationGrid(),
SizedBox(height: 20.w),
_buildSectionTitle('VIP Privileges'),
SizedBox(height: 14.w),
_buildPrivilegeGrid(),
SizedBox(height: 76.w),
],
),
),
),
_buildActivateBar(),
],
),
),
],
),
);
}
Widget _buildTopBar() {
return SizedBox(
height: 44.w,
child: Stack(
alignment: Alignment.center,
children: [
Align(
alignment: AlignmentDirectional.centerStart,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => Navigator.pop(context),
child: SizedBox(
width: 44.w,
height: 44.w,
child: Icon(
SCGlobalConfig.lang == 'ar'
? Icons.keyboard_arrow_right
: Icons.keyboard_arrow_left,
color: Colors.white,
size: 28.w,
),
),
),
),
Text(
'VIP',
style: TextStyle(
color: Colors.white,
fontSize: 18.sp,
fontWeight: FontWeight.w500,
),
),
Align(
alignment: AlignmentDirectional.centerEnd,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => SCNavigatorUtils.push(context, VipRoute.instruction),
child: Padding(
padding: EdgeInsetsDirectional.only(end: 12.w),
child: Image.asset(
'sc_images/vip/sc_vip_question.png',
width: 24.w,
height: 24.w,
),
),
),
),
],
),
);
}
Widget _buildLevelTabs() {
return SizedBox(
height: 43.w,
child: ListView.separated(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
padding: EdgeInsets.symmetric(horizontal: 12.w),
itemCount: 5,
separatorBuilder: (_, __) => SizedBox(width: 30.w),
itemBuilder: (context, index) {
final level = index + 1;
final selected = level == _selectedLevel;
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => setState(() => _selectedLevel = level),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(height: 4.w),
Text(
'VIP$level',
style: TextStyle(
color:
selected
? Colors.white
: Colors.white.withValues(alpha: 0.42),
fontSize: 15.sp,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 6.w),
SizedBox(
width: 0,
height: 9.5.w,
child: OverflowBox(
minWidth: 60.w,
maxWidth: 60.w,
alignment: Alignment.center,
child:
selected
? Image.asset(
'sc_images/vip/sc_vip_selected_line.png',
width: 60.w,
height: 9.5.w,
fit: BoxFit.fill,
)
: const SizedBox.shrink(),
),
),
],
),
);
},
),
);
}
Widget _buildLevelCard() {
final assetLevel = _assetLevel;
return Center(
child: SizedBox(
width: 351.w,
height: 124.5.w,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.w),
border: Border.all(
color: const Color(0xFFEBCB76),
width: 1.w,
),
image: DecorationImage(
image: AssetImage(
'sc_images/vip/sc_vip_card_bg_$assetLevel.png',
),
fit: BoxFit.fill,
),
),
),
),
PositionedDirectional(
start: 20.w,
top: 33.w,
child: _buildVipLevelMark(_selectedLevel, scale: 1.18),
),
PositionedDirectional(
start: 22.w,
top: 80.w,
child: Text(
'Not activated',
style: TextStyle(
color: const Color(0xFFF2C766).withValues(alpha: 0.78),
fontSize: 12.sp,
fontWeight: FontWeight.w500,
),
),
),
PositionedDirectional(
end: 24.w,
top: -36.w,
child: Image.asset(
'sc_images/vip/sc_vip_badge_$assetLevel.png',
width: 135.w,
height: 135.w,
fit: BoxFit.contain,
),
),
],
),
),
);
}
Widget _buildLevelDivider() {
final ornamentLayout = _ornamentLayoutForLevel(_assetLevel);
return SizedBox(
height: 38.w,
child: Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Positioned(
left: -12.w,
right: -12.w,
top: 0,
height: 8.w,
child: Image.asset(
'sc_images/vip/sc_vip_top_border_$_assetLevel.png',
fit: BoxFit.fill,
),
),
Positioned(
left: 0,
right: 0,
top: ornamentLayout.top.w,
child: Transform.translate(
offset: Offset(ornamentLayout.dx.w, 0),
child: Center(
child: Image.asset(
'sc_images/vip/sc_vip_card_ornament_$_assetLevel.png',
width: ornamentLayout.width.w,
height: ornamentLayout.height.w,
fit: BoxFit.contain,
),
),
),
),
],
),
);
}
Widget _buildSectionTitle(String title) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'sc_images/vip/sc_vip_title_left.png',
width: 16.w,
height: 20.w,
fit: BoxFit.contain,
),
SizedBox(width: 8.w),
Text(
title,
style: TextStyle(
color: Colors.white,
fontSize: 18.sp,
fontWeight: FontWeight.w500,
),
),
SizedBox(width: 8.w),
Image.asset(
'sc_images/vip/sc_vip_title_right.png',
width: 16.w,
height: 20.w,
fit: BoxFit.contain,
),
],
);
}
Widget _buildDecorationGrid() {
final items = [
_VipFeatureData(
'SVIP Badge',
'sc_images/vip/sc_vip_badge_$_assetLevel.png',
),
_VipFeatureData('Frame', null, Icons.person_pin_circle_outlined),
_VipFeatureData('Mount', null, Icons.auto_awesome_motion),
_VipFeatureData('Mic Animation', null, Icons.radio_button_checked),
_VipFeatureData('Entry Effect', null, Icons.airline_seat_recline_extra),
];
return Wrap(
spacing: 10.w,
runSpacing: 10.w,
children:
items
.map(
(item) => _buildFeatureTile(
item,
width: item.title == 'Entry Effect' ? 206.w : 98.w,
height: 100.w,
),
)
.toList(),
);
}
Widget _buildPrivilegeGrid() {
final items = [
_VipFeatureData('Gif Profile\nPicture', null, Icons.badge_outlined),
_VipFeatureData('Colorful\nNickname', null, Icons.credit_card),
_VipFeatureData('Gif Room\nPicture', null, Icons.home_rounded),
_VipFeatureData('Colorful ID', null, Icons.pin_rounded),
];
return Wrap(
spacing: 34.w,
runSpacing: 24.w,
children:
items.asMap().entries.map((entry) {
final item = entry.value;
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap:
() => SCNavigatorUtils.push(
context,
'${VipRoute.benefit}?index=${entry.key}',
),
child: SizedBox(
width: 74.w,
child: Column(
children: [
Container(
width: 46.w,
height: 46.w,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withValues(alpha: 0.08),
),
alignment: Alignment.center,
child: Icon(
item.icon,
color: const Color(0xFFFF8E3D),
size: 23.w,
),
),
SizedBox(height: 7.w),
Text(
item.title,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.sp,
fontWeight: FontWeight.w400,
height: 1.1,
),
),
],
),
),
);
}).toList(),
);
}
Widget _buildRewardPlaceholder(IconData icon) {
return Center(
child: Container(
width: 46.w,
height: 46.w,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
colors: [
const Color(0xFFFFD155).withValues(alpha: 0.28),
Colors.white.withValues(alpha: 0.06),
],
),
border: Border.all(
color: const Color(0xFFFFD155).withValues(alpha: 0.45),
width: 0.8.w,
),
),
alignment: Alignment.center,
child: Icon(icon, color: const Color(0xFFFFD155), size: 24.w),
),
);
}
Widget _buildWideRewardPlaceholder() {
return Container(
width: double.infinity,
height: 40.w,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.w),
gradient: LinearGradient(
colors: [
const Color(0xFFFFD155).withValues(alpha: 0.14),
const Color(0xFF7F4DFF).withValues(alpha: 0.16),
const Color(0xFFFFD155).withValues(alpha: 0.14),
],
),
border: Border.all(
color: const Color(0xFFFFD155).withValues(alpha: 0.35),
width: 0.8.w,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
for (int i = 0; i < 5; i++)
Container(
width: 4.w,
height: 4.w,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withValues(alpha: 0.45),
),
),
],
),
);
}
Widget _buildFeatureTile(
_VipFeatureData item, {
required double width,
required double height,
}) {
final isWide = item.title == 'Entry Effect';
return Container(
width: width,
height: height,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6.w),
border: Border.all(color: const Color(0xFFEBCB76), width: 1.w),
color: Colors.black.withValues(alpha: 0.38),
),
padding: EdgeInsets.symmetric(horizontal: 8.w, vertical: 8.w),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (item.assetPath != null)
Expanded(child: Image.asset(item.assetPath!, fit: BoxFit.contain))
else
Expanded(
child:
isWide
? Center(child: _buildWideRewardPlaceholder())
: _buildRewardPlaceholder(
item.icon ?? Icons.auto_awesome,
),
),
SizedBox(height: 5.w),
Text(
item.title,
maxLines: 2,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontSize: 12.sp,
fontWeight: FontWeight.w400,
),
),
],
),
);
}
Widget _buildActivateBar() {
final bottomInset = MediaQuery.of(context).padding.bottom;
final actionButton = _actionButtonConfigForLevel(_assetLevel);
final barOverflow = 20.w + bottomInset;
return SizedBox(
height: 106.5.w,
width: double.infinity,
child: Stack(
clipBehavior: Clip.none,
children: [
Positioned(
left: 0,
right: 0,
top: 0,
bottom: -barOverflow,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.w),
topRight: Radius.circular(20.w),
),
child: Image.asset(
'sc_images/vip/sc_vip_card_bg_$_assetLevel.png',
fit: BoxFit.fitWidth,
),
),
),
Positioned.fill(
child: Padding(
padding: EdgeInsets.fromLTRB(
30.w,
30.w,
30.w,
10.w + bottomInset,
),
child: Row(
children: [
Container(
width: 22.w,
height: 22.w,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFFFA629),
),
alignment: Alignment.center,
child: Icon(
Icons.stars_rounded,
color: Colors.white,
size: 14.w,
),
),
SizedBox(width: 6.w),
Text(
'30.5 M / 30 Days',
style: TextStyle(
color: const Color(0xFFFFE8A7),
fontSize: 16.sp,
fontWeight: FontWeight.w700,
),
),
const Spacer(),
Container(
width: 106.w,
height: 42.w,
alignment: Alignment.center,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(actionButton.backgroundAssetPath),
fit: BoxFit.fill,
),
),
child: Text(
actionButton.label,
textAlign: TextAlign.center,
style: TextStyle(
color: actionButton.textColor,
fontFamily: actionButton.fontFamily,
fontSize: actionButton.fontSize.sp,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w700,
height: 1,
),
),
),
],
),
),
),
],
),
);
}
Widget _buildVipLevelMark(int level, {double scale = 1}) {
return Transform.scale(
scale: scale,
alignment: Alignment.centerLeft,
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.asset(
'sc_images/vip/sc_vip_letter_v.png',
width: 28.w,
height: 24.7.w,
fit: BoxFit.fill,
),
Image.asset(
'sc_images/vip/sc_vip_letter_i.png',
width: 14.w,
height: 24.7.w,
fit: BoxFit.fill,
),
Image.asset(
'sc_images/vip/sc_vip_letter_p.png',
width: 28.w,
height: 24.7.w,
fit: BoxFit.fill,
),
SizedBox(width: 3.w),
_buildVipLevelNumber(level),
],
),
);
}
Widget _buildVipLevelNumber(int level) {
return Image.asset(
'sc_images/vip/sc_vip_number_${level}_filled.png',
height: 25.w,
fit: BoxFit.fill,
color: const Color(0xFFFFD155),
colorBlendMode: BlendMode.srcIn,
);
}
_VipOrnamentLayout _ornamentLayoutForLevel(int level) {
switch (level) {
case 1:
return const _VipOrnamentLayout(
width: 176.5,
height: 36,
top: -10,
dx: 0,
);
case 2:
return const _VipOrnamentLayout(
width: 246,
height: 61,
top: -20,
dx: 0,
);
case 3:
return const _VipOrnamentLayout(
width: 277,
height: 79.5,
top: -35,
dx: 0,
);
case 4:
return const _VipOrnamentLayout(
width: 240.5,
height: 79.5,
top: -35,
dx: 0,
);
case 5:
default:
return const _VipOrnamentLayout(
width: 282.5,
height: 101.5,
top: -48,
dx: 0,
);
}
}
_VipActionButtonConfig _actionButtonConfigForLevel(int level) {
switch (level) {
case 1:
case 2:
case 3:
case 4:
case 5:
default:
return _showUpdateButton
? const _VipActionButtonConfig.update()
: const _VipActionButtonConfig.activate();
}
}
int get _assetLevel => _selectedLevel.clamp(1, 5).toInt();
}
class _VipOrnamentLayout {
const _VipOrnamentLayout({
required this.width,
required this.height,
required this.top,
required this.dx,
});
final double width;
final double height;
final double top;
final double dx;
}
class _VipFeatureData {
const _VipFeatureData(this.title, this.assetPath, [this.icon]);
final String title;
final String? assetPath;
final IconData? icon;
}
class _VipActionButtonConfig {
const _VipActionButtonConfig({
required this.label,
required this.backgroundAssetPath,
required this.textColor,
required this.fontSize,
required this.fontFamily,
});
const _VipActionButtonConfig.activate()
: this(
label: 'Activate',
backgroundAssetPath: 'sc_images/vip/sc_vip_activate_button_bg.png',
textColor: const Color(0xFF7B4B16),
fontSize: 14,
fontFamily: null,
);
const _VipActionButtonConfig.update()
: this(
label: 'Update',
backgroundAssetPath: 'sc_images/vip/sc_vip_update_button_bg.png',
textColor: const Color(0xFF740000),
fontSize: 16,
fontFamily: 'Source Han Sans SC',
);
final String label;
final String backgroundAssetPath;
final Color textColor;
final double fontSize;
final String? fontFamily;
}