feldenr
9c504d2c3d
Features: - Frontend Flutter avec thème néon cyberpunk - Backend FastAPI avec streaming YouTube - Base de données PostgreSQL + Redis - Authentification JWT complète - Recherche multi-source (DB + YouTube) - Playlists CRUD avec drag & drop - Queue management - Settings avec audio quality - Interface adaptative (Desktop + Mobile) Tech Stack: - Frontend: Flutter 3.2+, Riverpod - Backend: Python 3.11+, FastAPI - Database: PostgreSQL 15+ - Cache: Redis 7+ - Streaming: yt-dlp + FFmpeg 🚀 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
248 lines
4.9 KiB
Markdown
248 lines
4.9 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
cd Spotify_le_2/frontend
|
|
```
|
|
|
|
### 2. Installer les dépendances
|
|
|
|
```bash
|
|
flutter pub get
|
|
```
|
|
|
|
### 3. Générer le code (Riverpod generators)
|
|
|
|
```bash
|
|
dart run build_runner build --delete-conflicting-outputs
|
|
```
|
|
|
|
### 4. Lancer l'app
|
|
|
|
```bash
|
|
# Desktop
|
|
flutter run -d windows
|
|
|
|
# Android
|
|
flutter run -d android
|
|
|
|
# Linux
|
|
flutter run -d linux
|
|
```
|
|
|
|
## Thème Néon Cyberpunk
|
|
|
|
### Palette de Couleurs
|
|
|
|
```dart
|
|
// 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
|
|
|
|
```dart
|
|
// 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
|
|
|
|
```dart
|
|
// Naviguer vers une page
|
|
ref.read(navigationProvider.notifier).navigateTo('search');
|
|
|
|
// Watcher la page courante
|
|
final currentPage = ref.watch(currentPageProvider);
|
|
```
|
|
|
|
## Développement
|
|
|
|
### Formatter
|
|
|
|
```bash
|
|
flutter format .
|
|
```
|
|
|
|
### Linter
|
|
|
|
```bash
|
|
flutter analyze
|
|
```
|
|
|
|
### Tests
|
|
|
|
```bash
|
|
# Tous les tests
|
|
flutter test
|
|
|
|
# Tests avec coverage
|
|
flutter test --coverage
|
|
```
|
|
|
|
### Build
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
# 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` :
|
|
|
|
```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](https://flutter.dev/docs)
|
|
- [Riverpod Documentation](https://riverpod.dev)
|
|
- [Design Preview](../docs/design-preview.html) - Aperçu HTML du thème
|
|
|
|
## License
|
|
|
|
MIT
|