marco.pms.mobileapp/lib/view/splash_screen.dart

232 lines
7.5 KiB
Dart

import 'package:flutter/material.dart';
// Assuming 'package:on_field_work/images.dart' correctly provides 'Images.logoDark'
import 'package:on_field_work/images.dart';
class SplashScreen extends StatefulWidget {
final String? message;
final double? logoSize;
final Color? backgroundColor;
const SplashScreen({
super.key,
this.message =
'GET WORK DONE, ANYWHERE.', // Default message for a modern look
this.logoSize = 150, // Slightly larger logo
this.backgroundColor = Colors.white,
});
@override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
// Animation for the logo's vertical float effect
late Animation<double> _floatAnimation;
// Animation for logo's initial scale-in
late Animation<double> _scaleAnimation;
// Animation for logo and text fade-in
late Animation<double> _opacityAnimation;
// Animation for the gradient shimmer effect (moves from -1.0 to 2.0)
late Animation<double> _shimmerAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration:
const Duration(seconds: 3), // Longer duration for complex sequence
vsync: this,
);
// Initial scale-in: from 0.5 to 1.0 (happens in the first 40% of the duration)
_scaleAnimation = Tween<double>(begin: 0.5, end: 1.0).animate(
CurvedAnimation(
parent: _controller,
curve:
const Interval(0.0, 0.4, curve: Curves.easeOutBack), // Bouncy start
),
);
// Overall fade-in: from 0.0 to 1.0 (happens in the first 50% of the duration)
_opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: _controller,
curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
),
);
// Shimmer/Gradient Animation: Moves the gradient horizontally from left to right
_shimmerAnimation = Tween<double>(begin: -1.0, end: 2.0).animate(
CurvedAnimation(
parent: _controller,
curve: const Interval(0.0, 1.0, curve: Curves.linear),
),
);
// Floating effect: from -8.0 to 8.0 (loops repeatedly after initial animations)
_floatAnimation = Tween<double>(begin: -8.0, end: 8.0).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
),
);
// Start the complex animation sequence
_controller.forward().then((_) {
// After the initial scale/fade, switch to repeating the float and shimmer animation
if (mounted) {
_controller.repeat(
min: 0.4, // Keep repeat range for float animation
max: 1.0,
reverse: true,
);
}
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
// Widget for the multi-colored text with shimmering effect only on '.com'
Widget _buildAnimatedDomainText() {
const textStyle = TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto', // Use a clear, modern font
);
// The Shimmer Effect: AnimatedBuilder rebuilds the widget as the shimmerAnimation updates
return AnimatedBuilder(
animation: _shimmerAnimation,
builder: (context, child) {
// Define the silver gradient
final shimmerGradient = LinearGradient(
colors: const [
Colors.grey, // Starting dull color
Colors.white, // Brightest 'shimmer' highlight
Colors.grey, // Ending dull color
],
stops: const [0.3, 0.5, 0.7], // Position of colors
// The begin/end points move based on the animation value
begin: Alignment(_shimmerAnimation.value - 1.0, 0.0), // Start from left
end: Alignment(_shimmerAnimation.value, 0.0), // End to right
);
// The Text Content: RichText allows for different styles within one text block
return RichText(
text: TextSpan(
style: textStyle.copyWith(color: Colors.black), // Base style
children: <TextSpan>[
// 'On' - Blue color
TextSpan(
text: 'On',
style: TextStyle(color: Colors.blueAccent.shade700),
),
// 'FieldWork' - Green color
TextSpan(
text: 'FieldWork',
style: TextStyle(color: Colors.green.shade700),
),
// '.com' - The part that uses the animated gradient
TextSpan(
text: '.com',
style: textStyle.copyWith(
// Use a Paint()..shader to apply the gradient to the text color
// The Rect size (150.0 x 50.0) must be large enough to cover the '.com' text
foreground: Paint()..shader = shimmerGradient.createShader(
const Rect.fromLTWH(0.0, 0.0, 150.0, 50.0),
),
),
),
],
),
);
},
);
}
// A simple, modern custom progress indicator
Widget _buildProgressIndicator() {
return SizedBox(
width: 60,
child: LinearProgressIndicator(
backgroundColor: Colors.blueAccent.withOpacity(0.2),
valueColor: const AlwaysStoppedAnimation<Color>(Colors.blueAccent),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: widget.backgroundColor,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Animated Logo (Scale, Opacity, and Float)
FadeTransition(
opacity: _opacityAnimation,
child: AnimatedBuilder(
animation: _floatAnimation,
builder: (context, child) {
return Transform.translate(
offset: Offset(0, _floatAnimation.value),
child: ScaleTransition(
scale: _scaleAnimation,
child: SizedBox(
width: widget.logoSize,
height: widget.logoSize,
// Replace with your actual logo image widget
child: Image.asset(Images.logoDark),
),
),
);
},
),
),
const SizedBox(height: 30),
// **Corrected: Animated Domain Text with specific colors and only '.com' shimmering**
FadeTransition(
opacity: _opacityAnimation,
child: _buildAnimatedDomainText(),
),
const SizedBox(height: 10), // Small space between new text and message
// Text Message (Fades in slightly after logo)
if (widget.message != null)
FadeTransition(
opacity: _opacityAnimation,
child: Text(
widget.message!,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.grey.shade700,
letterSpacing: 1.2,
),
),
),
const SizedBox(height: 40),
// Modern Loading Indicator
_buildProgressIndicator(),
],
),
),
);
}
}