vusakhoza/velocity-pay-flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
52c829062514c3b95609ccf0b3b4d107be7b53fe
velocity-pay-flutter/SPLASH_GIF_IMPLEMENTATION.md
Vus Khoza 44d21b3f14 prototype complete
2025-07-14 01:04:53 +02:00

2.4 KiB
Raw Blame History

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