Yuriy Panov
5c7b65a0d3
Complete transformation from dark to light theme with a professional, tech-forward design system featuring: - Material 3 theming with cyan-based color palette (#0891B2 primary) - Inter font family integration via Google Fonts - Comprehensive theme system (colors, spacing, typography, shadows) - Responsive component redesign across all screens - Enhanced UX with hover animations, Hero transitions, and shimmer loading - Accessibility features (reduced motion support, high contrast) - Clean architecture with zero hardcoded values Theme System: - Created app_colors.dart with semantic color constants - Created app_spacing.dart with 8px base spacing scale - Created app_theme.dart with complete Material 3 configuration - Added shimmer_loading.dart for image loading states UI Components Updated: - Book cards with hover effects and Hero animations - Bottom navigation with refined styling - All screens migrated to theme-based colors and typography - Forms and inputs using consistent design system Documentation: - Added REDESIGN_SUMMARY.md with complete implementation overview - Added IMPLEMENTATION_CHECKLIST.md with detailed task completion status All components now use centralized theme with no hardcoded values, ensuring consistency and easy future customization. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
76 lines
1.9 KiB
Dart
76 lines
1.9 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../theme/app_colors.dart';
|
|
import '../theme/app_spacing.dart';
|
|
|
|
class ShimmerLoading extends StatefulWidget {
|
|
final double width;
|
|
final double height;
|
|
final double borderRadius;
|
|
|
|
const ShimmerLoading({
|
|
super.key,
|
|
this.width = double.infinity,
|
|
this.height = 200,
|
|
this.borderRadius = AppSpacing.radiusMedium,
|
|
});
|
|
|
|
@override
|
|
State<ShimmerLoading> createState() => _ShimmerLoadingState();
|
|
}
|
|
|
|
class _ShimmerLoadingState extends State<ShimmerLoading>
|
|
with SingleTickerProviderStateMixin {
|
|
late AnimationController _controller;
|
|
late Animation<double> _animation;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(
|
|
vsync: this,
|
|
duration: const Duration(milliseconds: 1500),
|
|
)..repeat();
|
|
|
|
_animation = Tween<double>(
|
|
begin: -1.0,
|
|
end: 2.0,
|
|
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AnimatedBuilder(
|
|
animation: _animation,
|
|
builder: (context, child) {
|
|
return Container(
|
|
width: widget.width,
|
|
height: widget.height,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(widget.borderRadius),
|
|
gradient: LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: const [
|
|
AppColors.surfaceVariant,
|
|
AppColors.surface,
|
|
AppColors.surfaceVariant,
|
|
],
|
|
stops: [
|
|
_animation.value - 0.3,
|
|
_animation.value,
|
|
_animation.value + 0.3,
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|