AudiOhm/frontend

Spotify Le 2 - Frontend Flutter

Application Flutter cross-platform (Desktop + Android) avec thème néon cyberpunk.

Stack Technique

• Flutter 3.2+ (Dart 3.2+)
• Riverpod 2.4+ - State management
• Dio 5.4+ - HTTP client
• just_audio 0.9+ - Audio playback
• drift 2.14+ - Local database
• cached_network_image 3.3+ - Image caching

Structure du Projet

lib/
├── main.dart                    # Entry point
├── core/                        # Configuration partagée
│   ├── constants/
│   │   └── api_constants.dart
│   └── theme/
│       ├── colors.dart          # Palette néon cyberpunk
│       ├── text_styles.dart     # Typographie
│       └── app_theme.dart       # Thème Material
├── domain/                      # Business logic
│   └── entities/
│       ├── user.dart
│       ├── track.dart
│       └── playlist.dart
├── infrastructure/              # External dependencies
│   └── datasources/
│       ├── local/              # Database locale
│       └── remote/             # API client
├── presentation/               # UI layer
│   ├── providers/
│   │   └── navigation_provider.dart
│   ├── adaptive/
│   │   └── adaptive_layout.dart # Desktop vs Mobile
│   ├── pages/
│   │   ├── desktop/
│   │   │   └── home_page.dart
│   │   └── mobile/
│   │       └── mobile_home_page.dart
│   └── widgets/
│       ├── common/
│       │   └── mini_player.dart
│       └── desktop/
│           ├── desktop_sidebar.dart
│           └── desktop_top_bar.dart
└── l10n/                        # Internationalization

Installation

Prérequis

• Flutter 3.2+
• Dart 3.2+
• Android Studio / VS Code
• Android SDK (pour Android)

1. Cloner le projet

cd Spotify_le_2/frontend

2. Installer les dépendances

flutter pub get

3. Générer le code (Riverpod generators)

dart run build_runner build --delete-conflicting-outputs

4. Lancer l'app

# Desktop
flutter run -d windows

# Android
flutter run -d android

# Linux
flutter run -d linux

Thème Néon Cyberpunk

Palette de Couleurs

// Backgrounds
primary: #0A0E27       // Bleu nuit très foncé
surface: #1A1F3A       // Bleu nuit
surfaceVariant: #252B4A

// Accent néon
cyan: #00F0FF          // Cyan électrique
violet: #BF00FF        // Violet néon
rose: #FF006E          // Rose néon
vert: #39FF14          // Vert néon

Utilisation du Thème

// Import
import 'package:spotify_le_2/core/theme/colors.dart';

// Utiliser les couleurs
Container(
  color: AppColors.surface,
  child: Text(
    'Hello',
    style: TextStyle(color: AppColors.cyan),
  ),
)

// Gradients
Container(
  decoration: BoxDecoration(
    gradient: AppColors.primaryGradient,
  ),
)

// Effets glow
Container(
  decoration: BoxDecoration(
    boxShadow: AppColors.cyanGlow,
  ),
)

Layout Adaptatif

L'application utilise deux layouts distincts selon la largeur de l'écran :

Desktop (≥ 800px) :

• Sidebar navigation à gauche (240px)
• Top bar avec recherche
• Contenu principal scrollable
• Mini player persistant en bas

Mobile (< 800px) :

• Top bar
• Contenu principal
• Mini player sticky
• Bottom navigation bar (4 onglets)

Navigation

// Naviguer vers une page
ref.read(navigationProvider.notifier).navigateTo('search');

// Watcher la page courante
final currentPage = ref.watch(currentPageProvider);

Développement

Formatter

flutter format .

Linter

flutter analyze

Tests

# Tous les tests
flutter test

# Tests avec coverage
flutter test --coverage

Build

# Windows
flutter build windows

# Android APK
flutter build apk

# Android App Bundle
flutter build appbundle

# Linux
flutter build linux

Performance

Optimisations implémentées

1. Streaming 60fps - StreamSubscription pour progress bar
2. Infinite scroll - ListView.builder avec préchargement
3. Image caching - cached_network_image avec cache infini
4. Animations optimisées - 200ms avec easeOutCubic

Profiling

# DevTools
flutter pub global activate devtools
flutter pub global run devtools

# Puis lancer l'app avec profiling
flutter run --profile

Configuration API

Modifier lib/core/constants/api_constants.dart :

class ApiConstants {
  static const String baseUrl = 'http://localhost:8000/api/v1';
  static const String wsUrl = 'ws://localhost:8000';
  static const Duration connectionTimeout = Duration(seconds: 30);
}

Ressources

• Flutter Documentation
• Riverpod Documentation
• Design Preview - Aperçu HTML du thème

License

MIT