Scribd
Upload
10 views

app_theme.dart

The document defines a Flutter theme class, AppTheme, which includes primary, secondary, and accent colors, as well as background, text colors, and various UI element styles. It specifies light and dark themes with detailed configurations for buttons, input fields, dialogs, and typography. The themes utilize Material Design principles and provide a comprehensive styling guide for a Flutter application.

Uploaded by

Auguste Elvis Ouattara
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

app_theme.dart

The document defines a Flutter theme class, AppTheme, which includes primary, secondary, and accent colors, as well as background, text colors, and various UI element styles. It specifies light and dark themes with detailed configurations for buttons, input fields, dialogs, and typography. The themes utilize Material Design principles and provide a comprehensive styling guide for a Flutter application.

Uploaded by

Auguste Elvis Ouattara
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 9

import 'package:flutter/material.

dart';

class AppTheme {
// Couleurs principales
static const Color primaryColor = Color(0xFF3F51B5); // Indigo
static const Color secondaryColor = Color(0xFFFF4081); // Rose
static const Color accentColor = Color(0xFF00BCD4); // Cyan
static const Color successColor = Color(0xFF4CAF50); // Vert
static const Color warningColor = Color(0xFFFFC107); // Ambre
static const Color errorColor = Color(0xFFF44336); // Rouge
static const Color infoColor = Color(0xFF2196F3); // Bleu

// Couleurs de fond
static const Color scaffoldBackgroundLight = Color(0xFFF5F5F5);
static const Color scaffoldBackgroundDark = Color(0xFF121212);
static const Color cardBackgroundLight = Colors.white;
static const Color cardBackgroundDark = Color(0xFF1E1E1E);

// Couleurs de texte
static const Color textPrimaryLight = Color(0xFF212121);
static const Color textSecondaryLight = Color(0xFF757575);
static const Color textPrimaryDark = Color(0xFFEEEEEE);
static const Color textSecondaryDark = Color(0xFFAAAAAA);

// Rayons d'arrondi
static const double borderRadiusSmall = 4.0;
static const double borderRadiusMedium = 8.0;
static const double borderRadiusLarge = 16.0;
static const double borderRadiusXLarge = 24.0;

// Espacements
static const double spacingXSmall = 4.0;
static const double spacingSmall = 8.0;
static const double spacingMedium = 16.0;
static const double spacingLarge = 24.0;
static const double spacingXLarge = 32.0;
static const double spacingXXLarge = 48.0;

// Élévations
static const double elevationSmall = 2.0;
static const double elevationMedium = 4.0;
static const double elevationLarge = 8.0;
static const double elevationXLarge = 16.0;

// Animations
static const Duration animationFast = Duration(milliseconds: 200);
static const Duration animationMedium = Duration(milliseconds: 300);
static const Duration animationSlow = Duration(milliseconds: 500);

// Thème clair
static ThemeData lightTheme = ThemeData(
useMaterial3: true,
brightness: Brightness.light,
primaryColor: primaryColor,
colorScheme: ColorScheme.light(
primary: primaryColor,
secondary: secondaryColor,
surface: cardBackgroundLight,
background: scaffoldBackgroundLight,
error: errorColor,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: textPrimaryLight,
onBackground: textPrimaryLight,
onError: Colors.white,
),
scaffoldBackgroundColor: scaffoldBackgroundLight,
cardTheme: CardTheme(
color: cardBackgroundLight,
elevation: elevationSmall,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
),
appBarTheme: AppBarTheme(
backgroundColor: primaryColor,
foregroundColor: Colors.white,
elevation: elevationSmall,
centerTitle: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(borderRadiusMedium),
),
),
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: cardBackgroundLight,
selectedItemColor: primaryColor,
unselectedItemColor: textSecondaryLight,
type: BottomNavigationBarType.fixed,
elevation: elevationMedium,
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: primaryColor,
foregroundColor: Colors.white,
elevation: elevationSmall,
padding: EdgeInsets.symmetric(
horizontal: spacingLarge,
vertical: spacingMedium,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
minimumSize: const Size(88, 48),
),
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
foregroundColor: primaryColor,
side: const BorderSide(color: primaryColor),
padding: EdgeInsets.symmetric(
horizontal: spacingLarge,
vertical: spacingMedium,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
minimumSize: const Size(88, 48),
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: primaryColor,
padding: EdgeInsets.symmetric(
horizontal: spacingMedium,
vertical: spacingSmall,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
),
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: Colors.white,
contentPadding: EdgeInsets.all(spacingMedium),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
borderSide: BorderSide(color: Colors.grey.shade300),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
borderSide: BorderSide(color: Colors.grey.shade300),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
borderSide: const BorderSide(color: primaryColor, width: 2),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
borderSide: const BorderSide(color: errorColor),
),
floatingLabelStyle: const TextStyle(color: primaryColor),
),
chipTheme: ChipThemeData(
backgroundColor: Colors.grey.shade200,
disabledColor: Colors.grey.shade300,
selectedColor: primaryColor.withOpacity(0.2),
secondarySelectedColor: secondaryColor.withOpacity(0.2),
padding: EdgeInsets.symmetric(
horizontal: spacingSmall,
vertical: spacingXSmall,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusLarge),
),
labelStyle: TextStyle(color: textPrimaryLight),
secondaryLabelStyle: TextStyle(color: Colors.white),
brightness: Brightness.light,
),
dialogTheme: DialogTheme(
backgroundColor: cardBackgroundLight,
elevation: elevationLarge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusLarge),
),
),
snackBarTheme: SnackBarThemeData(
backgroundColor: textPrimaryLight,
contentTextStyle: TextStyle(color: Colors.white),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
behavior: SnackBarBehavior.floating,
),
tabBarTheme: TabBarTheme(
labelColor: primaryColor,
unselectedLabelColor: textSecondaryLight,
indicatorSize: TabBarIndicatorSize.tab,
indicator: BoxDecoration(
border: Border(
bottom: BorderSide(
color: primaryColor,
width: 3.0,
),
),
),
),
dividerTheme: DividerThemeData(
color: Colors.grey.shade300,
thickness: 1,
space: spacingMedium,
),
progressIndicatorTheme: ProgressIndicatorThemeData(
color: primaryColor,
circularTrackColor: Colors.grey.shade200,
linearTrackColor: Colors.grey.shade200,
),
textTheme: TextTheme(
displayLarge: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: textPrimaryLight,
),
displayMedium: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: textPrimaryLight,
),
displaySmall: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: textPrimaryLight,
),
headlineLarge: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: textPrimaryLight,
),
headlineMedium: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: textPrimaryLight,
),
headlineSmall: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: textPrimaryLight,
),
titleLarge: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: textPrimaryLight,
),
titleMedium: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: textPrimaryLight,
),
titleSmall: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: textPrimaryLight,
),
bodyLarge: TextStyle(
fontSize: 16,
color: textPrimaryLight,
),
bodyMedium: TextStyle(
fontSize: 14,
color: textPrimaryLight,
),
bodySmall: TextStyle(
fontSize: 12,
color: textSecondaryLight,
),
labelLarge: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: primaryColor,
),
labelMedium: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: primaryColor,
),
labelSmall: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600,
color: primaryColor,
),
),
);

