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: [
|
children: [
|
||||||
NavigationRail(
|
NavigationRail(
|
||||||
extended: true,
|
extended: true,
|
||||||
leading: Padding(
|
leading: Image(
|
||||||
padding: const EdgeInsets.only(bottom: 10),
|
image: AssetImage('assets/velocity.png'),
|
||||||
child: Image(
|
width: 150
|
||||||
image: AssetImage('assets/velocity.png'),
|
|
||||||
width: 150
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
trailing: _buildLogin(context),
|
trailing: _buildLogin(context),
|
||||||
labelType: NavigationRailLabelType.none,
|
labelType: NavigationRailLabelType.none,
|
||||||
|
|||||||
@@ -532,10 +532,10 @@ packages:
|
|||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
name: meta
|
name: meta
|
||||||
sha256: e3641ec5d63ebf0d9b41bd43201a66e3fc79a65db5f61fc181f04cd27aab950c
|
sha256: "23f08335362185a5ea2ad3a4e597f1375e78bce8a040df5c600c8d3552ef2394"
|
||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "1.16.0"
|
version: "1.17.0"
|
||||||
mime:
|
mime:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
@@ -857,10 +857,10 @@ packages:
|
|||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
name: test_api
|
name: test_api
|
||||||
sha256: "522f00f556e73044315fa4585ec3270f1808a4b186c936e612cab0b565ff1e00"
|
sha256: ab2726c1a94d3176a45960b6234466ec367179b87dd74f1611adb1f3b5fb9d55
|
||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "0.7.6"
|
version: "0.7.7"
|
||||||
timeago:
|
timeago:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description:
|
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="mobile-web-app-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
<meta name="apple-mobile-web-app-title" content="qpay">
|
<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 -->
|
<!-- Favicon -->
|
||||||
<link rel="icon" type="image/png" href="favicon.png"/>
|
<link rel="icon" type="image/png" href="favicon.png"/>
|
||||||
|
|||||||
@@ -3,19 +3,19 @@
|
|||||||
"short_name": "Velocity",
|
"short_name": "Velocity",
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"background_color": "#9D6711",
|
"background_color": "#ffffff",
|
||||||
"theme_color": "#9D6711",
|
"theme_color": "#ffffff",
|
||||||
"description": "Payments... but faster",
|
"description": "Payments... but faster",
|
||||||
"orientation": "portrait-primary",
|
"orientation": "portrait-primary",
|
||||||
"prefer_related_applications": false,
|
"prefer_related_applications": false,
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "icons/Icon-192.png",
|
"src": "icons/velocity-icon-black-192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "icons/Icon-512.png",
|
"src": "icons/velocity-icon-black.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
|
|||||||