branding changes
@@ -1,72 +0,0 @@
|
||||
# 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
|
||||
@@ -1,67 +0,0 @@
|
||||
# Splash Screen Fix Implementation
|
||||
|
||||
## Issues Found and Fixed
|
||||
|
||||
### 1. **Missing Splash Screen Assets**
|
||||
- **Problem**: The `launch_background.xml` files were referencing non-existent splash screen images
|
||||
- **Fix**: Updated to use the existing `@mipmap/ic_launcher` resource
|
||||
|
||||
### 2. **Incorrect Night Mode Theme**
|
||||
- **Problem**: Night mode theme was using `Theme.Light.NoTitleBar` instead of `Theme.Black.NoTitleBar`
|
||||
- **Fix**: Updated `android/app/src/main/res/values-night/styles.xml` to use proper dark theme
|
||||
|
||||
### 3. **Missing Dedicated Splash Activity**
|
||||
- **Problem**: No dedicated splash screen activity to handle the initial app launch
|
||||
- **Fix**: Created `SplashActivity.kt` with proper timing and transition
|
||||
|
||||
### 4. **Incomplete Theme Configuration**
|
||||
- **Problem**: Missing proper theme configuration for splash screen
|
||||
- **Fix**: Added `SplashTheme` to both light and dark mode styles
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
### New Files:
|
||||
1. `android/app/src/main/kotlin/com/example/qpay/SplashActivity.kt` - Dedicated splash activity
|
||||
2. `android/app/src/main/res/layout/activity_splash.xml` - Splash screen layout
|
||||
3. `android/app/src/main/res/values/colors.xml` - Color definitions
|
||||
4. `android/app/src/main/res/values/strings.xml` - String resources
|
||||
|
||||
### Modified Files:
|
||||
1. `android/app/src/main/AndroidManifest.xml` - Added SplashActivity as launcher
|
||||
2. `android/app/src/main/res/values/styles.xml` - Added SplashTheme
|
||||
3. `android/app/src/main/res/values-night/styles.xml` - Fixed dark theme and added SplashTheme
|
||||
4. `android/app/src/main/res/drawable/launch_background.xml` - Fixed image reference
|
||||
5. `android/app/src/main/res/drawable-v21/launch_background.xml` - Fixed image reference
|
||||
6. `android/app/build.gradle.kts` - Added AppCompat dependency
|
||||
7. `lib/main.dart` - Added proper Flutter initialization
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **App Launch**: When the app starts, `SplashActivity` is launched first
|
||||
2. **Splash Display**: Shows the app icon and name for 2 seconds
|
||||
3. **Transition**: Automatically transitions to `MainActivity` (Flutter app)
|
||||
4. **Theme Support**: Properly handles both light and dark mode themes
|
||||
|
||||
## Testing
|
||||
|
||||
The splash screen has been tested with:
|
||||
- ✅ Debug build compilation
|
||||
- ✅ Proper resource references
|
||||
- ✅ Theme compatibility
|
||||
- ✅ Activity transitions
|
||||
|
||||
## Usage
|
||||
|
||||
The splash screen will now automatically display when the app launches. The implementation:
|
||||
- Shows for 2 seconds (configurable in `SplashActivity.kt`)
|
||||
- Displays the app icon and name
|
||||
- Supports both light and dark themes
|
||||
- Transitions smoothly to the main Flutter app
|
||||
|
||||
## Customization
|
||||
|
||||
To customize the splash screen:
|
||||
1. **Duration**: Modify the delay in `SplashActivity.kt` (currently 2000ms)
|
||||
2. **Logo**: Replace `@mipmap/ic_launcher` with your custom image
|
||||
3. **Colors**: Update `@color/splash_background` in `colors.xml`
|
||||
4. **Layout**: Modify `activity_splash.xml` for different designs
|
||||
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 23 KiB |
@@ -45,12 +45,9 @@ class _ScaffoldWithNavBarState extends State<ScaffoldWithNavBar> {
|
||||
children: [
|
||||
NavigationRail(
|
||||
extended: true,
|
||||
leading: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 10),
|
||||
child: Image(
|
||||
image: AssetImage('assets/velocity.png'),
|
||||
width: 150
|
||||
),
|
||||
leading: Image(
|
||||
image: AssetImage('assets/velocity.png'),
|
||||
width: 150
|
||||
),
|
||||
trailing: _buildLogin(context),
|
||||
labelType: NavigationRailLabelType.none,
|
||||
|
||||
@@ -532,10 +532,10 @@ packages:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: meta
|
||||
sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
|
||||
sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.16.0"
|
||||
version: "1.17.0"
|
||||
mime:
|
||||
dependency: transitive
|
||||
description:
|
||||
@@ -857,10 +857,10 @@ packages:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: test_api
|
||||
sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
|
||||
sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.7.6"
|
||||
version: "0.7.7"
|
||||
timeago:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
|
||||
BIN
web/favicon.png
|
Before Width: | Height: | Size: 85 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 20 KiB |
BIN
web/icons/velocity-icon-black-192.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
web/icons/velocity-icon-black.png
Normal file
|
After Width: | Height: | Size: 42 KiB |
@@ -26,7 +26,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="qpay">
|
||||
<link rel="apple-touch-icon" href="icons/Icon-192.png">
|
||||
<link rel="apple-touch-icon" href="icons/velocity-icon-black.png">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="favicon.png"/>
|
||||
|
||||
@@ -3,19 +3,19 @@
|
||||
"short_name": "Velocity",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#9D6711",
|
||||
"theme_color": "#9D6711",
|
||||
"background_color": "#ffffff",
|
||||
"theme_color": "#ffffff",
|
||||
"description": "Payments... but faster",
|
||||
"orientation": "portrait-primary",
|
||||
"prefer_related_applications": false,
|
||||
"icons": [
|
||||
{
|
||||
"src": "icons/Icon-192.png",
|
||||
"src": "icons/velocity-icon-black-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icons/Icon-512.png",
|
||||
"src": "icons/velocity-icon-black.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
},
|
||||
|
||||