72 lines
2.4 KiB
Markdown
72 lines
2.4 KiB
Markdown
# GIF Splash Screen Implementation
|
|
|
|
## Overview
|
|
|
|
This implementation adds a smooth GIF splash screen that appears after the native Android splash screen is removed. The GIF is displayed with elegant fade-in and scale animations, providing a seamless transition to the main app.
|
|
|
|
## Features
|
|
|
|
- **Smooth Animations**: Fade-in and scale animations for a polished look
|
|
- **GIF Support**: Displays the `assets/giphy.gif` file with proper frame rate
|
|
- **Error Handling**: Graceful fallback if animations fail
|
|
- **Responsive Design**: Adapts to different screen sizes
|
|
- **Clean Transition**: Smooth transition to the main app after completion
|
|
|
|
## Implementation Details
|
|
|
|
### Files Modified/Created
|
|
|
|
1. **`pubspec.yaml`**: Added `gif_view: ^0.4.0` dependency
|
|
2. **`lib/screens/splash_screen.dart`**: New splash screen widget
|
|
3. **`lib/main.dart`**: Modified to show splash screen first
|
|
|
|
### How It Works
|
|
|
|
1. **App Launch**: The app starts with the native Android splash screen
|
|
2. **Flutter Initialization**: After Flutter initializes, the GIF splash screen appears
|
|
3. **Animation Sequence**:
|
|
- Fade-in animation (1 second)
|
|
- Scale animation with elastic curve (0.8 seconds)
|
|
- GIF plays for 3 seconds
|
|
- Fade-out animation (1 second)
|
|
4. **Transition**: Smoothly transitions to the main app
|
|
|
|
### Animation Details
|
|
|
|
- **Fade Animation**: Uses `Curves.easeInOut` for smooth opacity transitions
|
|
- **Scale Animation**: Uses `Curves.elasticOut` for a bouncy, engaging effect
|
|
- **Duration**: Total splash screen duration is approximately 5 seconds
|
|
- **Frame Rate**: GIF plays at 30 FPS for smooth playback
|
|
|
|
### Customization
|
|
|
|
To customize the splash screen:
|
|
|
|
1. **Duration**: Modify the delay in `_startAnimations()` method
|
|
2. **GIF**: Replace `assets/giphy.gif` with your preferred GIF
|
|
3. **Animations**: Adjust animation curves and durations
|
|
4. **Styling**: Modify colors, shadows, and border radius
|
|
|
|
### Dependencies
|
|
|
|
- `gif_view: ^0.4.0` - For GIF playback support
|
|
|
|
## Usage
|
|
|
|
The splash screen automatically appears when the app launches. No additional configuration is required.
|
|
|
|
## Testing
|
|
|
|
The implementation has been tested with:
|
|
- ✅ Debug build compilation
|
|
- ✅ GIF asset loading
|
|
- ✅ Animation performance
|
|
- ✅ Error handling
|
|
- ✅ Responsive design
|
|
|
|
## Notes
|
|
|
|
- The GIF file must be placed in the `assets/` directory
|
|
- The splash screen respects the app's theme settings
|
|
- Animations are optimized for smooth performance
|
|
- Error handling ensures the app continues even if animations fail |