SaasFork Design System #

Un système de design complet pour les applications Flutter de SaasFork, offrant des composants cohérents et réutilisables.

Installation #

dependencies:
  saasfork_design_system:
    path: ../packages/saasfork_design_system

Composants disponibles #

Atoms #

Les éléments les plus basiques de notre système de design.

Boutons

SaasFork Design System offre plusieurs types de boutons pour différents contextes:

// Bouton principal
SFMainButton(
  label: 'Valider',
  onPressed: () => print('Bouton principal pressé'),
  size: ComponentSize.md, // xs, sm, md, lg, xl
  color: AppColors.primary, // Optionnel
);

// Bouton secondaire
SFSecondaryButton(
  label: 'Annuler',
  onPressed: () => print('Bouton secondaire pressé'),
  size: ComponentSize.md,
);

// Bouton lien
SFLinkButton(
  label: 'En savoir plus',
  onPressed: () => print('Lien pressé'),
  size: ComponentSize.md,
);

// Bouton circulaire
SFCircularButton(
  icon: Icons.add,
  onPressed: () => print('Bouton circulaire pressé'),
  size: ComponentSize.md,
  iconColor: Colors.white,
  backgroundColor: AppColors.primary, // Optionnel
);

// Bouton secondaire avec icône
SFSecondaryIconButton(
  icon: Icons.login,
  label: 'Se connecter',
  onPressed: () => print('Bouton avec icône pressé'),
);

Champs de texte

// Champ texte simple
SFTextField(
  placeholder: 'Votre email',
  controller: emailController,
  isInError: false,
  size: ComponentSize.md,
);

// Champ mot de passe
SFPasswordField(
  placeholder: 'Votre mot de passe',
  controller: passwordController,
  isInError: false,
  size: ComponentSize.md,
);

Icônes et séparateurs

// Icône stylisée
SFIcon(
  icon: Icons.warning,
  color: AppColors.warning,
  iconType: SFIconType.rounded,
);

// Séparateur avec texte
SFDividerWithText(text: 'ou continuer avec'),

Molecules #

Combinaisons d'atomes pour créer des composants plus complexes.

Champ de formulaire

SFFormfield(
  label: 'Email',
  isRequired: true,
  input: SFTextField(
    placeholder: 'Entrez votre email',
    controller: emailController,
    isInError: hasError,
  ),
  errorMessage: hasError ? 'Email invalide' : null,
  hintMessage: 'Nous ne partagerons jamais votre email',
);

Notifications

// Dans votre widget
SFNotification(
  title: 'Succès',
  message: 'Votre profil a été mis à jour',
  icon: Icons.check_circle_outline_rounded,
  iconColor: AppColors.success,
  onClose: () => print('Notification fermée'),
);

// Ou avec les extensions (plus simple)
context.showSuccess(
  title: 'Enregistré',
  message: 'Vos modifications ont été enregistrées',
);

context.showError(
  title: 'Erreur',
  message: 'Impossible de se connecter au serveur',
);

context.showInfo(
  message: 'Une mise à jour est disponible',
);

context.showWarning(
  title: 'Attention',
  message: 'Votre abonnement expire bientôt',
);

Dialogs

showDialog(
  context: context,
  builder: (context) => SFDialog(
    title: 'Désactiver le compte',
    message: 'Êtes-vous sûr de vouloir désactiver votre compte? Cette action ne peut pas être annulée.',
    icon: Icons.warning_amber_rounded,
    onCancel: () => Navigator.of(context).pop(),
    onDeactivate: () {
      // Action de désactivation
      Navigator.of(context).pop();
    },
    additionalData: {
      'desactivate_button': 'Désactiver',
      'cancel_button': 'Annuler',
    },
  ),
);

Organisms #

Combinaisons de molécules pour créer des composants plus complexes.

Formulaires

// Formulaire de connexion
SFLoginForm(
  additionalData: {
    'label_email': 'Adresse e-mail',
    'placeholder_email': 'Entrez votre email',
    'error_email_invalid': 'Adresse email invalide',
    'label_password': 'Mot de passe',
    'placeholder_password': 'Entrez votre mot de passe',
    'error_password_length': 'Le mot de passe doit contenir au moins 6 caractères',
    'login_button': 'Se connecter',
  },
  onSubmit: (loginData) {
    // Traiter les données de connexion
    print('Email: ${loginData['email']}');
    print('Password: ${loginData['password']}');
  },
  size: ComponentSize.md,
);

