Icons & Assets

Icons & Assets

This guide covers replacing all visual assets including app icons, colors, graphics, and other design elements to match your brand.

App Icon Requirements

Design Guidelines

Android:

• Adaptive Icons: 108x108dp with 72x72dp safe area
• Legacy Icons: 48x48dp to 192x192dp
• Format: PNG (24-bit RGB + alpha)
• Style: Follow Material Design guidelines

iOS:

• Sizes: 1024x1024px master, multiple sizes generated
• Format: PNG without transparency
• Style: Follow iOS Human Interface Guidelines
• Corner Radius: System handles automatically

Icon Design Best Practices

1. Simple and Recognizable: Clear at small sizes
2. Avoid Text: Icons should work without words
3. Platform Consistency: Follow each platform’s style
4. Scalability: Should work from 16px to 1024px
5. Brand Alignment: Reflect your app’s purpose

Step 1: Create Your App Icon

Design Tools

• Professional: Adobe Illustrator, Figma, Sketch
• Online: Canva, Figma (free tier)
• AI Tools: Midjourney, DALL-E with editing

Required Sizes

Create your master icon at 1024x1024px, then generate these sizes:

Android Sizes:

• mdpi: 48x48px
• hdpi: 72x72px
• xhdpi: 96x96px
• xxhdpi: 144x144px
• xxxhdpi: 192x192px

iOS Sizes:

• 20x20px (iPhone notification)
• 29x29px (Settings)
• 40x40px (Spotlight)
• 58x58px (Settings @2x)
• 60x60px (iPhone app)
• 76x76px (iPad app)
• 80x80px (Spotlight @2x)
• 87x87px (Settings @3x)
• 120x120px (iPhone app @2x)
• 152x152px (iPad app @2x)
• 167x167px (iPad Pro @2x)
• 180x180px (iPhone app @3x)
• 1024x1024px (App Store)

Step 2: Generate Icon Assets

Using Online Tools

Recommended Tools:

• App Icon Generator - Free, all sizes
• Icon Kitchen - Android adaptive icons
• iOS App Icon Generator - iOS specific

Using Command Line (ImageMagick)

# Install ImageMagick
brew install imagemagick  # macOS
sudo apt install imagemagick  # Linux

# Generate Android icons
convert icon-master.png -resize 48x48 android/app/src/main/res/mipmap-mdpi/ic_launcher.png
convert icon-master.png -resize 72x72 android/app/src/main/res/mipmap-hdpi/ic_launcher.png
convert icon-master.png -resize 96x96 android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
convert icon-master.png -resize 144x144 android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
convert icon-master.png -resize 192x192 android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png

Using Flutter Icons Launcher Plugin

This project uses a separate configuration file for launcher icons:

Create or update icons_launcher.yaml:

icons_launcher:
  image_path: "assets/icon/app_icon.png"
  platforms:
    android:
      enable: true
      adaptive_icon_background: "#FFFFFF"
      adaptive_icon_foreground: "assets/icon/app_icon_foreground.png"
    ios:
      enable: true

Run the generator:

dart run icons_launcher:create

Step 3: Replace App Icons

Android Icons

Place icons in these directories:

android/app/src/main/res/
├── mipmap-mdpi/
│   └── ic_launcher.png (48x48)
├── mipmap-hdpi/
│   └── ic_launcher.png (72x72)
├── mipmap-xhdpi/
│   └── ic_launcher.png (96x96)
├── mipmap-xxhdpi/
│   └── ic_launcher.png (144x144)
└── mipmap-xxxhdpi/
    └── ic_launcher.png (192x192)

iOS Icons

Replace icons in Xcode:

1. Open ios/Runner.xcodeproj
2. Navigate to Runner > Assets.xcassets > AppIcon.appiconset
3. Drag and drop your icons to appropriate slots
4. Ensure all required sizes are filled

Step 4: Update Color Scheme

Understanding the Current Theme System

This project uses Flex Color Scheme for theming. The current theme is defined in lib/core/theme/app_theme.dart and uses FlexScheme.shadGreen as the base color scheme.

Customizing Colors with Flex Color Scheme

To change the color scheme, you can:

1. Use a different FlexScheme preset:

lib/core/theme/app_theme.dart

static const _scheme = FlexScheme.materialBaseline; // Change this line

Available schemes include: material, materialHc, blue, indigo, hippieBlue, aquaBlue, brandBlue, deepBlue, sakura, mandyRed, red, redWine, purpleBrown, green, money, jungle, greyLaw, wasabi, gold, mango, amber, vesuviusBurn, deepPurple, ebonyClay, barossa, shark, bigStone, damask, bahamaBlue, mallardGreen, espresso, outerSpace, blueWhale, sanJuanBlue, rosewood, blumineBlue, and shadGreen (current).

2. Define custom colors by modifying the existing structure:

lib/core/theme/app_theme.dart

static ThemeData get lightTheme => FlexThemeData.light(
  scheme: _scheme,
  // Add custom key colors if needed
  keyColors: const FlexKeyColors(
    useSecondary: true,
    useTertiary: true,
  ),
  // ... rest of configuration
);

Customizing OTP-Specific Colors

The app includes custom colors for OTP-specific UI elements. These can be modified in the existing theme file:

