lionsdev/unionflow-mobile-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(design-system): dark mode adaptatif sur widgets partagés

Browse Source 
Pattern AppColors pair (isDark ? AppColors.surfaceDark : AppColors.surface)
appliqué sur :
- UnionStatWidget, UnionBalanceCard, UnionActionButton, UFSectionHeader
- DashboardEventRow, DashboardActivityRow, UnionExportButton
- MiniAvatar (border adaptatif)
- ConfirmationDialog (cancel colors adaptés)
- FileUploadWidget (textSecondary adaptatif)

Les couleurs surface/border/textPrimary/textSecondary hardcodées (light-only)
sont remplacées par les paires *Dark conditionnelles.
Les couleurs sémantiques (error, success, warning, primary) restent inchangées.
This commit is contained in:
dahoud
2026-04-15 20:13:22 +00:00
parent 318195c6fd
commit 0abcdcc478
10 changed files with 153 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
lib/shared/design_system/components/dashboard_activity_row.dart
View File

@@ -1,8 +1,9 @@
import 'package:flutter/material.dart';
import '../tokens/app_colors.dart';
import '../tokens/unionflow_colors.dart';
/// Ligne d'activité récente — style fintech compact identique au super_admin
/// Icône dans carré arrondi 28×28 + titre + description + timestamp
/// Ligne d'activité récente — style fintech compact
/// Adaptatif dark/light via AppColors
class DashboardActivityRow extends StatelessWidget {
final String title;
final String description;
@@ -21,13 +22,20 @@ class DashboardActivityRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final bgColor = isDark ? AppColors.surfaceDark : AppColors.surface;
final borderColor = isDark ? AppColors.borderDark : AppColors.border;
final textPrimary = isDark ? AppColors.textPrimaryDark : AppColors.textPrimary;
final textSecondary = isDark ? AppColors.textSecondaryDark: AppColors.textSecondary;
final textTertiary = isDark ? AppColors.textSecondaryDark: AppColors.textTertiary;
return Container(
margin: const EdgeInsets.only(bottom: 6),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 9),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
color: bgColor,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: UnionFlowColors.border),
border: Border.all(color: borderColor),
),
child: Row(
children: [
@@ -35,7 +43,7 @@ class DashboardActivityRow extends StatelessWidget {
width: 28,
height: 28,
decoration: BoxDecoration(
color: color.withOpacity(0.12),
color: color.withOpacity(isDark ? 0.2 : 0.12),
borderRadius: BorderRadius.circular(6),
),
child: Icon(icon, size: 14, color: color),
@@ -47,20 +55,13 @@ class DashboardActivityRow extends StatelessWidget {
children: [
Text(
title,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: UnionFlowColors.textPrimary,
),
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: textPrimary),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
Text(
description,
style: const TextStyle(
fontSize: 10,
color: UnionFlowColors.textSecondary,
),
style: TextStyle(fontSize: 10, color: textSecondary),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
@@ -68,10 +69,7 @@ class DashboardActivityRow extends StatelessWidget {
),
),
const SizedBox(width: 8),
Text(
timeAgo,
style: const TextStyle(fontSize: 10, color: UnionFlowColors.textTertiary),
),
Text(timeAgo, style: TextStyle(fontSize: 10, color: textTertiary)),
],
),
);
@@ -80,28 +78,20 @@ class DashboardActivityRow extends StatelessWidget {
/// Icône selon le type d'activité
static IconData iconFor(String type) {
switch (type) {
case 'member':
return Icons.person_add_rounded;
case 'event':
return Icons.event_rounded;
case 'contribution':
return Icons.payments_rounded;
default:
return Icons.circle_notifications_rounded;
case 'member': return Icons.person_add_rounded;
case 'event': return Icons.event_rounded;
case 'contribution': return Icons.payments_rounded;
default: return Icons.circle_notifications_rounded;
}
}
/// Couleur selon le type d'activité
static Color colorFor(String type) {
switch (type) {
case 'member':
return UnionFlowColors.unionGreen;
case 'event':
return UnionFlowColors.info;
case 'contribution':
return UnionFlowColors.gold;
default:
return UnionFlowColors.textSecondary;
case 'member': return UnionFlowColors.unionGreen;
case 'event': return UnionFlowColors.info;
case 'contribution': return UnionFlowColors.gold;
default: return AppColors.textSecondary;
}
}
}

27
lib/shared/design_system/components/dashboard_event_row.dart
View File

@@ -1,8 +1,9 @@
import 'package:flutter/material.dart';
import '../tokens/app_colors.dart';
import '../tokens/unionflow_colors.dart';
/// Ligne d'événement à venir — style fintech avec bordure gauche verte
/// Titre + date + countdown optionnel + participants optionnel
/// Adaptatif dark/light via AppColors
class DashboardEventRow extends StatelessWidget {
final String title;
final String date;
@@ -19,11 +20,17 @@ class DashboardEventRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final bgColor = isDark ? AppColors.surfaceDark : AppColors.surface;
final textPrimary = isDark ? AppColors.textPrimaryDark : AppColors.textPrimary;
final textSecondary= isDark ? AppColors.textSecondaryDark: AppColors.textSecondary;
final textTertiary = isDark ? AppColors.textSecondaryDark: AppColors.textTertiary;
return Container(
margin: const EdgeInsets.only(bottom: 6),
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 9),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
color: bgColor,
borderRadius: BorderRadius.circular(8),
border: const Border(
left: BorderSide(color: UnionFlowColors.unionGreen, width: 3),
@@ -37,21 +44,14 @@ class DashboardEventRow extends StatelessWidget {
children: [
Text(
title,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: UnionFlowColors.textPrimary,
),
style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: textPrimary),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
Text(
date,
style: const TextStyle(
fontSize: 10,
color: UnionFlowColors.textSecondary,
),
style: TextStyle(fontSize: 10, color: textSecondary),
),
],
),
@@ -73,10 +73,7 @@ class DashboardEventRow extends StatelessWidget {
const SizedBox(height: 2),
Text(
participants!,
style: const TextStyle(
fontSize: 10,
color: UnionFlowColors.textTertiary,
),
style: TextStyle(fontSize: 10, color: textTertiary),
),
],
],

19
lib/shared/design_system/components/uf_section_header.dart
View File

@@ -1,8 +1,8 @@
import 'package:flutter/material.dart';
import '../tokens/unionflow_colors.dart';
import '../tokens/app_colors.dart';
/// En-tête de section dashboard — titre 13px w700 avec trailing optionnel
/// Style de référence : super_admin_dashboard._buildSectionHeader
/// Adaptatif dark/light via AppColors
class UFSectionHeader extends StatelessWidget {
final String title;
@@ -13,24 +13,21 @@ class UFSectionHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final titleColor = isDark ? AppColors.textPrimaryDark : AppColors.textPrimary;
final trailingColor = isDark ? AppColors.textSecondaryDark : AppColors.textTertiary;
return Row(
children: [
Text(
title,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: UnionFlowColors.textPrimary,
),
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w700, color: titleColor),
),
if (trailing != null && trailing!.isNotEmpty) ...[
const SizedBox(width: 6),
Text(
'· $trailing',
style: const TextStyle(
fontSize: 11,
color: UnionFlowColors.textTertiary,
),
style: TextStyle(fontSize: 11, color: trailingColor),
),
],
],

12
lib/shared/design_system/components/union_action_button.dart
View File

@@ -1,9 +1,9 @@
import 'package:flutter/material.dart';
import '../tokens/app_colors.dart';
import '../tokens/unionflow_colors.dart';
/// Bouton d'action rapide UnionFlow
/// Style fintech : fond blanc, icône + texte colorés, bordure grise légère
/// Copie exacte du style _buildActionCell du super_admin_dashboard
/// Adaptatif dark/light via AppColors
class UnionActionButton extends StatelessWidget {
final IconData icon;
final String label;
@@ -22,7 +22,9 @@ class UnionActionButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
// backgroundColor sert d'accent (icône + texte), iconColor prend la priorité
final isDark = Theme.of(context).brightness == Brightness.dark;
final bgColor = isDark ? AppColors.surfaceDark : AppColors.surface;
final borderColor = isDark ? AppColors.borderDark : AppColors.border;
final accentColor = iconColor ?? backgroundColor ?? UnionFlowColors.unionGreen;
return InkWell(
@@ -31,9 +33,9 @@ class UnionActionButton extends StatelessWidget {
child: Container(
padding: const EdgeInsets.symmetric(vertical: 9, horizontal: 8),
decoration: BoxDecoration(
color: UnionFlowColors.surface,
color: bgColor,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: UnionFlowColors.border),
border: Border.all(color: borderColor),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,

34
lib/shared/design_system/components/union_balance_card.dart
View File

@@ -1,7 +1,9 @@
import 'package:flutter/material.dart';
import '../tokens/app_colors.dart';
import '../tokens/unionflow_colors.dart';
/// Card de balance UnionFlow - Affichage élégant du solde principal
/// Card de balance UnionFlow — Affichage élégant du solde principal
/// Adaptatif dark/light via AppColors
class UnionBalanceCard extends StatelessWidget {
final String label;
final String amount;
@@ -20,14 +22,20 @@ class UnionBalanceCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final bgColor = isDark ? AppColors.surfaceDark : AppColors.surface;
final borderColor = isDark ? AppColors.borderDark : AppColors.border;
final textPrimary = isDark ? AppColors.textPrimaryDark : AppColors.textPrimary;
final textSecondary= isDark ? AppColors.textSecondaryDark: AppColors.textSecondary;
return GestureDetector(
onTap: onTap,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Container(
decoration: BoxDecoration(
color: UnionFlowColors.surface,
border: Border.all(color: UnionFlowColors.border),
color: bgColor,
border: Border.all(color: borderColor),
),
child: Column(
mainAxisSize: MainAxisSize.min,
@@ -43,20 +51,20 @@ class UnionBalanceCard extends StatelessWidget {
children: [
Text(
label.toUpperCase(),
style: const TextStyle(
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w600,
color: UnionFlowColors.textSecondary,
color: textSecondary,
letterSpacing: 0.8,
),
),
const SizedBox(height: 4),
Text(
amount,
style: const TextStyle(
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w800,
color: UnionFlowColors.textPrimary,
color: textPrimary,
height: 1,
letterSpacing: -0.5,
),
@@ -76,8 +84,8 @@ class UnionBalanceCard extends StatelessWidget {
: Icons.arrow_downward_rounded,
size: 11,
color: isTrendPositive == true
? UnionFlowColors.success
: UnionFlowColors.error,
? AppColors.success
: AppColors.error,
),
const SizedBox(width: 2),
Text(
@@ -86,15 +94,15 @@ class UnionBalanceCard extends StatelessWidget {
fontSize: 12,
fontWeight: FontWeight.w700,
color: isTrendPositive == true
? UnionFlowColors.success
: UnionFlowColors.error,
? AppColors.success
: AppColors.error,
),
),
],
),
const Text(
Text(
'ce mois',
style: TextStyle(fontSize: 9, color: UnionFlowColors.textTertiary),
style: TextStyle(fontSize: 9, color: textSecondary),
),
],
),

79
lib/shared/design_system/components/union_export_button.dart
View File

@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import '../tokens/app_colors.dart';
import '../tokens/unionflow_colors.dart';
/// Type d'export disponible
@@ -12,7 +13,7 @@ enum ExportType {
const ExportType(this.label, this.icon);
}
/// Bouton d'export avec options
/// Bouton d'export avec options — adaptatif dark/light via AppColors
class UnionExportButton extends StatelessWidget {
final Function(ExportType) onExport;
final bool isLoading;
@@ -25,6 +26,10 @@ class UnionExportButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final bgPopup = isDark ? AppColors.surfaceDark : AppColors.surface;
final textColor= isDark ? AppColors.textPrimaryDark : AppColors.textPrimary;
return PopupMenuButton<ExportType>(
icon: Container(
padding: const EdgeInsets.all(10),
@@ -42,29 +47,21 @@ class UnionExportButton extends StatelessWidget {
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
)
: const Icon(
Icons.download,
color: Colors.white,
size: 20,
),
: const Icon(Icons.download, color: Colors.white, size: 20),
),
itemBuilder: (context) => ExportType.values.map((type) {
return PopupMenuItem<ExportType>(
value: type,
child: Row(
children: [
Icon(
type.icon,
size: 20,
color: UnionFlowColors.unionGreen,
),
Icon(type.icon, size: 20, color: UnionFlowColors.unionGreen),
const SizedBox(width: 12),
Text(
'Exporter en ${type.label}',
style: const TextStyle(
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: UnionFlowColors.textPrimary,
color: textColor,
),
),
],
@@ -72,16 +69,14 @@ class UnionExportButton extends StatelessWidget {
);
}).toList(),
onSelected: onExport,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
elevation: 8,
color: UnionFlowColors.surface,
color: bgPopup,
);
}
}
/// Dialog pour confirmer l'export
/// Dialog pour confirmer l'export — adaptatif dark/light via AppColors
class ExportConfirmDialog extends StatelessWidget {
final ExportType exportType;
final VoidCallback onConfirm;
@@ -96,11 +91,14 @@ class ExportConfirmDialog extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final bgColor = isDark ? AppColors.surfaceDark : AppColors.surface;
final textPrimary = isDark ? AppColors.textPrimaryDark : AppColors.textPrimary;
final textSecondary = isDark ? AppColors.textSecondaryDark: AppColors.textSecondary;
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
backgroundColor: UnionFlowColors.surface,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
backgroundColor: bgColor,
title: Row(
children: [
Container(
@@ -109,39 +107,27 @@ class ExportConfirmDialog extends StatelessWidget {
color: UnionFlowColors.unionGreen.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Icon(
exportType.icon,
color: UnionFlowColors.unionGreen,
size: 24,
),
child: Icon(exportType.icon, color: UnionFlowColors.unionGreen, size: 24),
),
const SizedBox(width: 12),
Text(
'Exporter en ${exportType.label}',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: UnionFlowColors.textPrimary,
Expanded(
child: Text(
'Exporter en ${exportType.label}',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w700, color: textPrimary),
),
),
],
),
content: Text(
message ?? 'Voulez-vous exporter le rapport au format ${exportType.label}?',
style: const TextStyle(
fontSize: 14,
color: UnionFlowColors.textSecondary,
),
style: TextStyle(fontSize: 14, color: textSecondary),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text(
child: Text(
'Annuler',
style: TextStyle(
color: UnionFlowColors.textSecondary,
fontWeight: FontWeight.w600,
),
style: TextStyle(color: textSecondary, fontWeight: FontWeight.w600),
),
),
ElevatedButton(
@@ -152,15 +138,10 @@ class ExportConfirmDialog extends StatelessWidget {
style: ElevatedButton.styleFrom(
backgroundColor: UnionFlowColors.unionGreen,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
elevation: 0,
),
child: const Text(
'Confirmer',
style: TextStyle(fontWeight: FontWeight.w700),
),
child: const Text('Confirmer', style: TextStyle(fontWeight: FontWeight.w700)),
),
],
);

22
lib/shared/design_system/components/union_stat_widget.dart
View File

@@ -1,8 +1,8 @@
import 'package:flutter/material.dart';
import '../tokens/unionflow_colors.dart';
import '../tokens/app_colors.dart';
/// Widget de statistique compacte — style identique à _buildKpiCell du super admin
/// fond blanc, bordure gauche colorée, icône + valeur + label
/// Fond adaptatif dark/light via AppColors, bordure gauche colorée, icône + valeur + label
/// [compact] réduit le padding vertical pour les grilles très plates
class UnionStatWidget extends StatelessWidget {
final String label;
@@ -28,6 +28,10 @@ class UnionStatWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final bgColor = isDark ? AppColors.surfaceDark : AppColors.surface;
final labelColor = isDark ? AppColors.textSecondaryDark : AppColors.textSecondary;
final EdgeInsets pad = compact
? const EdgeInsets.symmetric(horizontal: 8, vertical: 5)
: const EdgeInsets.all(6);
@@ -35,7 +39,7 @@ class UnionStatWidget extends StatelessWidget {
return Container(
padding: pad,
decoration: BoxDecoration(
color: UnionFlowColors.surface,
color: bgColor,
borderRadius: BorderRadius.circular(10),
border: Border(left: BorderSide(color: color, width: 3)),
),
@@ -51,11 +55,7 @@ class UnionStatWidget extends StatelessWidget {
const Spacer(),
Text(
trend!,
style: TextStyle(
fontSize: 8,
fontWeight: FontWeight.w700,
color: color,
),
style: TextStyle(fontSize: 8, fontWeight: FontWeight.w700, color: color),
),
],
],
@@ -74,11 +74,7 @@ class UnionStatWidget extends StatelessWidget {
SizedBox(height: compact ? 1 : 2),
Text(
label,
style: const TextStyle(
fontSize: 9,
fontWeight: FontWeight.w500,
color: UnionFlowColors.textSecondary,
),
style: TextStyle(fontSize: 9, fontWeight: FontWeight.w500, color: labelColor),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),