171 lines
4.8 KiB
Dart
171 lines
4.8 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:shadcn_ui/shadcn_ui.dart';
|
|
import '../../../core/theme/app_theme.dart';
|
|
import '../../../core/theme/app_spacing.dart';
|
|
import '../../../core/theme/app_theme_extension.dart';
|
|
|
|
/// 首頁熱門幣種區塊
|
|
class HotCoinsSection extends StatelessWidget {
|
|
const HotCoinsSection({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
children: [
|
|
// Title row
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'熱門幣種',
|
|
style: AppTextStyles.headlineLarge(context),
|
|
),
|
|
Text(
|
|
'更多',
|
|
style: AppTextStyles.bodyMedium(context).copyWith(
|
|
color: context.appColors.onSurfaceMuted,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: AppSpacing.sm + AppSpacing.xs),
|
|
// Card
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: context.colors.surfaceContainer,
|
|
border: Border.all(
|
|
color: context.colors.outlineVariant,
|
|
width: 1,
|
|
),
|
|
borderRadius: BorderRadius.circular(AppRadius.xl),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
_CoinRow(
|
|
symbol: 'BTC',
|
|
pair: 'BTC/USDT',
|
|
fullName: 'Bitcoin',
|
|
price: '68,432.50',
|
|
change: '+2.35%',
|
|
isUp: true,
|
|
),
|
|
Divider(
|
|
height: 1,
|
|
thickness: 1,
|
|
color: context.appColors.ghostBorder,
|
|
),
|
|
_CoinRow(
|
|
symbol: 'ETH',
|
|
pair: 'ETH/USDT',
|
|
fullName: 'Ethereum',
|
|
price: '3,856.20',
|
|
change: '+1.82%',
|
|
isUp: true,
|
|
),
|
|
Divider(
|
|
height: 1,
|
|
thickness: 1,
|
|
color: context.appColors.ghostBorder,
|
|
),
|
|
_CoinRow(
|
|
symbol: 'SOL',
|
|
pair: 'SOL/USDT',
|
|
fullName: 'Solana',
|
|
price: '178.65',
|
|
change: '-0.94%',
|
|
isUp: false,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _CoinRow extends StatelessWidget {
|
|
const _CoinRow({
|
|
required this.symbol,
|
|
required this.pair,
|
|
required this.fullName,
|
|
required this.price,
|
|
required this.change,
|
|
required this.isUp,
|
|
});
|
|
|
|
final String symbol;
|
|
final String pair;
|
|
final String fullName;
|
|
final String price;
|
|
final String change;
|
|
final bool isUp;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final changeColor = isUp
|
|
? context.appColors.up
|
|
: context.appColors.down;
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: AppSpacing.md),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
// Left: avatar + name
|
|
Row(
|
|
children: [
|
|
CircleAvatar(
|
|
radius: 18,
|
|
backgroundColor: context.colors.primary.withValues(alpha: 0.1),
|
|
child: Text(
|
|
symbol,
|
|
style: AppTextStyles.bodySmall(context).copyWith(
|
|
fontSize: 10,
|
|
fontWeight: FontWeight.w700,
|
|
color: context.colors.primary,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: AppSpacing.sm + AppSpacing.xs),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
pair,
|
|
style: AppTextStyles.headlineMedium(context).copyWith(
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
Text(
|
|
fullName,
|
|
style: AppTextStyles.bodySmall(context),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
// Right: price + change
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
price,
|
|
style: AppTextStyles.numberMedium(context),
|
|
),
|
|
Text(
|
|
change,
|
|
style: AppTextStyles.labelMedium(context).copyWith(
|
|
color: changeColor,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|