# 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