// lib/core/theme/app_theme.dart - Update these static color constants
static const Color otpCardBackground = Color(0xFFF8F9FA);      // Light card background
static const Color otpCardBackgroundDark = Color(0xFF1E1E1E);  // Dark card background
static const Color otpCodeText = Color(0xFF2E7D32);           // OTP code text (light)
static const Color otpCodeTextDark = Color(0xFF66BB6A);       // OTP code text (dark)
static const Color progressBackground = Color(0xFFE0E0E0);    // Progress bar background
static const Color progressBackgroundDark = Color(0xFF424242); // Progress bar background (dark)
static const Color progressForeground = Color(0xFF4CAF50);    // Progress bar foreground
static const Color warningColor = Color(0xFFFF9800);          // Warning state
static const Color criticalColor = Color(0xFFF44336);         // Critical state

Theme Usage Best Practices

Use the theme’s color system consistently:

// Good - uses theme colors
Container(
  color: Theme.of(context).colorScheme.primary,
)

// Good - uses custom OTP colors with context
Container(
  color: AppTheme.getOtpCardBackground(context),
)

// Avoid - hardcoded colors
Container(
  color: Colors.blue,
)

Step 5: Replace Visual Assets

Asset Directory Structure

assets/
├── icons/
│   ├── ui/                    # UI icons
│   │   ├── add.svg
│   │   ├── delete.svg
│   │   └── settings.svg
│   └── issuers/              # Service provider logos
│       ├── google.png
│       ├── microsoft.png
│       └── github.png
├── images/
│   ├── logo.png              # Your company logo
│   ├── onboarding/           # Onboarding illustrations
│   └── empty_states/         # Empty state graphics
└── lottie/
    ├── loading.json          # Loading animations
    └── success.json          # Success animations

Update pubspec.yaml

flutter:
  uses-material-design: true
  assets:
    - assets/icons/
    - assets/icons/issuers/
    - assets/images/
    - assets/lottie/

Replace Issuer Icons

Update service provider icons in assets/icons/issuers/:

• Use official brand assets when possible
• Maintain consistent sizing (e.g., 64x64px)
• Follow brand guidelines for each service
• Provide fallback for unknown services

lib/core/utils/issuer_icons.dart

class IssuerIcons {
  static const Map<String, String> icons = {
    'google': 'assets/icons/issuers/google.png',
    'microsoft': 'assets/icons/issuers/microsoft.png',
    'github': 'assets/icons/issuers/github.png',
    'discord': 'assets/icons/issuers/discord.png',
    // Add more as needed
  };

  static String getIcon(String issuer) {
    final key = issuer.toLowerCase();
    return icons[key] ?? 'assets/icons/issuers/default.png';
  }
}

Step 6: Update Splash Screen

Create Splash Screen Assets

Design splash screen with:

• Your app icon/logo
• Brand colors
• Loading indicator (optional)

Configure Native Splash

This project uses a separate configuration file for the splash screen.

Create or update flutter_native_splash.yaml:

flutter_native_splash:
  color: "#FFFFFF"  # Background color
  image: assets/images/splash_logo.png
  android_12:
    image: assets/images/splash_logo.png
    color: "#FFFFFF"
  ios:
    image: assets/images/splash_logo.png
    color: "#FFFFFF"

Generate splash screens:

dart run flutter_native_splash:create

Step 7: Font Customization (Optional)

Add Custom Fonts

1. Add font files to assets/fonts/
2. Update pubspec.yaml:

flutter:
  fonts:
    - family: YourCustomFont
      fonts:
        - asset: assets/fonts/YourFont-Regular.ttf
        - asset: assets/fonts/YourFont-Bold.ttf
          weight: 700

3. Update theme to use custom font:

// In app_theme.dart
static ThemeData lightTheme = ThemeData(
  fontFamily: 'YourCustomFont',
  // ... rest of theme
);

Step 8: Verification

Build and Test

# Clean and rebuild
flutter clean
flutter pub get

# Build for testing
flutter build apk --debug
flutter build ios --debug  # macOS only

Visual Verification Checklist

• App icon displays correctly in launcher
• Splash screen shows your branding
• Color scheme is consistently applied
• All custom assets load properly
• Dark theme works correctly
• Icons are crisp at all sizes

Test on Multiple Devices

• Different screen densities (Android)
• Various iPhone models (iOS)
• Tablets/larger screens
• Different OS versions

Common Issues & Solutions

Icon Issues

Problem: Icons appear blurry

# Solution: Ensure proper density folders
# Check that you have all required sizes

Problem: iOS icon not updating

# Solution: Clean iOS build
cd ios
rm -rf build/
cd ..
flutter clean
flutter build ios

Color Issues

Problem: Colors not applying consistently

// Solution: Use theme colors instead of hardcoded
// Bad
Container(color: Colors.blue)

// Good
Container(color: Theme.of(context).primaryColor)

Asset Loading Issues

Problem: Assets not found

# Solution: Verify pubspec.yaml asset paths
flutter:
  assets:
    - assets/icons/  # Include trailing slash for directories

Design Resources

Free Icon Sources

• Material Design Icons
• Lucide Icons
• Feather Icons
• Heroicons

Color Palette Tools

• Material Theme Builder
• Coolors
• Adobe Color

Brand Asset Guidelines

• Follow each platform’s branding guidelines
• Respect trademark and copyright
• Use official brand assets when available
• Maintain brand consistency

Next Steps

With your visual identity complete:

1. App Store Configuration - Prepare store listings
2. Firebase Setup - Configure backend services
3. Testing Guide - Ensure everything works

Your app now looks uniquely yours! 🎨