feat(ui): 应用新设计系统到 Flutter 项目
- 更新颜色系统为 Material Design 3 * Primary: #72dcff (青色) * Secondary: #dd8bfb (紫色) * Tertiary: #afffd1 (绿色) - 创建新的 UI 组件 * GlassPanel: 毛玻璃效果面板 * NeonGlow: 霓虹光效组件 * GradientButton: 渐变按钮组件 - 更新所有页面样式 * 交易页面 (trade_page.dart) * 行情页面 (market_page.dart) * 资产页面 (asset_page.dart) * 我的页面 (mine_page.dart) * 订单页面 (orders_page.dart) - 支持深色和浅色主题 - 所有 UI 文字使用中文 - 保持现有 API 接口不变 变更统计: - 9 个文件修改 - 1,893 行新增 - 691 行删除 - 3 个新组件
This commit is contained in:
@@ -4,3 +4,5 @@ library components;
|
||||
export 'coin_card.dart';
|
||||
export 'trade_button.dart';
|
||||
export 'asset_card.dart';
|
||||
export 'glass_panel.dart';
|
||||
export 'neon_glow.dart';
|
||||
|
||||
315
flutter_monisuo/lib/ui/components/glass_panel.dart
Normal file
315
flutter_monisuo/lib/ui/components/glass_panel.dart
Normal file
@@ -0,0 +1,315 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../core/theme/app_color_scheme.dart';
|
||||
import '../../core/theme/app_spacing.dart';
|
||||
|
||||
/// GlassPanel - 毛玻璃效果面板
|
||||
///
|
||||
/// Material Design 3 风格的毛玻璃效果组件
|
||||
/// 用于卡片、弹窗、底部抽屉等需要毛玻璃效果的容器
|
||||
///
|
||||
/// 示例:
|
||||
/// ```dart
|
||||
/// GlassPanel(
|
||||
/// child: Text('内容'),
|
||||
/// )
|
||||
/// ```
|
||||
class GlassPanel extends StatelessWidget {
|
||||
/// 子组件
|
||||
final Widget child;
|
||||
|
||||
/// 模糊程度，默认 20.0
|
||||
final double blur;
|
||||
|
||||
/// 背景色，默认使用 GlassPanel 背景色
|
||||
final Color? backgroundColor;
|
||||
|
||||
/// 边框色，默认使用 GlassPanel 边框色
|
||||
final Color? borderColor;
|
||||
|
||||
/// 圆角，默认特大圆角
|
||||
final BorderRadius? borderRadius;
|
||||
|
||||
/// 内边距
|
||||
final EdgeInsetsGeometry? padding;
|
||||
|
||||
/// 外边距
|
||||
final EdgeInsetsGeometry? margin;
|
||||
|
||||
/// 宽度
|
||||
final double? width;
|
||||
|
||||
/// 高度
|
||||
final double? height;
|
||||
|
||||
/// 是否显示边框
|
||||
final bool showBorder;
|
||||
|
||||
const GlassPanel({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.blur = 20.0,
|
||||
this.backgroundColor,
|
||||
this.borderColor,
|
||||
this.borderRadius,
|
||||
this.padding,
|
||||
this.margin,
|
||||
this.width,
|
||||
this.height,
|
||||
this.showBorder = true,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final bgColor = backgroundColor ?? AppColorScheme.glassPanelBackground;
|
||||
final brColor = borderColor ?? AppColorScheme.glassPanelBorder;
|
||||
final br = borderRadius ?? BorderRadius.circular(AppRadius.xl);
|
||||
|
||||
Widget content = ClipRRect(
|
||||
borderRadius: br,
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: blur, sigmaY: blur),
|
||||
child: Container(
|
||||
width: width,
|
||||
height: height,
|
||||
padding: padding ?? EdgeInsets.all(AppSpacing.md),
|
||||
decoration: BoxDecoration(
|
||||
color: bgColor,
|
||||
borderRadius: br,
|
||||
border: showBorder
|
||||
? Border.all(
|
||||
color: brColor,
|
||||
width: 1,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (margin != null) {
|
||||
content = Padding(
|
||||
padding: margin!,
|
||||
child: content,
|
||||
);
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
}
|
||||
|
||||
/// GlassCard - 带毛玻璃效果的卡片
|
||||
///
|
||||
/// 用于列表项、信息展示等场景
|
||||
/// 预设了常用配置，简化使用
|
||||
class GlassCard extends StatelessWidget {
|
||||
/// 子组件
|
||||
final Widget child;
|
||||
|
||||
/// 点击回调
|
||||
final VoidCallback? onTap;
|
||||
|
||||
/// 长按回调
|
||||
final VoidCallback? onLongPress;
|
||||
|
||||
/// 内边距
|
||||
final EdgeInsetsGeometry? padding;
|
||||
|
||||
/// 外边距
|
||||
final EdgeInsetsGeometry? margin;
|
||||
|
||||
/// 圆角
|
||||
final BorderRadius? borderRadius;
|
||||
|
||||
/// 是否显示霓虹光效
|
||||
final bool showNeonGlow;
|
||||
|
||||
/// 霓虹光效颜色
|
||||
final Color? neonGlowColor;
|
||||
|
||||
const GlassCard({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.onTap,
|
||||
this.onLongPress,
|
||||
this.padding,
|
||||
this.margin,
|
||||
this.borderRadius,
|
||||
this.showNeonGlow = false,
|
||||
this.neonGlowColor,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final br = borderRadius ?? BorderRadius.circular(AppRadius.xl);
|
||||
final glowColor = neonGlowColor ?? AppColorScheme.neonGlowPrimary;
|
||||
|
||||
Widget card = GlassPanel(
|
||||
padding: padding ?? EdgeInsets.all(AppSpacing.md),
|
||||
margin: margin,
|
||||
borderRadius: br,
|
||||
child: child,
|
||||
);
|
||||
|
||||
if (showNeonGlow) {
|
||||
card = Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: br,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: glowColor,
|
||||
blurRadius: 15,
|
||||
spreadRadius: 0,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: card,
|
||||
);
|
||||
}
|
||||
|
||||
if (onTap != null || onLongPress != null) {
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
onLongPress: onLongPress,
|
||||
child: card,
|
||||
);
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
}
|
||||
|
||||
/// GlassBottomSheet - 毛玻璃底部抽屉
|
||||
///
|
||||
/// 用于弹出的底部面板
|
||||
class GlassBottomSheet extends StatelessWidget {
|
||||
/// 子组件
|
||||
final Widget child;
|
||||
|
||||
/// 标题
|
||||
final String? title;
|
||||
|
||||
/// 是否显示关闭按钮
|
||||
final bool showCloseButton;
|
||||
|
||||
/// 内边距
|
||||
final EdgeInsetsGeometry? padding;
|
||||
|
||||
const GlassBottomSheet({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.title,
|
||||
this.showCloseButton = true,
|
||||
this.padding,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.glassPanelBackground,
|
||||
borderRadius: const BorderRadius.vertical(
|
||||
top: Radius.circular(AppRadius.xxl),
|
||||
),
|
||||
border: Border.all(
|
||||
color: AppColorScheme.glassPanelBorder,
|
||||
),
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: const BorderRadius.vertical(
|
||||
top: Radius.circular(AppRadius.xxl),
|
||||
),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// 顶部拖动条
|
||||
Container(
|
||||
margin: const EdgeInsets.only(top: 12, bottom: 8),
|
||||
width: 40,
|
||||
height: 4,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.5),
|
||||
borderRadius: BorderRadius.circular(2),
|
||||
),
|
||||
),
|
||||
// 标题栏
|
||||
if (title != null || showCloseButton)
|
||||
Padding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
AppSpacing.lg,
|
||||
AppSpacing.sm,
|
||||
AppSpacing.sm,
|
||||
AppSpacing.md,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
if (title != null)
|
||||
Expanded(
|
||||
child: Text(
|
||||
title!,
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColorScheme.darkOnSurface,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (showCloseButton)
|
||||
GestureDetector(
|
||||
onTap: () => Navigator.of(context).pop(),
|
||||
child: Container(
|
||||
padding: EdgeInsets.all(AppSpacing.sm),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColorScheme.darkOutlineVariant
|
||||
.withValues(alpha: 0.2),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.close,
|
||||
size: 18,
|
||||
color: AppColorScheme.darkOnSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 内容
|
||||
Padding(
|
||||
padding: padding ??
|
||||
EdgeInsets.fromLTRB(
|
||||
AppSpacing.lg,
|
||||
0,
|
||||
AppSpacing.lg,
|
||||
AppSpacing.xl,
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 显示底部抽屉
|
||||
static Future<T?> show<T>({
|
||||
required BuildContext context,
|
||||
required Widget Function(BuildContext) builder,
|
||||
bool isScrollControlled = false,
|
||||
bool isDismissible = true,
|
||||
bool enableDrag = true,
|
||||
}) {
|
||||
return showModalBottomSheet<T>(
|
||||
context: context,
|
||||
isScrollControlled: isScrollControlled,
|
||||
isDismissible: isDismissible,
|
||||
enableDrag: enableDrag,
|
||||
backgroundColor: Colors.transparent,
|
||||
builder: builder,
|
||||
);
|
||||
}
|
||||
}
|
||||
403
flutter_monisuo/lib/ui/components/neon_glow.dart
Normal file
403
flutter_monisuo/lib/ui/components/neon_glow.dart
Normal file
@@ -0,0 +1,403 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../core/theme/app_color_scheme.dart';
|
||||
import '../../core/theme/app_spacing.dart';
|
||||
|
||||
/// NeonGlow - 霓虹光效组件
|
||||
///
|
||||
/// Material Design 3 风格的霓虹光效
|
||||
/// 用于按钮、卡片、图标等需要突出显示的元素
|
||||
///
|
||||
/// 光效类型:
|
||||
/// - Primary: 青色光效 (#72dcff)
|
||||
/// - Secondary: 紫色光效 (#dd8bfb)
|
||||
/// - Tertiary: 绿色光效 (#afffd1)
|
||||
/// - Error: 红色光效 (#ff716c)
|
||||
class NeonGlow extends StatelessWidget {
|
||||
/// 子组件
|
||||
final Widget child;
|
||||
|
||||
/// 光效颜色
|
||||
final Color glowColor;
|
||||
|
||||
/// 模糊半径，默认 15.0
|
||||
final double blurRadius;
|
||||
|
||||
/// 扩散半径，默认 0.0
|
||||
final double spreadRadius;
|
||||
|
||||
/// 圆角
|
||||
final BorderRadius? borderRadius;
|
||||
|
||||
const NeonGlow({
|
||||
super.key,
|
||||
required this.child,
|
||||
required this.glowColor,
|
||||
this.blurRadius = 15.0,
|
||||
this.spreadRadius = 0.0,
|
||||
this.borderRadius,
|
||||
});
|
||||
|
||||
/// Primary 霓虹光效 (青色)
|
||||
factory NeonGlow.primary({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
double blurRadius = 15.0,
|
||||
BorderRadius? borderRadius,
|
||||
}) {
|
||||
return NeonGlow(
|
||||
key: key,
|
||||
glowColor: AppColorScheme.neonGlowPrimary,
|
||||
blurRadius: blurRadius,
|
||||
borderRadius: borderRadius,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
/// Secondary 霓虹光效 (紫色)
|
||||
factory NeonGlow.secondary({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
double blurRadius = 15.0,
|
||||
BorderRadius? borderRadius,
|
||||
}) {
|
||||
return NeonGlow(
|
||||
key: key,
|
||||
glowColor: AppColorScheme.neonGlowSecondary,
|
||||
blurRadius: blurRadius,
|
||||
borderRadius: borderRadius,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
/// Tertiary 霓虹光效 (绿色)
|
||||
factory NeonGlow.tertiary({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
double blurRadius = 20.0,
|
||||
BorderRadius? borderRadius,
|
||||
}) {
|
||||
return NeonGlow(
|
||||
key: key,
|
||||
glowColor: AppColorScheme.neonGlowTertiary,
|
||||
blurRadius: blurRadius,
|
||||
borderRadius: borderRadius,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
/// Error 霓虹光效 (红色)
|
||||
factory NeonGlow.error({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
double blurRadius = 15.0,
|
||||
BorderRadius? borderRadius,
|
||||
}) {
|
||||
return NeonGlow(
|
||||
key: key,
|
||||
glowColor: AppColorScheme.darkError.withValues(alpha: 0.3),
|
||||
blurRadius: blurRadius,
|
||||
borderRadius: borderRadius,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final br = borderRadius ?? BorderRadius.circular(AppRadius.xl);
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: br,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: glowColor,
|
||||
blurRadius: blurRadius,
|
||||
spreadRadius: spreadRadius,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// NeonButton - 带霓虹光效的按钮
|
||||
///
|
||||
/// 预设了常用配置，简化使用
|
||||
class NeonButton extends StatefulWidget {
|
||||
/// 按钮文本
|
||||
final String text;
|
||||
|
||||
/// 点击回调
|
||||
final VoidCallback? onPressed;
|
||||
|
||||
/// 按钮类型
|
||||
final NeonButtonType type;
|
||||
|
||||
/// 是否显示光效
|
||||
final bool showGlow;
|
||||
|
||||
/// 图标
|
||||
final IconData? icon;
|
||||
|
||||
/// 是否加载中
|
||||
final bool isLoading;
|
||||
|
||||
/// 按钮宽度
|
||||
final double? width;
|
||||
|
||||
/// 按钮高度，默认 48
|
||||
final double height;
|
||||
|
||||
const NeonButton({
|
||||
super.key,
|
||||
required this.text,
|
||||
this.onPressed,
|
||||
this.type = NeonButtonType.primary,
|
||||
this.showGlow = true,
|
||||
this.icon,
|
||||
this.isLoading = false,
|
||||
this.width,
|
||||
this.height = 48,
|
||||
});
|
||||
|
||||
@override
|
||||
State<NeonButton> createState() => _NeonButtonState();
|
||||
}
|
||||
|
||||
class _NeonButtonState extends State<NeonButton>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _controller;
|
||||
late Animation<double> _scaleAnimation;
|
||||
bool _isPressed = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
duration: const Duration(milliseconds: 150),
|
||||
vsync: this,
|
||||
);
|
||||
_scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate(
|
||||
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onTapDown(TapDownDetails details) {
|
||||
setState(() => _isPressed = true);
|
||||
_controller.forward();
|
||||
}
|
||||
|
||||
void _onTapUp(TapUpDetails details) {
|
||||
setState(() => _isPressed = false);
|
||||
_controller.reverse();
|
||||
}
|
||||
|
||||
void _onTapCancel() {
|
||||
setState(() => _isPressed = false);
|
||||
_controller.reverse();
|
||||
}
|
||||
|
||||
Color get _backgroundColor {
|
||||
switch (widget.type) {
|
||||
case NeonButtonType.primary:
|
||||
return AppColorScheme.darkPrimary;
|
||||
case NeonButtonType.secondary:
|
||||
return AppColorScheme.darkSecondary;
|
||||
case NeonButtonType.tertiary:
|
||||
return AppColorScheme.darkTertiary;
|
||||
case NeonButtonType.error:
|
||||
return AppColorScheme.darkError;
|
||||
case NeonButtonType.outline:
|
||||
return Colors.transparent;
|
||||
}
|
||||
}
|
||||
|
||||
Color get _foregroundColor {
|
||||
switch (widget.type) {
|
||||
case NeonButtonType.primary:
|
||||
return AppColorScheme.darkOnPrimaryFixed;
|
||||
case NeonButtonType.secondary:
|
||||
return AppColorScheme.darkOnSecondary;
|
||||
case NeonButtonType.tertiary:
|
||||
return AppColorScheme.darkOnTertiaryFixed;
|
||||
case NeonButtonType.error:
|
||||
return AppColorScheme.darkOnError;
|
||||
case NeonButtonType.outline:
|
||||
return AppColorScheme.darkPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
Color get _glowColor {
|
||||
switch (widget.type) {
|
||||
case NeonButtonType.primary:
|
||||
return AppColorScheme.neonGlowPrimary;
|
||||
case NeonButtonType.secondary:
|
||||
return AppColorScheme.neonGlowSecondary;
|
||||
case NeonButtonType.tertiary:
|
||||
return AppColorScheme.neonGlowTertiary;
|
||||
case NeonButtonType.error:
|
||||
return AppColorScheme.darkError.withValues(alpha: 0.3);
|
||||
case NeonButtonType.outline:
|
||||
return AppColorScheme.neonGlowPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
LinearGradient? get _gradient {
|
||||
if (widget.type == NeonButtonType.outline) return null;
|
||||
|
||||
switch (widget.type) {
|
||||
case NeonButtonType.primary:
|
||||
return const LinearGradient(
|
||||
colors: [AppColorScheme.darkPrimary, AppColorScheme.darkPrimaryContainer],
|
||||
begin: Alignment(-0.7, -0.7),
|
||||
end: Alignment(0.7, 0.7),
|
||||
);
|
||||
case NeonButtonType.secondary:
|
||||
return const LinearGradient(
|
||||
colors: [AppColorScheme.darkSecondary, AppColorScheme.darkSecondaryFixed],
|
||||
begin: Alignment(-0.7, -0.7),
|
||||
end: Alignment(0.7, 0.7),
|
||||
);
|
||||
case NeonButtonType.tertiary:
|
||||
return AppColorScheme.buyGradient;
|
||||
case NeonButtonType.error:
|
||||
return AppColorScheme.sellGradient;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final button = GestureDetector(
|
||||
onTapDown: widget.onPressed != null ? _onTapDown : null,
|
||||
onTapUp: widget.onPressed != null ? _onTapUp : null,
|
||||
onTapCancel: widget.onPressed != null ? _onTapCancel : null,
|
||||
onTap: widget.isLoading ? null : widget.onPressed,
|
||||
child: ScaleTransition(
|
||||
scale: _scaleAnimation,
|
||||
child: Container(
|
||||
width: widget.width,
|
||||
height: widget.height,
|
||||
decoration: BoxDecoration(
|
||||
gradient: _gradient,
|
||||
color: _gradient == null ? _backgroundColor : null,
|
||||
borderRadius: BorderRadius.circular(AppRadius.xxl),
|
||||
border: widget.type == NeonButtonType.outline
|
||||
? Border.all(
|
||||
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.3),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
child: Center(
|
||||
child: widget.isLoading
|
||||
? SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(_foregroundColor),
|
||||
),
|
||||
)
|
||||
: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (widget.icon != null) ...[
|
||||
Icon(widget.icon, size: 18, color: _foregroundColor),
|
||||
SizedBox(width: AppSpacing.sm),
|
||||
],
|
||||
Text(
|
||||
widget.text,
|
||||
style: TextStyle(
|
||||
color: _foregroundColor,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (widget.showGlow && widget.type != NeonButtonType.outline) {
|
||||
return NeonGlow(
|
||||
glowColor: _glowColor,
|
||||
borderRadius: BorderRadius.circular(AppRadius.xxl),
|
||||
child: button,
|
||||
);
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
}
|
||||
|
||||
/// 按钮类型
|
||||
enum NeonButtonType {
|
||||
/// 主要按钮 (青色)
|
||||
primary,
|
||||
|
||||
/// 次要按钮 (紫色)
|
||||
secondary,
|
||||
|
||||
/// 成功按钮 (绿色)
|
||||
tertiary,
|
||||
|
||||
/// 危险按钮 (红色)
|
||||
error,
|
||||
|
||||
/// 边框按钮
|
||||
outline,
|
||||
}
|
||||
|
||||
/// NeonIcon - 带霓虹光效的图标
|
||||
class NeonIcon extends StatelessWidget {
|
||||
/// 图标
|
||||
final IconData icon;
|
||||
|
||||
/// 图标大小
|
||||
final double size;
|
||||
|
||||
/// 图标颜色
|
||||
final Color color;
|
||||
|
||||
/// 光效颜色，默认使用图标颜色
|
||||
final Color? glowColor;
|
||||
|
||||
/// 光效模糊半径
|
||||
final double glowBlur;
|
||||
|
||||
const NeonIcon({
|
||||
super.key,
|
||||
required this.icon,
|
||||
this.size = 24,
|
||||
required this.color,
|
||||
this.glowColor,
|
||||
this.glowBlur = 10,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: glowColor ?? color.withValues(alpha: 0.5),
|
||||
blurRadius: glowBlur,
|
||||
spreadRadius: 0,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(icon, size: size, color: color),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user