// Formulaire d'inscription
SFRegisterForm(
  additionalData: {
    'label_email': 'Email',
    'placeholder_email': 'Entrez votre email',
    'error_email_invalid': 'Adresse email invalide',
    'label_password': 'Mot de passe',
    'placeholder_password': 'Créez un mot de passe',
    'error_password_length': 'Le mot de passe doit contenir au moins 6 caractères',
    'register_button': 'Créer un compte',
  },
  onSubmit: (registerData) {
    // Traiter les données d'inscription
  },
);

// Formulaire de profil
SFProfileForm(
  additionalData: {
    'label_email': 'E-mail',
    'placeholder_email': 'Entrez votre email',
    'error_email_invalid': 'Adresse email invalide',
    'label_username': 'Nom d\'utilisateur',
    'placeholder_username': 'Entrez votre nom d\'utilisateur',
    'error_username_required': 'Le nom d\'utilisateur est requis',
    'save_button': 'Enregistrer',
  },
  profileModel: ProfileModel(
    email: 'user@example.com',
    username: 'johndoe',
  ),
  onSubmit: (profileData) {
    // Traiter les données du profil
  },
);

Views #

Composants de niveau supérieur qui intègrent plusieurs organismes.

Vue d'authentification

SFAuthView(
  additionalData: AuthFormData(
    authNotAccount: AuthLinkData(
      text: "Vous n'avez pas encore de compte ? ",
      link: "S'inscrire",
    ),
    authAlreadyExists: AuthLinkData(
      text: "Vous avez déjà un compte ? ",
      link: "Se connecter",
    ),
    authForgotPassword: AuthLinkData(
      link: "Mot de passe oublié ?",
    ),
    dividerText: "ou continuer avec",
  ),
  onLogin: (loginModel) {
    // Traiter la connexion
    print('Email: ${loginModel.email}');
  },
  onRegister: (registerModel) {
    // Traiter l'inscription
    print('Email: ${registerModel.email}');
  },
  onForgotPassword: (forgotPasswordModel) {
    // Traiter la récupération de mot de passe
    print('Email: ${forgotPasswordModel.email}');
  },
  onGoogleConnect: () {
    // Connexion avec Google
  },
  onGithubConnect: () {
    // Connexion avec GitHub
  },
);

Vue de profil

SFProfileView(
  additionalData: ProfileFormData(
    // Personnalisation des libellés et messages
  ),
  profileModel: ProfileModel(
    email: 'user@example.com',
    username: 'johndoe',
  ),
  onSubmit: (profileModel) {
    // Traiter la mise à jour du profil
    print('Email mis à jour: ${profileModel.email}');
    print('Username mis à jour: ${profileModel.username}');
  },
  children: [
    // Widgets additionnels à afficher sous le formulaire de profil
    SFSecondaryButton(
      label: 'Déconnexion',
      onPressed: () => print('Déconnexion'),
    ),
  ],
);

Services et Utilitaires #

Service de notifications #

// Configuration du service
NotificationService.setInstance(
  NotificationService.internal(OverlayNotificationManager()),
);

// Utilisation directe du service
NotificationService().showNotification(
  context,
  SFNotification(
    title: 'Succès',
    message: 'Votre profil a été mis à jour',
    icon: Icons.check_circle_outline_rounded,
    iconColor: AppColors.success,
  ),
  duration: const Duration(seconds: 4),
  margin: const EdgeInsets.only(top: 16, right: 16),
);

// Fermer toutes les notifications
NotificationService().closeAllNotifications();

// Utilisation des extensions (recommandée)
context.showSuccess(
  title: 'Enregistré',
  message: 'Vos modifications ont été enregistrées',
);

Thèmes #

// Application du thème global
MaterialApp(
  theme: AppTheme.lightTheme,
  darkTheme: AppTheme.darkTheme,
  themeMode: ThemeMode.system, // ou .light ou .dark
  home: MyHomePage(),
);

Layouts #

SaasFork Design System fournit un système de layouts flexible pour structurer vos applications de manière cohérente.

SFDefaultLayout #

Le layout principal utilise un pattern builder pour permettre une grande flexibilité dans la construction de l'interface:

SFDefaultLayout(
  // Définit la structure du layout via un builder
  builder: SFLayoutBuilder(
    // Constructeur d'en-tête (optionnel)
    headerBuilder: (context, ref) => AppBar(
      title: Text('Mon application'),
      actions: [
        IconButton(
          icon: Icon(Icons.notifications),
          onPressed: () => print('Notifications'),
        ),
      ],
    ),
    
    // Constructeur de drawer latéral (optionnel)
    drawerBuilder: (context, ref) => ListView(
      children: [
        DrawerHeader(child: Text('Menu')),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Accueil'),
          onTap: () => print('Accueil'),
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Paramètres'),
          onTap: () => print('Paramètres'),
        ),
      ],
    ),
    
    // Constructeur de contenu (obligatoire)
    contentBuilder: (context, ref) => SingleChildScrollView(
      child: Column(
        children: [
          Text('Contenu principal'),
          // Autres widgets...
        ],
      ),
    ),
    
    // Constructeur de pied de page (optionnel)
    footerBuilder: (context, ref) => Container(
      height: 60,
      color: Theme.of(context).colorScheme.surface,
      child: Center(
        child: Text('© 2023 - SaasFork'),
      ),
    ),
  ),
  
  // Padding du contenu principal (optionnel)
  contentPadding: EdgeInsets.all(16.0),
);

Exemple d'utilisation avec une barre de navigation

// Définition d'une navbar pour le header
Widget _buildNavBar(BuildContext context, WidgetRef ref) {
  return SFNavBar(
    leading: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.bolt, color: AppColors.primary),
        SizedBox(width: 8),
        Text('SaasFork', style: AppTypography.titleMedium),
      ],
    ),
    links: [
      SFNavLink(
        label: 'Tableau de bord',
        onPress: () => print('Dashboard'),
      ),
      SFNavLink(
        label: 'Utilisateurs',
        onPress: () => print('Users'),
      ),
    ],
    actions: [
      SFCircularButton(
        icon: Icons.notifications,
        onPressed: () => print('Notifications'),
        size: ComponentSize.sm,
      ),
    ],
  );
}

// Utilisation dans le layout
SFDefaultLayout(
  builder: SFLayoutBuilder(
    headerBuilder: _buildNavBar,
    contentBuilder: (context, ref) => Center(
      child: Text('Contenu de l\'application'),
    ),
  ),
);

Fondations #

Couleurs #

// Utilisation des couleurs prédéfinies
Container(
  color: AppColors.primary,
  child: Text('Texte sur fond primaire'),
);

// Variations de couleurs
Text(
  'Message d\'erreur', 
  style: TextStyle(color: AppColors.red.s400),
),

Espacements #

// Utilisation des espacements standardisés
Padding(
  padding: const EdgeInsets.all(AppSpacing.md),
  child: Text('Texte avec padding moyen'),
);

// Dans un Column ou Row avec l'extension spacing
Column(
  spacing: AppSpacing.md, // Ajoute un espace standardisé entre les éléments
  children: [
    Text('Premier élément'),
    Text('Deuxième élément'),
    Text('Troisième élément'),
  ],
);

Typographie #

Text(
  'Titre principal',
  style: AppTypography.headlineLarge,
);

Text(
  'Corps de texte',
  style: AppTypography.bodyMedium,
);

// Typographie adaptative selon la taille du composant
Text(
  'Bouton',
  style: AppTypography.getScaledStyle(
    AppTypography.labelLarge, 
    ComponentSize.md,
  ),
);

Système Responsive #

Notre système responsive permet d'adapter facilement vos layouts à différentes tailles d'écran.

Grille Responsive

// Une grille qui adapte automatiquement le nombre de colonnes selon la taille d'écran
ResponsiveGrid(
  // Surcharger le nombre de colonnes par défaut par type d'écran (optionnel)
  mobileColumns: 1,
  tabletColumns: 2,
  desktopColumns: 3,
  largeDesktopColumns: 4,
  
  // Espacements et marges
  spacing: 16.0,
  margin: EdgeInsets.all(16.0),
  padding: EdgeInsets.all(8.0),
  
  // Contenu de la grille
  children: [
    // Vos widgets ici
    Card(child: Text("Élément 1")),
    Card(child: Text("Élément 2")),
    Card(child: Text("Élément 3")),
  ],
);

Lignes et Colonnes Responsives

