feat(mine): 重做我的页会员卡与功能宫格布局
This commit is contained in:
Vicky authored and trae-solo-agent committed
1 parent
e7399fa3fd
commit
53e8c924a6
12 files changed
+1969
-513
No files matched your search
@@ -48,10 +48,20 @@ abstract final class AppColors {
|
||||
static const vipGoldStart = Color(0xFFF5D9A0);
|
||||
static const vipGoldEnd = Color(0xFFE8B65A);
|
||||
|
||||
/// 「我的」页 VIP 卡的浅香槟金（见设计稿，接近纯色）。
|
||||
static const vipCardStart = Color(0xFFF6E8C6);
|
||||
static const vipCardEnd = Color(0xFFEDD9A8);
|
||||
static const vipBadgeSurface = Color(0x1F3D2408);
|
||||
/// 「我的」页 VIP 卡：品牌酒红、暖黑与香槟金共同形成会员层级。
|
||||
static const vipCardStart = Color(0xFF351318);
|
||||
static const vipCardMiddle = Color(0xFF1B1112);
|
||||
static const vipCardEnd = Color(0xFF0D0B0C);
|
||||
static const vipCardBorder = Color(0x66F5D9A0);
|
||||
static const vipCardRedGlow = Color(0x52F04E4E);
|
||||
static const vipCardGoldGlow = Color(0x38F3B34C);
|
||||
static const vipCardText = Color(0xFFFFF5E6);
|
||||
static const vipCardMuted = Color(0xB3F5D9A0);
|
||||
static const vipBadgeSurface = Color(0x24FFFFFF);
|
||||
static const vipBenefitSurface = Color(0x12FFFFFF);
|
||||
static const vipBenefitBorder = Color(0x33F5D9A0);
|
||||
static const vipButtonStart = brandRed;
|
||||
static const vipButtonEnd = Color(0xFFFF745E);
|
||||
static const bronze = Color(0xFFCD7F32);
|
||||
static const bronzeDeep = Color(0xFFA9713A);
|
||||
static const rankSilver = Color(0xFFC0C0C0);
|
||||
@@ -113,9 +123,18 @@ abstract final class AppColors {
|
||||
static const mineGridSurface = Color(0x99101010);
|
||||
static const minePanelSurface = Color(0xFF101010);
|
||||
static const mineMoreDivider = Color(0xFF1C1C1E);
|
||||
static const mineGridDivider = Color(0xFF2A2A2A);
|
||||
static const mineGridDivider = Color(0x10FFFFFF);
|
||||
static const mineGridIconSurface = Color(0xFF1C1C1E);
|
||||
static const mineGridLabel = Color(0xFFE6E6EB);
|
||||
static const mineGridIconAccent = brandRed;
|
||||
|
||||
/// 个人数据图标：品牌红的亮面、暗部与暖白反光。
|
||||
static const mineStatHighlight = Color(0xFFFFAAA3);
|
||||
static const mineStatShade = Color(0xFFAF263C);
|
||||
static const mineStatDepth = Color(0xFF681D2B);
|
||||
static const mineStatGlint = Color(0xFFFFE8E2);
|
||||
static const mineStatEdge = Color(0x80FFD1CB);
|
||||
static const mineStatGlow = Color(0x24F04E4E);
|
||||
static const mineIconWallet = Color(0xFFF5C451);
|
||||
static const mineIconDownloads = Color(0xFF4DA3FF);
|
||||
static const mineIconHistory = Color(0xFF4ADE80);
|
||||
|
||||
@@ -141,7 +141,7 @@ abstract final class AppDimens {
|
||||
static const double homePrimarySecondaryGap = 8;
|
||||
static const double homeSecondaryGridGap = 10;
|
||||
static const double homeHeaderIcon = 22;
|
||||
static const double homeActionSlot = 40;
|
||||
static const double homeActionSlot = tapTarget;
|
||||
static const double homeActionIcon = 30;
|
||||
static const double homeActionGap = 6;
|
||||
|
||||
@@ -184,7 +184,7 @@ abstract final class AppDimens {
|
||||
static const double followingTabFont = 18;
|
||||
static const double followingTabGap = 24;
|
||||
static const double followingEditIconSize = 20;
|
||||
static const double followingEditHitSize = 40;
|
||||
static const double followingEditHitSize = tapTarget;
|
||||
static const double followingAddIconSize = 20;
|
||||
static const double followingAddIconStroke = 1.5;
|
||||
static const double followingGridGap = 6;
|
||||
@@ -269,32 +269,44 @@ abstract final class AppDimens {
|
||||
static const double mineGridIconSurface = 44;
|
||||
static const double mineGridIcon = 22;
|
||||
static const double mineGridLabel = 12;
|
||||
static const double mineGridLabelLineHeight = 1.15;
|
||||
static const double mineGridDividerWidth = 1;
|
||||
|
||||
/// 宫格内部分隔线：0.5pt 发丝线，深色底上比 1pt 更轻。
|
||||
static const double mineGridHairline = 0.5;
|
||||
static const int mineGridRows = 2;
|
||||
static const double mineGridHeight =
|
||||
mineGridCellHeight * mineGridRows + mineGridHairline;
|
||||
static const double mineSectionTitleFont = 16;
|
||||
static const double mineSectionLinkFont = 12;
|
||||
static const double mineSectionGap = 12;
|
||||
|
||||
/// 「我的」页新版：快捷图标行与服务列表。
|
||||
static const double mineQuickActionIcon = 28;
|
||||
static const double mineQuickActionLabelFont = 14;
|
||||
static const double mineQuickActionGap = 8;
|
||||
static const double mineServiceRowHeight = 56;
|
||||
static const double mineServiceIcon = 24;
|
||||
static const double mineServiceTitleFont = 16;
|
||||
static const double mineServiceValueFont = 14;
|
||||
static const double mineVipBenefitFont = 14;
|
||||
static const double mineVipBenefitIcon = 20;
|
||||
static const double mineVipBenefitBox = 30;
|
||||
static const double mineVipBenefitBoxRadius = 7;
|
||||
static const double mineVipBenefitGlyph = 17;
|
||||
static const double mineVipBenefitRowGap = 4;
|
||||
static const double mineVipButtonHeight = 36;
|
||||
/// 「我的」页会员卡。高度由内容撑开，上下内边距恒为 [mineVipPadding]。
|
||||
static const double mineVipRadius = 18;
|
||||
static const double mineVipPadding = 16;
|
||||
static const double mineVipTitleFont = 22;
|
||||
static const double mineVipSubtitleFont = 12;
|
||||
static const double mineVipEmblem = 48;
|
||||
static const double mineVipEmblemIcon = 28;
|
||||
static const double mineVipActionWidth = 100;
|
||||
static const double mineVipBenefitFont = 10.5;
|
||||
static const double mineVipBenefitBox = 34;
|
||||
static const double mineVipBenefitBoxRadius = 11;
|
||||
static const double mineVipBenefitGlyph = 19;
|
||||
static const double mineVipBenefitRowGap = 6;
|
||||
static const double mineVipButtonHeight = tapTarget;
|
||||
static const double mineContinueCardWidth = 96;
|
||||
static const double mineContinueRowHeight = 172;
|
||||
static const double mineContinueTitleFont = 13;
|
||||
static const double mineContinueMetaFont = 11;
|
||||
static const double mineStatsValueFont = 18;
|
||||
static const double mineStatsLabelFont = 11;
|
||||
static const double mineStatsValueFont = 24;
|
||||
static const double mineStatsLabelFont = 12;
|
||||
static const double mineStatsIcon = 42;
|
||||
static const double mineStatsMinHeight = 104;
|
||||
static const double mineStatsDividerHeight = 32;
|
||||
static const double mineStatsDividerWidth = 0.5;
|
||||
static const double mineStatsValueLineHeight = 1.1;
|
||||
static const double mineStatsLabelLineHeight = 1.25;
|
||||
static const double minePanelPadding = 12;
|
||||
static const double mineMoreRowHeight = 52;
|
||||
static const double mineMoreFont = 15;
|
||||
|
||||
@@ -31,8 +31,10 @@ import '../watch_records/watch_records_page.dart';
|
||||
import 'mine_binding.dart';
|
||||
import 'mine_logic.dart';
|
||||
import 'mine_types.dart';
|
||||
import 'widgets/mine_action_grid.dart';
|
||||
import 'widgets/mine_header.dart';
|
||||
import 'widgets/mine_menu.dart';
|
||||
import 'widgets/mine_stats_panel.dart';
|
||||
|
||||
/// K28-B 我的页。
|
||||
class MyPage extends StatefulWidget {
|
||||
@@ -84,7 +86,9 @@ class _MyPageState extends State<MyPage> {
|
||||
_activationRefreshScheduled = true;
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
_activationRefreshScheduled = false;
|
||||
if (mounted) unawaited(_favorites.load());
|
||||
if (!mounted) return;
|
||||
unawaited(_favorites.load());
|
||||
_refreshWallet(onlyIfMissing: true);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -96,9 +100,17 @@ class _MyPageState extends State<MyPage> {
|
||||
if (!mounted || !widget.active) return;
|
||||
logic.syncPage(active: true, wasActive: false);
|
||||
unawaited(_favorites.load());
|
||||
_refreshWallet();
|
||||
});
|
||||
}
|
||||
|
||||
void _refreshWallet({bool onlyIfMissing = false}) {
|
||||
if (!_auth.isSignedIn) return;
|
||||
final wallet = context.read<WalletController>();
|
||||
if (wallet.loading || (onlyIfMissing && wallet.snapshot != null)) return;
|
||||
unawaited(wallet.load());
|
||||
}
|
||||
|
||||
void _onAuthChanged() {
|
||||
final signedIn = _auth.isSignedIn;
|
||||
if (signedIn == _wasSignedIn) return;
|
||||
@@ -165,78 +177,62 @@ class _MyPageState extends State<MyPage> {
|
||||
}
|
||||
|
||||
Widget _body(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return ListView(
|
||||
key: const Key('mine-page-scroll'),
|
||||
padding: const EdgeInsets.only(bottom: AppDimens.spaceXl),
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.pageHorizontal,
|
||||
),
|
||||
child: MineHeader(
|
||||
_section(
|
||||
MineHeader(
|
||||
onLogin: _openLogin,
|
||||
onEdit: () => _push(const AccountProfilePage()),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.spaceSm),
|
||||
_section(_statsPanel()),
|
||||
const SizedBox(height: AppDimens.spaceMd),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.pageHorizontal,
|
||||
),
|
||||
child: MineVipBanner(
|
||||
onOpen: () => _openDestination(MineDestination.vip),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.mineSectionGap),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.pageHorizontal,
|
||||
),
|
||||
child: MineQuickActions(
|
||||
onWallet: () => _openDestination(MineDestination.wallet),
|
||||
onFavorites: () => _push(const FavoritesPage()),
|
||||
onDownloads: () => _openDestination(MineDestination.downloads),
|
||||
onHistory: () => _openDestination(MineDestination.history),
|
||||
),
|
||||
_section(
|
||||
MineVipBanner(onOpen: () => _openDestination(MineDestination.vip)),
|
||||
),
|
||||
const SizedBox(height: AppDimens.mineSectionGap),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.mineGridHorizontal,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
l10n.moreServices,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: AppDimens.mineSectionTitle,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.spaceSm),
|
||||
MineServiceList(
|
||||
onOpen: _openDestination,
|
||||
onLanguage: _openLanguage,
|
||||
languageName: _languageName(context),
|
||||
),
|
||||
],
|
||||
child: MineActionGrid(
|
||||
primaryActions: MinePrimaryActions(
|
||||
onWallet: () => _openDestination(MineDestination.wallet),
|
||||
onFavorites: () => unawaited(_openFavoritesPage()),
|
||||
onDownloads: () => _openDestination(MineDestination.downloads),
|
||||
onHistory: () => _openDestination(MineDestination.history),
|
||||
),
|
||||
serviceActions: MineServiceActions(
|
||||
onOpen: _openDestination,
|
||||
onLanguage: _openLanguage,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// 语言设置行右侧展示的当前语言名。
|
||||
String _languageName(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final code = context.read<LocaleController>().locale?.languageCode;
|
||||
return switch (code) {
|
||||
'en' => l10n.english,
|
||||
'id' => l10n.bahasaIndonesia,
|
||||
_ => l10n.simplifiedChinese,
|
||||
};
|
||||
Widget _section(Widget child) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppDimens.pageHorizontal),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _statsPanel() {
|
||||
return MineStatsSection(
|
||||
watchRecordCount: logic.recentError == null
|
||||
? logic.watchRecordTotal
|
||||
: null,
|
||||
actions: MineStatsActions(
|
||||
onWallet: () => _openDestination(MineDestination.wallet),
|
||||
onHistory: () => _openDestination(MineDestination.history),
|
||||
onFavorites: () => unawaited(_openFavoritesPage()),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _openDestination(MineDestination destination) {
|
||||
@@ -269,6 +265,11 @@ class _MyPageState extends State<MyPage> {
|
||||
if (mounted) unawaited(logic.refreshRecent());
|
||||
}
|
||||
|
||||
Future<void> _openFavoritesPage() async {
|
||||
await _push(const FavoritesPage());
|
||||
if (mounted) unawaited(_favorites.load());
|
||||
}
|
||||
|
||||
Future<void> _push(Widget page) {
|
||||
return Navigator.of(
|
||||
context,
|
||||
@@ -373,56 +374,56 @@ class _LanguageSheet extends StatelessWidget {
|
||||
type: MaterialType.transparency,
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 14, 20, 20),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
l10n.language,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w700,
|
||||
top: false,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 14, 20, 20),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
l10n.language,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
tooltip: l10n.close,
|
||||
onPressed: () => Navigator.pop(context),
|
||||
visualDensity: VisualDensity.compact,
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(
|
||||
minWidth: 32,
|
||||
minHeight: 32,
|
||||
IconButton(
|
||||
tooltip: l10n.close,
|
||||
onPressed: () => Navigator.pop(context),
|
||||
visualDensity: VisualDensity.compact,
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(
|
||||
minWidth: 32,
|
||||
minHeight: 32,
|
||||
),
|
||||
icon: const Icon(Icons.close_rounded, size: 20),
|
||||
),
|
||||
icon: const Icon(Icons.close_rounded, size: 20),
|
||||
),
|
||||
],
|
||||
),
|
||||
for (final option in options)
|
||||
ListTile(
|
||||
key: option.$2,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
title: Text(option.$3),
|
||||
trailing: selected?.languageCode == option.$1.languageCode
|
||||
? const Icon(
|
||||
Icons.check_rounded,
|
||||
color: AppColors.textPrimary,
|
||||
)
|
||||
: null,
|
||||
onTap: () => Navigator.pop(context, option.$1),
|
||||
],
|
||||
),
|
||||
],
|
||||
for (final option in options)
|
||||
ListTile(
|
||||
key: option.$2,
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
title: Text(option.$3),
|
||||
trailing: selected?.languageCode == option.$1.languageCode
|
||||
? const Icon(
|
||||
Icons.check_rounded,
|
||||
color: AppColors.textPrimary,
|
||||
)
|
||||
: null,
|
||||
onTap: () => Navigator.pop(context, option.$1),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../core/theme/app_dimens.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
import '../mine_types.dart';
|
||||
|
||||
const int _gridColumnCount = 4;
|
||||
const double _gridMaxTextScale = 1.2;
|
||||
|
||||
/// 「我的」页统一操作宫格：常用入口与服务入口按 4×2 排列。
|
||||
class MineActionGrid extends StatelessWidget {
|
||||
const MineActionGrid({
|
||||
super.key,
|
||||
required this.primaryActions,
|
||||
required this.serviceActions,
|
||||
});
|
||||
|
||||
final MinePrimaryActions primaryActions;
|
||||
final MineServiceActions serviceActions;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final items = [..._primaryItems(l10n), ..._serviceItems(l10n)];
|
||||
return SizedBox(
|
||||
height: AppDimens.mineGridHeight,
|
||||
child: DecoratedBox(
|
||||
key: const Key('mine-menu'),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.mineGridSurface,
|
||||
border: Border.all(color: AppColors.contentBorder),
|
||||
borderRadius: BorderRadius.circular(AppDimens.mineGridRadius),
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppDimens.mineGridRadius),
|
||||
child: MediaQuery.withClampedTextScaling(
|
||||
maxScaleFactor: _gridMaxTextScale,
|
||||
child: Column(
|
||||
children: [
|
||||
_row(items.take(_gridColumnCount).toList()),
|
||||
const _MineHorizontalDivider(),
|
||||
_row(items.skip(_gridColumnCount).toList()),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
List<_MineActionItem> _primaryItems(AppLocalizations l10n) {
|
||||
return [
|
||||
_MineActionItem(
|
||||
key: const Key('mine-wallet'),
|
||||
icon: Icons.account_balance_wallet_outlined,
|
||||
label: l10n.wallet,
|
||||
onTap: primaryActions.onWallet,
|
||||
),
|
||||
_MineActionItem(
|
||||
key: const Key('mine-favorites'),
|
||||
icon: Icons.star_outline_rounded,
|
||||
label: l10n.myFavorites,
|
||||
onTap: primaryActions.onFavorites,
|
||||
),
|
||||
_MineActionItem(
|
||||
key: const Key('mine-downloads'),
|
||||
icon: Icons.download_for_offline_outlined,
|
||||
label: l10n.offlineDownloads,
|
||||
onTap: primaryActions.onDownloads,
|
||||
),
|
||||
_MineActionItem(
|
||||
key: const Key('mine-history'),
|
||||
icon: Icons.history_rounded,
|
||||
label: l10n.watchHistory,
|
||||
onTap: primaryActions.onHistory,
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
List<_MineActionItem> _serviceItems(AppLocalizations l10n) {
|
||||
return [
|
||||
_MineActionItem(
|
||||
key: const Key('mine-help'),
|
||||
icon: Icons.support_agent_outlined,
|
||||
label: l10n.contactSupport,
|
||||
onTap: () => serviceActions.onOpen(MineDestination.help),
|
||||
),
|
||||
_MineActionItem(
|
||||
key: const Key('mine-language'),
|
||||
icon: Icons.language_rounded,
|
||||
label: l10n.language,
|
||||
onTap: serviceActions.onLanguage,
|
||||
),
|
||||
_MineActionItem(
|
||||
key: const Key('mine-settings'),
|
||||
icon: Icons.settings_outlined,
|
||||
label: l10n.settings,
|
||||
onTap: () => serviceActions.onOpen(MineDestination.settings),
|
||||
),
|
||||
_MineActionItem(
|
||||
key: const Key('mine-notices'),
|
||||
icon: Icons.notifications_none_rounded,
|
||||
label: l10n.notices,
|
||||
onTap: () => serviceActions.onOpen(MineDestination.notices),
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
Widget _row(List<_MineActionItem> items) {
|
||||
return SizedBox(
|
||||
height: AppDimens.mineGridCellHeight,
|
||||
child: Row(
|
||||
children: [
|
||||
for (var index = 0; index < items.length; index++) ...[
|
||||
Expanded(child: _MineActionCell(item: items[index])),
|
||||
if (index < items.length - 1) const _MineVerticalDivider(),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 宫格第一排的常用功能回调。
|
||||
class MinePrimaryActions {
|
||||
const MinePrimaryActions({
|
||||
required this.onWallet,
|
||||
required this.onFavorites,
|
||||
required this.onDownloads,
|
||||
required this.onHistory,
|
||||
});
|
||||
|
||||
final VoidCallback onWallet;
|
||||
final VoidCallback onFavorites;
|
||||
final VoidCallback onDownloads;
|
||||
final VoidCallback onHistory;
|
||||
}
|
||||
|
||||
/// 宫格第二排的服务功能回调。
|
||||
class MineServiceActions {
|
||||
const MineServiceActions({required this.onOpen, required this.onLanguage});
|
||||
|
||||
final ValueChanged<MineDestination> onOpen;
|
||||
final VoidCallback onLanguage;
|
||||
}
|
||||
|
||||
class _MineActionItem {
|
||||
const _MineActionItem({
|
||||
required this.key,
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final Key key;
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final VoidCallback onTap;
|
||||
|
||||
Key get iconSurfaceKey =>
|
||||
ValueKey('${(key as ValueKey<String>).value}-icon-surface');
|
||||
}
|
||||
|
||||
class _MineActionCell extends StatelessWidget {
|
||||
const _MineActionCell({required this.item});
|
||||
|
||||
final _MineActionItem item;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Material(
|
||||
color: AppColors.transparent,
|
||||
child: InkWell(
|
||||
key: item.key,
|
||||
onTap: item.onTap,
|
||||
child: Semantics(
|
||||
button: true,
|
||||
label: item.label,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_iconSurface(),
|
||||
const SizedBox(height: AppDimens.spaceSm),
|
||||
_label(),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _iconSurface() {
|
||||
return Container(
|
||||
key: item.iconSurfaceKey,
|
||||
width: AppDimens.mineGridIconSurface,
|
||||
height: AppDimens.mineGridIconSurface,
|
||||
decoration: BoxDecoration(
|
||||
gradient: const RadialGradient(
|
||||
center: Alignment(-0.35, -0.45),
|
||||
radius: 0.95,
|
||||
colors: [
|
||||
AppColors.mineOutline,
|
||||
AppColors.contentChip,
|
||||
AppColors.mineGridIconSurface,
|
||||
],
|
||||
),
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: AppColors.glassBorder),
|
||||
boxShadow: [
|
||||
const BoxShadow(
|
||||
color: AppColors.shadowSoft,
|
||||
blurRadius: AppDimens.spaceSm,
|
||||
offset: Offset(0, AppDimens.spaceXs),
|
||||
),
|
||||
BoxShadow(
|
||||
color: AppColors.brandRed.withValues(alpha: 0.12),
|
||||
blurRadius: AppDimens.spaceSm,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(
|
||||
item.icon,
|
||||
color: AppColors.mineGridIconAccent,
|
||||
size: AppDimens.mineGridIcon,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _label() {
|
||||
return Text(
|
||||
item.label,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: AppColors.mineGridLabel,
|
||||
fontSize: AppDimens.mineGridLabel,
|
||||
fontWeight: FontWeight.w500,
|
||||
height: AppDimens.mineGridLabelLineHeight,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MineVerticalDivider extends StatelessWidget {
|
||||
const _MineVerticalDivider();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: AppDimens.mineGridHairline,
|
||||
color: AppColors.mineGridDivider,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MineHorizontalDivider extends StatelessWidget {
|
||||
const _MineHorizontalDivider();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: AppDimens.mineGridHairline,
|
||||
color: AppColors.mineGridDivider,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -5,11 +5,12 @@ import 'package:flutter/material.dart';
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../core/theme/app_dimens.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
import '../mine_types.dart';
|
||||
|
||||
const double _vipRadius = 14;
|
||||
const double _vipMaxTextScale = 1.15;
|
||||
const double _vipGradientMiddleStop = 0.48;
|
||||
const double _vipGlowRadius = 0.9;
|
||||
|
||||
/// 「我的」页金色 VIP 卡：品牌行 + 立即开通 + 2×2 权益宫格。
|
||||
/// 「我的」页高级 VIP 卡：品牌信息、会员徽章、开通按钮与横排权益。
|
||||
class MineVipBanner extends StatelessWidget {
|
||||
const MineVipBanner({super.key, required this.onOpen});
|
||||
|
||||
@@ -20,104 +21,21 @@ class MineVipBanner extends StatelessWidget {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return Container(
|
||||
key: const Key('mine-vip'),
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [AppColors.vipCardStart, AppColors.vipCardEnd],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(_vipRadius),
|
||||
),
|
||||
decoration: _decoration(),
|
||||
child: Material(
|
||||
color: AppColors.transparent,
|
||||
borderRadius: BorderRadius.circular(_vipRadius),
|
||||
borderRadius: BorderRadius.circular(AppDimens.mineVipRadius),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onOpen,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
AppDimens.cardPadding,
|
||||
AppDimens.spaceSm + 2,
|
||||
AppDimens.cardPadding,
|
||||
AppDimens.spaceSm + 2,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
child: MediaQuery.withClampedTextScaling(
|
||||
maxScaleFactor: _vipMaxTextScale,
|
||||
child: Stack(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const Icon(
|
||||
Icons.diamond_outlined,
|
||||
color: AppColors.onGold,
|
||||
size: 24,
|
||||
),
|
||||
const SizedBox(width: AppDimens.spaceSm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
l10n.vipBrandName,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onGold,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppDimens.spaceSm),
|
||||
_openButton(l10n),
|
||||
],
|
||||
),
|
||||
Transform.translate(
|
||||
offset: const Offset(0, -7),
|
||||
child: Text(
|
||||
l10n.mineVipSubtitle,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
color: AppColors.onGold.withValues(alpha: 0.7),
|
||||
fontSize: AppDimens.caption,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.mineVipBenefitRowGap),
|
||||
Container(
|
||||
height: 1,
|
||||
color: AppColors.onGold.withValues(alpha: 0.15),
|
||||
),
|
||||
const SizedBox(height: AppDimens.mineVipBenefitRowGap),
|
||||
Table(
|
||||
defaultColumnWidth: const FlexColumnWidth(),
|
||||
children: [
|
||||
TableRow(
|
||||
children: [
|
||||
_benefit(
|
||||
key: const Key('mine-vip-benefit-0'),
|
||||
icon: Icons.play_circle_outline_rounded,
|
||||
label: l10n.vipBenefitFree,
|
||||
),
|
||||
_benefit(
|
||||
key: const Key('mine-vip-benefit-1'),
|
||||
icon: Icons.ads_click_rounded,
|
||||
label: l10n.vipBenefitNoAds,
|
||||
),
|
||||
],
|
||||
),
|
||||
TableRow(
|
||||
children: [
|
||||
_benefit(
|
||||
key: const Key('mine-vip-benefit-2'),
|
||||
icon: Icons.hd_outlined,
|
||||
label: l10n.vipBenefitHd,
|
||||
),
|
||||
_benefit(
|
||||
key: const Key('mine-vip-benefit-3'),
|
||||
icon: Icons.download_for_offline_outlined,
|
||||
label: l10n.vipBenefitFastCache,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
const Positioned.fill(child: _VipAmbientGlow()),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(AppDimens.mineVipPadding),
|
||||
child: _VipContent(l10n: l10n, onOpen: onOpen),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -127,147 +45,227 @@ class MineVipBanner extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _openButton(AppLocalizations l10n) {
|
||||
return TextButton(
|
||||
key: const Key('mine-vip-open'),
|
||||
onPressed: onOpen,
|
||||
style: TextButton.styleFrom(
|
||||
minimumSize: const Size(0, AppDimens.mineVipButtonHeight),
|
||||
padding: const EdgeInsets.symmetric(horizontal: AppDimens.spaceMd),
|
||||
backgroundColor: AppColors.onGold,
|
||||
foregroundColor: AppColors.vipGoldStart,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppDimens.mineVipButtonHeight / 2,
|
||||
),
|
||||
),
|
||||
textStyle: const TextStyle(
|
||||
fontSize: AppDimens.body,
|
||||
fontWeight: FontWeight.w400,
|
||||
),
|
||||
BoxDecoration _decoration() {
|
||||
return BoxDecoration(
|
||||
gradient: const LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
AppColors.vipCardStart,
|
||||
AppColors.vipCardMiddle,
|
||||
AppColors.vipCardEnd,
|
||||
],
|
||||
stops: [0, _vipGradientMiddleStop, 1],
|
||||
),
|
||||
child: Text(l10n.vipOpenNow),
|
||||
borderRadius: BorderRadius.circular(AppDimens.mineVipRadius),
|
||||
border: Border.all(color: AppColors.vipCardBorder),
|
||||
boxShadow: const [
|
||||
BoxShadow(
|
||||
color: AppColors.vipCardRedGlow,
|
||||
blurRadius: AppDimens.spaceXl,
|
||||
offset: Offset(0, AppDimens.spaceSm),
|
||||
),
|
||||
BoxShadow(
|
||||
color: AppColors.shadowSoft,
|
||||
blurRadius: AppDimens.spaceLg,
|
||||
offset: Offset(0, AppDimens.spaceSm),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _benefit({required Key key, required IconData icon, required String label}) {
|
||||
return Padding(
|
||||
key: key,
|
||||
padding: const EdgeInsets.symmetric(vertical: AppDimens.mineVipBenefitRowGap),
|
||||
child: Row(
|
||||
class _VipContent extends StatelessWidget {
|
||||
const _VipContent({required this.l10n, required this.onOpen});
|
||||
|
||||
final AppLocalizations l10n;
|
||||
final VoidCallback onOpen;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(child: _VipCopy(l10n: l10n)),
|
||||
const SizedBox(width: AppDimens.spaceSm),
|
||||
_VipAction(l10n: l10n, onOpen: onOpen),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: AppDimens.spaceSm),
|
||||
const Divider(height: 1, color: AppColors.vipBenefitBorder),
|
||||
const SizedBox(height: AppDimens.spaceSm),
|
||||
_VipBenefits(l10n: l10n),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VipCopy extends StatelessWidget {
|
||||
const _VipCopy({required this.l10n});
|
||||
|
||||
final AppLocalizations l10n;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_VipPill(label: l10n.vipMembership),
|
||||
const SizedBox(height: AppDimens.spaceSm),
|
||||
Text(
|
||||
l10n.vipBrandName,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.vipCardText,
|
||||
fontSize: AppDimens.mineVipTitleFont,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: -0.4,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
Text(
|
||||
l10n.mineVipSubtitle,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.vipCardMuted,
|
||||
fontSize: AppDimens.mineVipSubtitleFont,
|
||||
height: 1.3,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VipPill extends StatelessWidget {
|
||||
const _VipPill({required this.label});
|
||||
|
||||
final String label;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.spaceSm,
|
||||
vertical: AppDimens.spaceXs,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.vipBadgeSurface,
|
||||
border: Border.all(color: AppColors.vipBenefitBorder),
|
||||
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
|
||||
),
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.vipGoldStart,
|
||||
fontSize: AppDimens.chipFont,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 1.1,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VipAction extends StatelessWidget {
|
||||
const _VipAction({required this.l10n, required this.onOpen});
|
||||
|
||||
final AppLocalizations l10n;
|
||||
final VoidCallback onOpen;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: AppDimens.mineVipActionWidth,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: AppDimens.mineVipBenefitBox,
|
||||
height: AppDimens.mineVipBenefitBox,
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(
|
||||
color: AppColors.onGold.withValues(alpha: 0.6),
|
||||
width: 1.2,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppDimens.mineVipBenefitBoxRadius,
|
||||
),
|
||||
),
|
||||
child: Icon(
|
||||
icon,
|
||||
color: AppColors.onGold,
|
||||
size: AppDimens.mineVipBenefitGlyph,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: AppDimens.spaceSm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.onGold,
|
||||
fontSize: AppDimens.mineVipBenefitFont,
|
||||
),
|
||||
),
|
||||
),
|
||||
const _VipEmblem(),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
_VipOpenButton(label: l10n.vipOpenNow, onOpen: onOpen),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 快捷图标行：钱包 / 我的收藏 / 离线缓存 / 播放历史（设计稿的「奖励」暂不做）。
|
||||
class MineQuickActions extends StatelessWidget {
|
||||
const MineQuickActions({
|
||||
super.key,
|
||||
required this.onWallet,
|
||||
required this.onFavorites,
|
||||
required this.onDownloads,
|
||||
required this.onHistory,
|
||||
});
|
||||
|
||||
final VoidCallback onWallet;
|
||||
final VoidCallback onFavorites;
|
||||
final VoidCallback onDownloads;
|
||||
final VoidCallback onHistory;
|
||||
class _VipEmblem extends StatelessWidget {
|
||||
const _VipEmblem();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return Row(
|
||||
children: [
|
||||
_action(
|
||||
key: const Key('mine-wallet'),
|
||||
icon: Icons.wallet_outlined,
|
||||
label: l10n.wallet,
|
||||
onTap: onWallet,
|
||||
return Container(
|
||||
key: const Key('mine-vip-emblem'),
|
||||
width: AppDimens.mineVipEmblem,
|
||||
height: AppDimens.mineVipEmblem,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
gradient: const LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [AppColors.vipGoldStart, AppColors.vipGoldEnd],
|
||||
),
|
||||
_action(
|
||||
key: const Key('mine-favorites'),
|
||||
icon: Icons.star_border_rounded,
|
||||
label: l10n.myFavorites,
|
||||
onTap: onFavorites,
|
||||
),
|
||||
_action(
|
||||
key: const Key('mine-downloads'),
|
||||
icon: Icons.download_outlined,
|
||||
label: l10n.offlineDownloads,
|
||||
onTap: onDownloads,
|
||||
),
|
||||
_action(
|
||||
key: const Key('mine-history'),
|
||||
icon: Icons.history_rounded,
|
||||
label: l10n.watchHistory,
|
||||
onTap: onHistory,
|
||||
),
|
||||
],
|
||||
border: Border.all(color: AppColors.vipCardText),
|
||||
boxShadow: const [
|
||||
BoxShadow(color: AppColors.vipCardGoldGlow, blurRadius: 18),
|
||||
],
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.workspace_premium_rounded,
|
||||
color: AppColors.vipCardStart,
|
||||
size: AppDimens.mineVipEmblemIcon,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _action({
|
||||
required Key key,
|
||||
required IconData icon,
|
||||
required String label,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return Expanded(
|
||||
child: InkWell(
|
||||
key: key,
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: AppDimens.spaceSm),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, color: AppColors.textPrimary, size: AppDimens.mineQuickActionIcon),
|
||||
const SizedBox(height: AppDimens.mineQuickActionGap),
|
||||
Text(
|
||||
class _VipOpenButton extends StatelessWidget {
|
||||
const _VipOpenButton({required this.label, required this.onOpen});
|
||||
|
||||
final String label;
|
||||
final VoidCallback onOpen;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
key: const Key('mine-vip-open'),
|
||||
width: AppDimens.mineVipActionWidth,
|
||||
height: AppDimens.mineVipButtonHeight,
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(
|
||||
colors: [AppColors.vipButtonStart, AppColors.vipButtonEnd],
|
||||
),
|
||||
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
|
||||
boxShadow: const [
|
||||
BoxShadow(color: AppColors.vipCardRedGlow, blurRadius: 14),
|
||||
],
|
||||
),
|
||||
child: Material(
|
||||
color: AppColors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onOpen,
|
||||
borderRadius: BorderRadius.circular(AppDimens.pillRadius),
|
||||
child: Center(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: AppDimens.mineQuickActionLabelFont,
|
||||
fontSize: AppDimens.body,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -275,107 +273,117 @@ class MineQuickActions extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// 「更多服务」列表行：白图标 + 标题 + 可选值 + chevron，行间细分隔线。
|
||||
class MineServiceList extends StatelessWidget {
|
||||
const MineServiceList({
|
||||
super.key,
|
||||
required this.onOpen,
|
||||
required this.onLanguage,
|
||||
required this.languageName,
|
||||
});
|
||||
class _VipBenefits extends StatelessWidget {
|
||||
const _VipBenefits({required this.l10n});
|
||||
|
||||
final ValueChanged<MineDestination> onOpen;
|
||||
final VoidCallback onLanguage;
|
||||
final String languageName;
|
||||
final AppLocalizations l10n;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final rows = <Widget>[
|
||||
_row(
|
||||
key: const Key('mine-help'),
|
||||
icon: Icons.headset_outlined,
|
||||
label: l10n.contactSupport,
|
||||
onTap: () => onOpen(MineDestination.help),
|
||||
),
|
||||
_divider(),
|
||||
_row(
|
||||
key: const Key('mine-language'),
|
||||
icon: Icons.language_rounded,
|
||||
label: l10n.language,
|
||||
value: languageName,
|
||||
onTap: onLanguage,
|
||||
),
|
||||
_divider(),
|
||||
_row(
|
||||
key: const Key('mine-settings'),
|
||||
icon: Icons.settings_outlined,
|
||||
label: l10n.settings,
|
||||
onTap: () => onOpen(MineDestination.settings),
|
||||
),
|
||||
_divider(),
|
||||
_row(
|
||||
key: const Key('mine-notices'),
|
||||
icon: Icons.notifications_none_rounded,
|
||||
label: l10n.notices,
|
||||
onTap: () => onOpen(MineDestination.notices),
|
||||
),
|
||||
final items = [
|
||||
(Icons.all_inclusive_rounded, l10n.vipBenefitFree),
|
||||
(Icons.block_rounded, l10n.vipBenefitNoAds),
|
||||
(Icons.hd_outlined, l10n.vipBenefitHd),
|
||||
(Icons.download_for_offline_outlined, l10n.vipBenefitFastCache),
|
||||
];
|
||||
return Column(key: const Key('mine-menu'), children: rows);
|
||||
}
|
||||
|
||||
Widget _divider() => const Divider(
|
||||
height: AppDimens.mineGridDividerWidth,
|
||||
thickness: AppDimens.mineGridDividerWidth,
|
||||
color: AppColors.contentBorder,
|
||||
);
|
||||
|
||||
Widget _row({
|
||||
required Key key,
|
||||
required IconData icon,
|
||||
required String label,
|
||||
String? value,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return SizedBox(
|
||||
height: AppDimens.mineServiceRowHeight,
|
||||
child: InkWell(
|
||||
key: key,
|
||||
onTap: onTap,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(icon, color: AppColors.textPrimary, size: AppDimens.mineServiceIcon),
|
||||
const SizedBox(width: AppDimens.spaceMd),
|
||||
Expanded(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: AppDimens.mineServiceTitleFont,
|
||||
),
|
||||
),
|
||||
return Row(
|
||||
key: const Key('mine-vip-benefits'),
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
for (var index = 0; index < items.length; index++)
|
||||
Expanded(
|
||||
child: _VipBenefit(
|
||||
itemKey: Key('mine-vip-benefit-$index'),
|
||||
icon: items[index].$1,
|
||||
label: items[index].$2,
|
||||
),
|
||||
if (value != null && value.isNotEmpty) ...[
|
||||
const SizedBox(width: AppDimens.spaceSm),
|
||||
Text(
|
||||
value,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: AppDimens.mineServiceValueFont,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VipBenefit extends StatelessWidget {
|
||||
const _VipBenefit({
|
||||
required this.itemKey,
|
||||
required this.icon,
|
||||
required this.label,
|
||||
});
|
||||
|
||||
final Key itemKey;
|
||||
final IconData icon;
|
||||
final String label;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
key: itemKey,
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
Container(
|
||||
width: AppDimens.mineVipBenefitBox,
|
||||
height: AppDimens.mineVipBenefitBox,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.vipBenefitSurface,
|
||||
border: Border.all(color: AppColors.vipBenefitBorder),
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppDimens.mineVipBenefitBoxRadius,
|
||||
),
|
||||
),
|
||||
child: Icon(
|
||||
icon,
|
||||
color: AppColors.vipGoldStart,
|
||||
size: AppDimens.mineVipBenefitGlyph,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.mineVipBenefitRowGap),
|
||||
Text(
|
||||
label,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: AppColors.vipCardMuted,
|
||||
fontSize: AppDimens.mineVipBenefitFont,
|
||||
fontWeight: FontWeight.w500,
|
||||
height: 1.15,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VipAmbientGlow extends StatelessWidget {
|
||||
const _VipAmbientGlow();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: const [
|
||||
Positioned.fill(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: RadialGradient(
|
||||
center: Alignment(0.85, -0.8),
|
||||
radius: _vipGlowRadius,
|
||||
colors: [AppColors.vipCardGoldGlow, AppColors.transparent],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned.fill(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
gradient: RadialGradient(
|
||||
center: Alignment(-0.9, 1),
|
||||
radius: _vipGlowRadius,
|
||||
colors: [AppColors.vipCardRedGlow, AppColors.transparent],
|
||||
),
|
||||
],
|
||||
const SizedBox(width: AppDimens.spaceXs),
|
||||
const Icon(
|
||||
Icons.chevron_right_rounded,
|
||||
color: AppColors.textSecondary,
|
||||
size: 22,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
// Author: fruit.com.cn
|
||||
// 绘制个人数据区统一的红色叠层质感图标。
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../core/theme/app_dimens.dart';
|
||||
|
||||
const double _designSize = 48;
|
||||
const double _depth = 2;
|
||||
const double _edgeWidth = 0.8;
|
||||
const double _ringWidth = 1.1;
|
||||
const double _groundBlur = 3;
|
||||
const double _sparkleWaist = 0.28;
|
||||
const double _screenTilt = -0.12;
|
||||
const double _bookmarkTilt = 0.1;
|
||||
const Offset _artCenter = Offset(24, 24);
|
||||
const Rect _groundBounds = Rect.fromLTWH(8, 41, 32, 4);
|
||||
const LinearGradient _faceGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
AppColors.mineStatHighlight,
|
||||
AppColors.brandRed,
|
||||
AppColors.mineStatShade,
|
||||
],
|
||||
);
|
||||
const LinearGradient _backGradient = LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [AppColors.brandRed, AppColors.mineStatDepth],
|
||||
);
|
||||
|
||||
/// 个人数据的三种图标语义。
|
||||
enum MineStatIconType { coins, history, favorites }
|
||||
|
||||
/// 无位图依赖的品牌红图标，统一亮面、厚度与高光语言。
|
||||
class MineStatIcon extends StatelessWidget {
|
||||
/// 根据数据类型绘制图标。
|
||||
const MineStatIcon({super.key, required this.type});
|
||||
|
||||
final MineStatIconType type;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox.square(
|
||||
dimension: AppDimens.mineStatsIcon,
|
||||
child: DecoratedBox(
|
||||
decoration: const BoxDecoration(
|
||||
gradient: RadialGradient(
|
||||
colors: [AppColors.mineStatGlow, AppColors.transparent],
|
||||
),
|
||||
),
|
||||
child: CustomPaint(painter: _MineStatPainter(type)),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MineStatPainter extends CustomPainter {
|
||||
const _MineStatPainter(this.type);
|
||||
|
||||
final MineStatIconType type;
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
canvas.save();
|
||||
canvas.scale(size.width / _designSize, size.height / _designSize);
|
||||
canvas.drawOval(
|
||||
_groundBounds,
|
||||
Paint()
|
||||
..color = AppColors.mineStatGlow
|
||||
..maskFilter = const MaskFilter.blur(BlurStyle.normal, _groundBlur),
|
||||
);
|
||||
switch (type) {
|
||||
case MineStatIconType.coins:
|
||||
_coins(canvas);
|
||||
case MineStatIconType.history:
|
||||
_tilt(canvas, _screenTilt);
|
||||
_screen(canvas);
|
||||
case MineStatIconType.favorites:
|
||||
_tilt(canvas, _bookmarkTilt);
|
||||
_bookmark(canvas);
|
||||
}
|
||||
canvas.restore();
|
||||
}
|
||||
|
||||
void _coins(Canvas canvas) {
|
||||
const backBounds = Rect.fromLTWH(23, 6, 19, 19);
|
||||
const frontBounds = Rect.fromLTWH(5, 15, 29, 29);
|
||||
const innerCenter = Offset(19.5, 29.5);
|
||||
const innerRadius = 11.3;
|
||||
const stampRadius = 6.5;
|
||||
const glintCenter = Offset(39, 33);
|
||||
const double glintRadius = 3;
|
||||
_surface(canvas, Path()..addOval(backBounds), backBounds, _backGradient);
|
||||
_surface(canvas, Path()..addOval(frontBounds), frontBounds, _faceGradient);
|
||||
canvas.drawCircle(
|
||||
innerCenter,
|
||||
innerRadius,
|
||||
Paint()
|
||||
..color = AppColors.mineStatEdge
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeWidth = _ringWidth,
|
||||
);
|
||||
_sparkle(canvas, innerCenter, stampRadius);
|
||||
_sparkle(canvas, glintCenter, glintRadius);
|
||||
}
|
||||
|
||||
void _screen(Canvas canvas) {
|
||||
const backBounds = Rect.fromLTWH(12, 6, 29, 26);
|
||||
const frontBounds = Rect.fromLTWH(6, 12, 32, 27);
|
||||
const innerBounds = Rect.fromLTWH(10, 16, 24, 19);
|
||||
const outerRadius = Radius.circular(6);
|
||||
const innerRadius = Radius.circular(3);
|
||||
const playPoints = [Offset(19, 20), Offset(19, 31), Offset(28, 25.5)];
|
||||
const reflectionStart = Offset(13, 14);
|
||||
const reflectionEnd = Offset(26, 14);
|
||||
final back = Path()
|
||||
..addRRect(RRect.fromRectAndRadius(backBounds, outerRadius));
|
||||
final front = Path()
|
||||
..addRRect(RRect.fromRectAndRadius(frontBounds, outerRadius));
|
||||
_surface(canvas, back, backBounds, _backGradient);
|
||||
_surface(canvas, front, frontBounds, _faceGradient);
|
||||
canvas.drawRRect(
|
||||
RRect.fromRectAndRadius(innerBounds, innerRadius),
|
||||
Paint()..shader = _backGradient.createShader(innerBounds),
|
||||
);
|
||||
canvas.drawPath(
|
||||
_polygon(playPoints),
|
||||
Paint()..color = AppColors.mineStatGlint,
|
||||
);
|
||||
_reflection(canvas, reflectionStart, reflectionEnd);
|
||||
}
|
||||
|
||||
void _bookmark(Canvas canvas) {
|
||||
const bounds = Rect.fromLTWH(12, 7, 23, 35);
|
||||
const radius = Radius.circular(4);
|
||||
const cutout = [Offset(11, 44), Offset(23.5, 34), Offset(36, 44)];
|
||||
const rearOffset = Offset(5, -3);
|
||||
const stampCenter = Offset(23.5, 21);
|
||||
const double stampRadius = 6;
|
||||
const reflectionStart = Offset(17, 10);
|
||||
const reflectionEnd = Offset(28, 10);
|
||||
final cover = Path()..addRRect(RRect.fromRectAndRadius(bounds, radius));
|
||||
final front = Path.combine(
|
||||
PathOperation.difference,
|
||||
cover,
|
||||
_polygon(cutout),
|
||||
);
|
||||
_surface(
|
||||
canvas,
|
||||
front.shift(rearOffset),
|
||||
bounds.shift(rearOffset),
|
||||
_backGradient,
|
||||
);
|
||||
_surface(canvas, front, bounds, _faceGradient);
|
||||
_sparkle(canvas, stampCenter, stampRadius);
|
||||
_reflection(canvas, reflectionStart, reflectionEnd);
|
||||
}
|
||||
|
||||
void _surface(Canvas canvas, Path path, Rect bounds, Gradient gradient) {
|
||||
canvas.save();
|
||||
canvas.translate(0, _depth);
|
||||
canvas.drawPath(path, Paint()..color = AppColors.mineStatDepth);
|
||||
canvas.restore();
|
||||
canvas.drawPath(path, Paint()..shader = gradient.createShader(bounds));
|
||||
canvas.drawPath(
|
||||
path,
|
||||
Paint()
|
||||
..color = AppColors.mineStatEdge
|
||||
..style = PaintingStyle.stroke
|
||||
..strokeJoin = StrokeJoin.round
|
||||
..strokeWidth = _edgeWidth,
|
||||
);
|
||||
}
|
||||
|
||||
void _sparkle(Canvas canvas, Offset center, double radius) {
|
||||
final waist = radius * _sparkleWaist;
|
||||
final points = [
|
||||
center + Offset(0, -radius),
|
||||
center + Offset(waist, -waist),
|
||||
center + Offset(radius, 0),
|
||||
center + Offset(waist, waist),
|
||||
center + Offset(0, radius),
|
||||
center + Offset(-waist, waist),
|
||||
center + Offset(-radius, 0),
|
||||
center + Offset(-waist, -waist),
|
||||
];
|
||||
canvas.drawPath(_polygon(points), Paint()..color = AppColors.mineStatGlint);
|
||||
}
|
||||
|
||||
Path _polygon(List<Offset> points) {
|
||||
return Path()..addPolygon(points, true);
|
||||
}
|
||||
|
||||
void _reflection(Canvas canvas, Offset start, Offset end) {
|
||||
canvas.drawLine(
|
||||
start,
|
||||
end,
|
||||
Paint()
|
||||
..color = AppColors.mineStatEdge
|
||||
..strokeCap = StrokeCap.round
|
||||
..strokeWidth = _ringWidth,
|
||||
);
|
||||
}
|
||||
|
||||
void _tilt(Canvas canvas, double angle) {
|
||||
canvas.translate(_artCenter.dx, _artCenter.dy);
|
||||
canvas.rotate(angle);
|
||||
canvas.translate(-_artCenter.dx, -_artCenter.dy);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(covariant _MineStatPainter oldDelegate) {
|
||||
return oldDelegate.type != type;
|
||||
}
|
||||
}
|
||||
@@ -1,91 +1,230 @@
|
||||
// Author: fruit.com.cn
|
||||
// 展示可点击的金币、观看记录与收藏三列个人数据。
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../../../core/data/services/auth_controller.dart';
|
||||
import '../../../core/data/services/favorite_controller.dart';
|
||||
import '../../../core/data/services/wallet_controller.dart';
|
||||
import '../../../core/theme/app_colors.dart';
|
||||
import '../../../core/theme/app_dimens.dart';
|
||||
import '../../../l10n/app_localizations.dart';
|
||||
import 'mine_stat_icon.dart';
|
||||
|
||||
class MineStatsPanel extends StatelessWidget {
|
||||
const MineStatsPanel({
|
||||
const int _labelMaxLines = 2;
|
||||
const double _dividerTop = 36;
|
||||
|
||||
/// 三项个人数据入口的现有页面回调。
|
||||
class MineStatsActions {
|
||||
/// 绑定钱包、观看记录与收藏页面。
|
||||
const MineStatsActions({
|
||||
required this.onWallet,
|
||||
required this.onHistory,
|
||||
required this.onFavorites,
|
||||
});
|
||||
|
||||
final VoidCallback onWallet;
|
||||
final VoidCallback onHistory;
|
||||
final VoidCallback onFavorites;
|
||||
}
|
||||
|
||||
/// 将共享的账号、钱包和收藏状态绑定到个人数据区。
|
||||
class MineStatsSection extends StatelessWidget {
|
||||
/// 观看记录由我的页逻辑提供，其余状态沿用全局 Provider。
|
||||
const MineStatsSection({
|
||||
super.key,
|
||||
required this.followingCount,
|
||||
required this.watchRecordCount,
|
||||
required this.coinBalance,
|
||||
required this.actions,
|
||||
});
|
||||
|
||||
final int? followingCount;
|
||||
final int? watchRecordCount;
|
||||
final MineStatsActions actions;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final signedIn = context.watch<AuthController>().isSignedIn;
|
||||
final wallet = context.watch<WalletController>();
|
||||
final favorites = context.watch<FavoriteController>();
|
||||
return MineStatsPanel(
|
||||
coinBalance: signedIn && wallet.error == null
|
||||
? wallet.snapshot?.wallet.coinBalance
|
||||
: null,
|
||||
watchRecordCount: watchRecordCount,
|
||||
favoriteCount: favorites.loaded && favorites.error == null
|
||||
? favorites.total
|
||||
: null,
|
||||
actions: actions,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 头像与会员卡之间的个人数据，未知值与真实零值明确区分。
|
||||
class MineStatsPanel extends StatelessWidget {
|
||||
/// 使用真实服务端总数与共享钱包余额构建数据区。
|
||||
const MineStatsPanel({
|
||||
super.key,
|
||||
required this.coinBalance,
|
||||
required this.watchRecordCount,
|
||||
required this.favoriteCount,
|
||||
required this.actions,
|
||||
});
|
||||
|
||||
final int? coinBalance;
|
||||
final int? watchRecordCount;
|
||||
final int? favoriteCount;
|
||||
final MineStatsActions actions;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
return Container(
|
||||
return Row(
|
||||
key: const Key('mine-stats'),
|
||||
padding: const EdgeInsets.all(AppDimens.minePanelPadding),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.minePanelSurface,
|
||||
borderRadius: BorderRadius.circular(AppDimens.mineGridRadius),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
_stat(
|
||||
key: const Key('mine-stat-following'),
|
||||
value: followingCount,
|
||||
label: l10n.followingCountLabel,
|
||||
l10n: l10n,
|
||||
),
|
||||
_stat(
|
||||
key: const Key('mine-stat-watch-records'),
|
||||
value: watchRecordCount,
|
||||
label: l10n.watchRecordsCountLabel,
|
||||
l10n: l10n,
|
||||
),
|
||||
_stat(
|
||||
key: const Key('mine-stat-coins'),
|
||||
value: coinBalance,
|
||||
label: l10n.coinBalance,
|
||||
l10n: l10n,
|
||||
),
|
||||
],
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_tile(
|
||||
type: MineStatIconType.coins,
|
||||
value: coinBalance,
|
||||
label: l10n.coinBalance,
|
||||
onTap: actions.onWallet,
|
||||
),
|
||||
_divider(),
|
||||
_tile(
|
||||
type: MineStatIconType.history,
|
||||
value: watchRecordCount,
|
||||
label: l10n.watchRecordsCountLabel,
|
||||
onTap: actions.onHistory,
|
||||
),
|
||||
_divider(),
|
||||
_tile(
|
||||
type: MineStatIconType.favorites,
|
||||
value: favoriteCount,
|
||||
label: l10n.myFavorites,
|
||||
onTap: actions.onFavorites,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _tile({
|
||||
required MineStatIconType type,
|
||||
required int? value,
|
||||
required String label,
|
||||
required VoidCallback onTap,
|
||||
}) {
|
||||
return Expanded(
|
||||
child: _MineStatTile(
|
||||
type: type,
|
||||
value: value,
|
||||
label: label,
|
||||
onTap: onTap,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _stat({
|
||||
required Key key,
|
||||
required int? value,
|
||||
required String label,
|
||||
required AppLocalizations l10n,
|
||||
}) {
|
||||
return Expanded(
|
||||
child: Column(
|
||||
key: key,
|
||||
children: [
|
||||
Text(
|
||||
value?.toString() ?? l10n.dataUnavailable,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: AppDimens.mineStatsValueFont,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: AppDimens.mineStatsLabelFont,
|
||||
),
|
||||
),
|
||||
],
|
||||
Widget _divider() {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: _dividerTop),
|
||||
child: Container(
|
||||
width: AppDimens.mineStatsDividerWidth,
|
||||
height: AppDimens.mineStatsDividerHeight,
|
||||
color: AppColors.contentBorder,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _MineStatTile extends StatelessWidget {
|
||||
const _MineStatTile({
|
||||
required this.type,
|
||||
required this.value,
|
||||
required this.label,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
final MineStatIconType type;
|
||||
final int? value;
|
||||
final String label;
|
||||
final VoidCallback onTap;
|
||||
|
||||
String get _key => switch (type) {
|
||||
MineStatIconType.coins => 'mine-stat-coins',
|
||||
MineStatIconType.history => 'mine-stat-watch-records',
|
||||
MineStatIconType.favorites => 'mine-stat-favorites',
|
||||
};
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final l10n = AppLocalizations.of(context)!;
|
||||
final formatted = value == null
|
||||
? l10n.dataUnavailable
|
||||
: NumberFormat.decimalPattern(l10n.localeName).format(value);
|
||||
return Semantics(
|
||||
button: true,
|
||||
label: label,
|
||||
value: formatted,
|
||||
onTap: onTap,
|
||||
excludeSemantics: true,
|
||||
child: Material(
|
||||
color: AppColors.transparent,
|
||||
child: InkWell(
|
||||
key: ValueKey(_key),
|
||||
onTap: onTap,
|
||||
excludeFromSemantics: true,
|
||||
borderRadius: BorderRadius.circular(AppDimens.innerRadius),
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(
|
||||
minHeight: AppDimens.mineStatsMinHeight,
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: AppDimens.spaceXs,
|
||||
vertical: AppDimens.spaceSm,
|
||||
),
|
||||
child: _content(formatted),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _content(String formatted) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
MineStatIcon(key: ValueKey('$_key-icon'), type: type),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
child: Text(
|
||||
formatted,
|
||||
key: ValueKey('$_key-value'),
|
||||
maxLines: 1,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Outfit',
|
||||
color: AppColors.textPrimary,
|
||||
fontSize: AppDimens.mineStatsValueFont,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontFeatures: [FontFeature.tabularFigures()],
|
||||
height: AppDimens.mineStatsValueLineHeight,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: AppDimens.spaceXs),
|
||||
Text(
|
||||
label,
|
||||
maxLines: _labelMaxLines,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
color: AppColors.textTertiary,
|
||||
fontSize: AppDimens.mineStatsLabelFont,
|
||||
height: AppDimens.mineStatsLabelLineHeight,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user