feat: Mise à jour des interfaces mobiles v3.2.3
- Amélioration des interfaces utilisateur sur mobile - Optimisation de la responsivité des composants Flutter - Mise à jour des widgets de chat et communication - Amélioration des formulaires et tableaux - Ajout de nouveaux composants pour l'administration - Optimisation des thèmes et styles visuels 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,34 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class AppTheme {
|
||||
// Breakpoints pour le responsive design
|
||||
static const double breakpointMobileSmall = 360; // iPhone SE et petits Android
|
||||
static const double breakpointMobile = 600; // Smartphones standards
|
||||
static const double breakpointTablet = 900; // Tablettes
|
||||
|
||||
// Multiplicateurs de taille selon l'écran
|
||||
static const double fontScaleExtraSmall = 0.85; // < 360px
|
||||
static const double fontScaleSmall = 0.9; // 360-600px
|
||||
static const double fontScaleMedium = 0.95; // 600-900px
|
||||
static const double fontScaleLarge = 1.0; // > 900px
|
||||
|
||||
/// Calcule le multiplicateur de police selon la largeur d'écran
|
||||
static double getFontScaleFactor(double screenWidth) {
|
||||
if (screenWidth < breakpointMobileSmall) return fontScaleExtraSmall;
|
||||
if (screenWidth < breakpointMobile) return fontScaleSmall;
|
||||
if (screenWidth < breakpointTablet) return fontScaleMedium;
|
||||
return fontScaleLarge;
|
||||
}
|
||||
|
||||
/// Retourne une taille de police responsive
|
||||
static double responsive(BuildContext context, double baseSize) {
|
||||
final width = MediaQuery.of(context).size.width;
|
||||
return baseSize * getFontScaleFactor(width);
|
||||
}
|
||||
|
||||
/// Retourne une taille de police responsive (version courte)
|
||||
static double r(BuildContext context, double baseSize) => responsive(context, baseSize);
|
||||
|
||||
// Couleurs du thème basées sur la maquette Figma
|
||||
static const Color primaryColor = Color(0xFF20335E); // Bleu foncé
|
||||
static const Color secondaryColor = Color(0xFF9DC7C8); // Bleu clair
|
||||
@@ -35,7 +63,7 @@ class AppTheme {
|
||||
// Ombres
|
||||
static List<BoxShadow> cardShadow = [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.05),
|
||||
color: Colors.black.withValues(alpha: 0.05),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 3),
|
||||
@@ -44,7 +72,7 @@ class AppTheme {
|
||||
|
||||
static List<BoxShadow> buttonShadow = [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
color: Colors.black.withValues(alpha: 0.1),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 5,
|
||||
offset: const Offset(0, 2),
|
||||
@@ -130,14 +158,14 @@ class AppTheme {
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(borderRadiusMedium),
|
||||
borderSide: BorderSide(
|
||||
color: textLightColor.withOpacity(0.1),
|
||||
color: textLightColor.withValues(alpha: 0.1),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(borderRadiusMedium),
|
||||
borderSide: BorderSide(
|
||||
color: textLightColor.withOpacity(0.1),
|
||||
color: textLightColor.withValues(alpha: 0.1),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
@@ -227,14 +255,14 @@ class AppTheme {
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(borderRadiusMedium),
|
||||
borderSide: BorderSide(
|
||||
color: textDarkColor.withOpacity(0.1),
|
||||
color: textDarkColor.withValues(alpha: 0.1),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(borderRadiusMedium),
|
||||
borderSide: BorderSide(
|
||||
color: textDarkColor.withOpacity(0.1),
|
||||
color: textDarkColor.withValues(alpha: 0.1),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
@@ -253,34 +281,126 @@ class AppTheme {
|
||||
color: const Color(0xFF1F2937),
|
||||
),
|
||||
dividerTheme: DividerThemeData(
|
||||
color: textDarkColor.withOpacity(0.1),
|
||||
color: textDarkColor.withValues(alpha: 0.1),
|
||||
thickness: 1,
|
||||
space: spacingM,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Méthode helper pour générer le TextTheme
|
||||
// Méthode helper pour générer le TextTheme responsive
|
||||
static TextTheme getResponsiveTextTheme(BuildContext context, Color textColor) {
|
||||
final scaleFactor = getFontScaleFactor(MediaQuery.of(context).size.width);
|
||||
|
||||
return TextTheme(
|
||||
// Display styles (très grandes tailles)
|
||||
displayLarge: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 57 * scaleFactor, // Material 3 default
|
||||
),
|
||||
displayMedium: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 45 * scaleFactor,
|
||||
),
|
||||
displaySmall: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 36 * scaleFactor,
|
||||
),
|
||||
|
||||
// Headline styles (titres principaux)
|
||||
headlineLarge: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 32 * scaleFactor,
|
||||
),
|
||||
headlineMedium: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 28 * scaleFactor,
|
||||
),
|
||||
headlineSmall: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 24 * scaleFactor,
|
||||
),
|
||||
|
||||
// Title styles (sous-titres)
|
||||
titleLarge: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 22 * scaleFactor,
|
||||
),
|
||||
titleMedium: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 16 * scaleFactor,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
titleSmall: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 14 * scaleFactor,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
|
||||
// Body styles (texte principal)
|
||||
bodyLarge: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 16 * scaleFactor,
|
||||
),
|
||||
bodyMedium: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 14 * scaleFactor,
|
||||
),
|
||||
bodySmall: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
fontSize: 12 * scaleFactor,
|
||||
),
|
||||
|
||||
// Label styles (petits textes, boutons)
|
||||
labelLarge: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor,
|
||||
fontSize: 14 * scaleFactor,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
labelMedium: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
fontSize: 12 * scaleFactor,
|
||||
),
|
||||
labelSmall: TextStyle(
|
||||
fontFamily: 'Figtree',
|
||||
color: textColor.withValues(alpha: 0.7),
|
||||
fontSize: 11 * scaleFactor,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Version statique pour compatibilité (utilise les tailles par défaut)
|
||||
static TextTheme _getTextTheme(Color textColor) {
|
||||
return TextTheme(
|
||||
displayLarge: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
displayMedium: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
displaySmall: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
headlineLarge: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
headlineMedium: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
headlineSmall: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
titleLarge: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
titleMedium: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
titleSmall: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
bodyLarge: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
bodyMedium: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
bodySmall:
|
||||
TextStyle(fontFamily: 'Figtree', color: textColor.withOpacity(0.7)),
|
||||
labelLarge: TextStyle(fontFamily: 'Figtree', color: textColor),
|
||||
labelMedium:
|
||||
TextStyle(fontFamily: 'Figtree', color: textColor.withOpacity(0.7)),
|
||||
labelSmall:
|
||||
TextStyle(fontFamily: 'Figtree', color: textColor.withOpacity(0.7)),
|
||||
displayLarge: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 57),
|
||||
displayMedium: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 45),
|
||||
displaySmall: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 36),
|
||||
headlineLarge: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 32),
|
||||
headlineMedium: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 28),
|
||||
headlineSmall: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 24),
|
||||
titleLarge: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 22),
|
||||
titleMedium: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 16, fontWeight: FontWeight.w500),
|
||||
titleSmall: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 14, fontWeight: FontWeight.w500),
|
||||
bodyLarge: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 16),
|
||||
bodyMedium: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 14),
|
||||
bodySmall: TextStyle(fontFamily: 'Figtree', color: textColor.withValues(alpha: 0.7), fontSize: 12),
|
||||
labelLarge: TextStyle(fontFamily: 'Figtree', color: textColor, fontSize: 14, fontWeight: FontWeight.w500),
|
||||
labelMedium: TextStyle(fontFamily: 'Figtree', color: textColor.withValues(alpha: 0.7), fontSize: 12),
|
||||
labelSmall: TextStyle(fontFamily: 'Figtree', color: textColor.withValues(alpha: 0.7), fontSize: 11),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user