// Création d'une ligne responsive avec des colonnes
ResponsiveRow(
  spacing: 16.0,
  wrap: true, // Passe à la ligne si l'espace est insuffisant
  margin: EdgeInsets.symmetric(vertical: 16.0),
  children: [
    // Colonne responsive qui occupe 6/12 sur mobile, 4/12 sur tablet, 3/12 sur desktop
    ResponsiveColumn(
      xs: 6, // Mobile (fraction sur 12)
      sm: 4, // Tablet (fraction sur 12)
      md: 3, // Desktop (fraction sur 12)
      child: Container(color: Colors.red, height: 100),
    ),
    
    // Colonne responsive qui occupe 6/12 sur mobile, 8/12 sur tablet, 9/12 sur desktop
    ResponsiveColumn(
      xs: 6,
      sm: 8,
      md: 9,
      padding: EdgeInsets.all(8.0),
      child: Container(color: Colors.blue, height: 100),
    ),
  ],
);

Conteneur Responsive

// Conteneur responsive qui s'adapte selon la taille d'écran
ResponsiveContainer(
  maxWidth: 1200.0, // Largeur max (optionnel)
  padding: EdgeInsets.all(16.0), // Padding adapté automatiquement sur mobile
  center: true, // Centre le contenu si maxWidth est défini
  child: Text("Contenu centré avec largeur maximale"),
);

Extensions Responsives

// Détecter la taille d'écran actuelle
if (context.isMobile) {
  // Logique spécifique aux mobiles
} else if (context.isTablet) {
  // Logique spécifique aux tablettes
} else if (context.isDesktop) {
  // Logique spécifique aux desktops
}

// Valeur adaptative selon la taille d'écran
final padding = context.responsive(
  mobile: 8.0,
  tablet: 16.0,
  desktop: 24.0,
  largeDesktop: 32.0,
);

// Accéder aux marges et espacements adaptés
final horizontalMargin = context.horizontalMargin;
final gap = context.gap;

// Padding adapté à la taille d'écran
Container(
  padding: context.responsivePadding, // Padding horizontal & vertical
  child: Text("Contenu avec padding adaptatif"),
);

// Nombre de colonnes de la grille actuelle
final columns = context.columns; // 1-12 selon la taille d'écran

Pricing Components #

SFPriceDefault #

SFPriceDefault est un composant permettant d'afficher un prix avec devise et période de facturation, utilisable dans différents contextes comme les pages de tarification ou les récapitulatifs de commande.

Fonctionnalités

• Affichage formaté d'un prix avec sa devise
• Support pour différentes devises avec positionnement personnalisable du symbole
• Affichage optionnel de la période de facturation
• Adaptation automatique selon différentes tailles (xs, sm, md, lg, xl)
• Optimisé pour l'accessibilité et la performance

Exemples d'utilisation

// Utilisation du code de devise au lieu du symbole
SFPriceDefault(
  value: 15000,
  currency: SFCurrency.eur,
  period: SFPricePeriod.year, 
  useCurrencyCode: true, // Affiche "EUR" au lieu de "€"
  size: ComponentSize.lg,
)

List Components #

SFItemList #

SFItemList permet d'afficher facilement une liste d'éléments avec des icônes, idéale pour les fonctionnalités d'un produit, les listes de bénéfices ou les résumés de plan tarifaire.

Fonctionnalités

• Affichage d'une liste verticale d'éléments avec icônes et libellés
• Personnalisation des icônes par élément ou utilisation d'une icône par défaut
• Support pour différentes tailles de composants
• Personnalisation de la couleur des icônes
• Optimisé pour les listes statiques dans un layout

Exemples d'utilisation

// Combinaison avec icônes personnalisées et icône par défaut
SFItemList(
  items: [
    SFItemListData(label: "Sauvegarde automatique", icon: Icons.backup),
    SFItemListData(label: "Intégration Slack"), // Utilisera l'icône par défaut
    SFItemListData(label: "Gestion des accès", icon: Icons.security),
  ],
  defaultIcon: Icons.check_circle,
  iconColor: Theme.of(context).colorScheme.secondary,
)

Contribution #

Pour contribuer au design system, veuillez consulter notre guide de contribution et suivre nos conventions de codage.

License #

SaasFork Design System est la propriété de SaasFork. Tous droits réservés.