// Thème sombre
static ThemeData darkTheme = ThemeData(
useMaterial3: true,
brightness: Brightness.dark,
primaryColor: primaryColor,
colorScheme: ColorScheme.dark(
primary: primaryColor,
secondary: secondaryColor,
surface: cardBackgroundDark,
background: scaffoldBackgroundDark,
error: errorColor,
onPrimary: Colors.white,
onSecondary: Colors.white,
onSurface: textPrimaryDark,
onBackground: textPrimaryDark,
onError: Colors.white,
),
scaffoldBackgroundColor: scaffoldBackgroundDark,
cardTheme: CardTheme(
color: cardBackgroundDark,
elevation: elevationSmall,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
),
appBarTheme: AppBarTheme(
backgroundColor: cardBackgroundDark,
foregroundColor: textPrimaryDark,
elevation: elevationSmall,
centerTitle: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
bottom: Radius.circular(borderRadiusMedium),
),
),
),
bottomNavigationBarTheme: BottomNavigationBarThemeData(
backgroundColor: cardBackgroundDark,
selectedItemColor: primaryColor,
unselectedItemColor: textSecondaryDark,
type: BottomNavigationBarType.fixed,
elevation: elevationMedium,
),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: primaryColor,
foregroundColor: Colors.white,
elevation: elevationSmall,
padding: EdgeInsets.symmetric(
horizontal: spacingLarge,
vertical: spacingMedium,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
minimumSize: const Size(88, 48),
),
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
foregroundColor: primaryColor,
side: const BorderSide(color: primaryColor),
padding: EdgeInsets.symmetric(
horizontal: spacingLarge,
vertical: spacingMedium,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
minimumSize: const Size(88, 48),
),
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: primaryColor,
padding: EdgeInsets.symmetric(
horizontal: spacingMedium,
vertical: spacingSmall,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
),
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: cardBackgroundDark,
contentPadding: EdgeInsets.all(spacingMedium),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
borderSide: BorderSide(color: Colors.grey.shade700),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
borderSide: BorderSide(color: Colors.grey.shade700),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
borderSide: const BorderSide(color: primaryColor, width: 2),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
borderSide: const BorderSide(color: errorColor),
),
floatingLabelStyle: const TextStyle(color: primaryColor),
),
chipTheme: ChipThemeData(
backgroundColor: Colors.grey.shade800,
disabledColor: Colors.grey.shade700,
selectedColor: primaryColor.withOpacity(0.3),
secondarySelectedColor: secondaryColor.withOpacity(0.3),
padding: EdgeInsets.symmetric(
horizontal: spacingSmall,
vertical: spacingXSmall,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusLarge),
),
labelStyle: TextStyle(color: textPrimaryDark),
secondaryLabelStyle: TextStyle(color: Colors.white),
brightness: Brightness.dark,
),
dialogTheme: DialogTheme(
backgroundColor: cardBackgroundDark,
elevation: elevationLarge,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusLarge),
),
),
snackBarTheme: SnackBarThemeData(
backgroundColor: cardBackgroundDark,
contentTextStyle: TextStyle(color: textPrimaryDark),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadiusMedium),
),
behavior: SnackBarBehavior.floating,
),
tabBarTheme: TabBarTheme(
labelColor: primaryColor,
unselectedLabelColor: textSecondaryDark,
indicatorSize: TabBarIndicatorSize.tab,
indicator: BoxDecoration(
border: Border(
bottom: BorderSide(
color: primaryColor,
width: 3.0,
),
),
),
),
dividerTheme: DividerThemeData(
color: Colors.grey.shade700,
thickness: 1,
space: spacingMedium,
),
progressIndicatorTheme: ProgressIndicatorThemeData(
color: primaryColor,
circularTrackColor: Colors.grey.shade800,
linearTrackColor: Colors.grey.shade800,
),
textTheme: TextTheme(
displayLarge: TextStyle(
fontSize: 32,
fontWeight: FontWeight.bold,
color: textPrimaryDark,
),
displayMedium: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: textPrimaryDark,
),
displaySmall: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: textPrimaryDark,
),
headlineLarge: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: textPrimaryDark,
),
headlineMedium: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: textPrimaryDark,
),
headlineSmall: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: textPrimaryDark,
),
titleLarge: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: textPrimaryDark,
),
titleMedium: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: textPrimaryDark,
),
titleSmall: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: textPrimaryDark,
),
bodyLarge: <response clipped><NOTE>To save on context only part of this file
has been shown to you. You should retry this tool after you have searched inside
the file with `grep -n` in order to find the line numbers of what you are looking
for.</NOTE>

You might also like