232 lines
7.5 KiB
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(),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |