Aller au contenu principal

Design d'Application Calendrier - Style Linear/Apple

Vue d'ensemble​

Cette application calendrier pour pâtissier a été conçue en s'inspirant du style de Linear.app et de l'application Calendrier d'Apple. Le design privilégie la simplicité, l'élégance et l'efficacité avec une approche minimaliste.

Caractéristiques du Design​

🎨 Palette de Couleurs​

Mode Clair​

  • Arrière-plan principal : Blanc pur (#FFFFFF)
  • Arrière-plan secondaire : Blanc cassé subtil (#FAFAFA)
  • Texte principal : Noir profond (#1A1A1A)
  • Texte secondaire : Gris moyen (#6B6B6B)
  • Bordures : Gris très clair (#E5E5E5)

Mode Sombre​

  • Arrière-plan principal : Presque noir (#0A0A0A)
  • Arrière-plan secondaire : Gris très foncé (#1A1A1A)
  • Texte principal : Blanc pur (#FFFFFF)
  • Texte secondaire : Gris moyen (#8B8B8B)
  • Bordures : Gris foncé (#2A2A2A)

Couleur d'Accentuation​

  • Bleu électrique : #0066FF - Utilisée pour les éléments interactifs et les statuts "Complet"

📝 Typographie​

  • Police : Utilise les polices système par défaut pour un rendu optimal
  • Hiérarchie : Utilise différentes graisses (400, 500, 600, 700) pour créer une hiérarchie visuelle claire
  • Espacement : Lettrage optimisé pour la lisibilité

🎯 Éléments Graphiques​

Principe Minimaliste​

  • Aucune illustration : Le design repose entièrement sur la typographie, les espacements et les lignes fines
  • Bordures subtiles : Lignes très fines (0.5px) ou inexistantes
  • Espacement généreux : Beaucoup d'espace vide ("whitespace") pour une respiration visuelle

Statuts des Jours​

  • Jour "Complet" : Cercle plein de la couleur d'accentuation (bleu électrique)
  • "Places limitées" : Contour du cercle uniquement
  • Jour disponible : Aucun indicateur visuel
  • Jour fermé : Couleur grise

🔘 Bouton Partager​

  • Position : Bouton flottant en bas à droite
  • Style : Rectangle arrondi avec icône et texte "Partager"
  • Couleur : Bleu électrique avec ombre subtile
  • Animation : Effet de pression et rotation légère au toucher

Architecture Technique​

🏗️ Structure des Composants​

lib/
├── core/
│   └── theme/
│       ├── app_theme.dart          # Thèmes clair et sombre
│       └── theme_service.dart      # Service de gestion des thèmes
├── features/
│   └── calendar/
│       └── presentation/
│           ├── pages/
│           │   └── linear_calendar_page.dart    # Page principale
│           └── widgets/
│               ├── linear_calendar_widget.dart  # Widget calendrier
│               └── linear_share_button.dart     # Bouton de partage

🎨 Système de Thème​

Thème Clair (AppTheme.lightTheme)​

  • Fond blanc pur avec beaucoup d'espace vide
  • Texte noir profond pour un contraste optimal
  • Bordures très subtiles

Thème Sombre (AppTheme.darkTheme)​

  • Fond presque noir avec dégradés subtils
  • Texte blanc pur
  • Bordures grises foncées

Basculement de Thème​

  • Service ThemeService avec ChangeNotifier
  • Persistance des préférences avec SharedPreferences
  • Basculement instantané via un switch dans les paramètres

📱 Widgets Principaux​

LinearCalendarWidget​

  • Grille de calendrier minimaliste
  • Navigation par mois avec boutons flèches
  • Indicateurs de statut visuels subtils
  • Animations fluides

LinearShareButton​

  • Bouton flottant élégant
  • Animations de pression
  • État de chargement
  • Design cohérent avec le thème

Fonctionnalités​

✅ Implémentées​

  • Système de thème clair/sombre
  • Design minimaliste inspiré de Linear.app
  • Statuts visuels des jours (Complet, Places limitées)
  • Bouton de partage flottant
  • Navigation fluide entre les mois
  • Animations subtiles
  • Basculement de thème en temps réel
  • Persistance des préférences

🔄 En Cours​

  • Intégration complète avec les données existantes
  • Tests d'interface utilisateur
  • Optimisations de performance

Utilisation​

Basculement de Thème​

  1. Aller dans l'onglet "Paramètres"
  2. Utiliser le switch "Thème" pour basculer entre mode clair et sombre
  3. Le changement est instantané et persistant
  • Utiliser les boutons flèches pour naviguer entre les mois
  • Taper sur un jour pour le sélectionner
  • Les statuts visuels indiquent la disponibilité

Partage​

  • Utiliser le bouton flottant "Partager" en bas à droite
  • Le bouton n'apparaît que pour les jours disponibles

Inspiration​

Ce design s'inspire de :

  • Linear.app : Minimalisme, typographie, espacement
  • Application Calendrier d'Apple : Navigation, grille, indicateurs
  • Design System moderne : Couleurs, animations, interactions

Le résultat est une interface élégante et fonctionnelle qui met l'accent sur l'expérience utilisateur et la simplicité d'utilisation.