Flutter Theme Kit 🎨 #

A comprehensive Flutter package for theme management and styling utilities with customizable colors, text styles, and platform-adaptive themes.

Features ✨ #

• 🎨 Color Management: Comprehensive color utilities with light/dark theme support
• 📝 Typography System: Pre-defined text styles for consistent typography
• 🌓 Theme Switching: Easy light/dark theme management
• 📱 Platform Adaptation: iOS and Android-specific styling
• ♿ Accessibility Ready: Proper contrast ratios and accessibility features
• 🔧 Utility Functions: Color manipulation and theme utilities
• 🎯 Pre-defined Schemes: Ready-to-use color schemes and typography styles
• ⚡ Performance Optimized: Efficient theme management and caching

Installation 📦 #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_theme_kit: ^1.0.0

Then run:

flutter pub get

Usage 🚀 #

Basic Theme Setup #

import 'package:flutter_theme_kit/flutter_theme_kit.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appColors = AppColors(
      primary: Colors.blue,
      secondary: Colors.green,
      accent: Colors.orange,
    );
    
    final appTextStyles = AppTextStyles(
      baseFontFamily: 'Roboto',
      displayFontFamily: 'Roboto',
    );
    
    final appThemes = AppThemes(
      colors: appColors,
      textStyles: appTextStyles,
    );
    
    return MaterialApp(
      theme: appThemes.lightTheme.toThemeData(),
      darkTheme: appThemes.darkTheme.toThemeData(),
      themeMode: ThemeMode.system,
      home: MyHomePage(),
    );
  }
}

Using Pre-defined Color Schemes #

import 'package:flutter_theme_kit/flutter_theme_kit.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorSchemes.materialBlue,
        textTheme: Typography.material2021,
      ),
      darkTheme: ThemeData(
        colorScheme: ColorSchemes.materialBlueDark,
        textTheme: Typography.material2021,
      ),
      themeMode: ThemeMode.system,
      home: MyHomePage(),
    );
  }
}

Custom Color Management #

final appColors = AppColors(
  primary: Colors.blue,
  secondary: Colors.green,
  accent: Colors.orange,
  background: Colors.white,
  surface: Colors.grey.shade50,
  onPrimary: Colors.white,
  onSecondary: Colors.white,
  onAccent: Colors.white,
  onBackground: Colors.black,
  onSurface: Colors.black,
  error: Colors.red,
  onError: Colors.white,
  warning: Colors.orange,
  onWarning: Colors.black,
  success: Colors.green,
  onSuccess: Colors.white,
  info: Colors.blue,
  onInfo: Colors.white,
  outline: Colors.grey.shade300,
  outlineVariant: Colors.grey.shade200,
  shadow: Colors.black.withOpacity(0.1),
  scrim: Colors.black.withOpacity(0.4),
  surfaceVariant: Colors.grey.shade100,
  onSurfaceVariant: Colors.grey.shade600,
  inverseSurface: Colors.black,
  onInverseSurface: Colors.white,
  inversePrimary: Colors.blue.shade700,
  tertiary: Colors.purple,
  onTertiary: Colors.white,
  tertiaryContainer: Colors.purple.shade50,
  onTertiaryContainer: Colors.purple.shade900,
  primaryContainer: Colors.blue.shade50,
  onPrimaryContainer: Colors.blue.shade900,
  secondaryContainer: Colors.green.shade50,
  onSecondaryContainer: Colors.green.shade900,
  errorContainer: Colors.red.shade50,
  onErrorContainer: Colors.red.shade900,
  surfaceContainerHighest: Colors.grey.shade300,
  surfaceContainerHigh: Colors.grey.shade200,
  surfaceContainer: Colors.grey.shade100,
  surfaceContainerLow: Colors.grey.shade50,
  surfaceContainerLowest: Colors.white,
  surfaceDim: Colors.grey.shade100,
  surfaceBright: Colors.white,
  customColors: {
    'brand': Colors.purple,
    'accent': Colors.orange,
  },
);

Custom Text Styles #

final appTextStyles = AppTextStyles(
  baseFontFamily: 'Roboto',
  displayFontFamily: 'Roboto',
  textScaleFactor: 1.0,
  fontSizeMultiplier: 1.0,
  customStyles: {
    'heading': TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.bold,
      color: Colors.black,
    ),
    'subheading': TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.w600,
      color: Colors.grey.shade700,
    ),
    'body': TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.normal,
      color: Colors.black87,
    ),
    'caption': TextStyle(
      fontSize: 12,
      fontWeight: FontWeight.normal,
      color: Colors.grey.shade600,
    ),
  },
);

Theme Utilities #

// Get contrast ratio between two colors
final ratio = ThemeUtils.getContrastRatio(Colors.black, Colors.white);

// Check if color is light or dark
final isLight = ThemeUtils.isLightColor(Colors.white);

// Convert hex string to color
final color = ThemeUtils.hexToColor('#FF0000');

// Create a color with opacity
final colorWithOpacity = ThemeUtils.withOpacity(Colors.blue, 0.5);

// Blend two colors
final blendedColor = ThemeUtils.blendColors(Colors.red, Colors.blue, 0.5);

// Lighten a color
final lighterColor = ThemeUtils.lighten(Colors.blue, 0.2);

// Darken a color
final darkerColor = ThemeUtils.darken(Colors.blue, 0.2);

// Adjust color saturation
final saturatedColor = ThemeUtils.adjustSaturation(Colors.blue, 0.2);

// Adjust color lightness
final adjustedColor = ThemeUtils.adjustLightness(Colors.blue, 0.2);

// Adjust color hue
final hueAdjustedColor = ThemeUtils.adjustHue(Colors.blue, 30);

// Get complementary color
final complementaryColor = ThemeUtils.getComplementaryColor(Colors.blue);

// Get analogous colors
final analogousColors = ThemeUtils.getAnalogousColors(Colors.blue, count: 3);

// Get triadic colors
final triadicColors = ThemeUtils.getTriadicColors(Colors.blue);

// Get tetradic colors
final tetradicColors = ThemeUtils.getTetradicColors(Colors.blue);

// Create color scheme from base color
final colorScheme = ThemeUtils.createColorScheme(Colors.blue, isDark: false);

// Get appropriate text color for background
final textColor = ThemeUtils.getTextColorForBackground(Colors.blue);

// Get appropriate icon color for background
final iconColor = ThemeUtils.getIconColorForBackground(Colors.blue);

// Check if colors have sufficient contrast
final hasContrast = ThemeUtils.hasSufficientContrast(Colors.black, Colors.white);

// Get accessibility level
final level = ThemeUtils.getAccessibilityLevel(Colors.black, Colors.white);

// Create theme from color scheme
final theme = ThemeUtils.createThemeFromColorScheme(colorScheme);

// Create cupertino theme from color scheme
final cupertinoTheme = ThemeUtils.createCupertinoThemeFromColorScheme(colorScheme);

// Get current platform
final platform = ThemeUtils.getCurrentPlatform();

// Check if platform is iOS
final isIOS = ThemeUtils.isIOS();

// Check if platform is Android
final isAndroid = ThemeUtils.isAndroid();

// Get platform-appropriate theme
final platformTheme = ThemeUtils.getPlatformTheme(
  colorScheme: colorScheme,
  textTheme: textTheme,
);

// Create responsive text style
final responsiveTextStyle = ThemeUtils.createResponsiveTextStyle(
  context: context,
  baseStyle: TextStyle(fontSize: 16),
  scaleFactor: 1.2,
);

// Create responsive padding
final responsivePadding = ThemeUtils.createResponsivePadding(
  context: context,
  basePadding: EdgeInsets.all(16),
  scaleFactor: 1.2,
);

// Create responsive border radius
final responsiveBorderRadius = ThemeUtils.createResponsiveBorderRadius(
  context: context,
  baseRadius: BorderRadius.circular(8),
  scaleFactor: 1.2,
);

Cupertino Themes #

final cupertinoThemes = CupertinoThemes(
  colors: appColors,
  textStyles: appTextStyles,
  brightness: Brightness.light,
);

final cupertinoTheme = cupertinoThemes.toCupertinoThemeData();

// Create specific Cupertino component themes
final buttonTheme = cupertinoThemes.createButtonTheme();
final switchTheme = cupertinoThemes.createSwitchTheme();
final sliderTheme = cupertinoThemes.createSliderTheme();
final pickerTheme = cupertinoThemes.createPickerTheme();
final navigationBarTheme = cupertinoThemes.createNavigationBarTheme();
final tabBarTheme = cupertinoThemes.createTabBarTheme();
final searchBarTheme = cupertinoThemes.createSearchBarTheme();
final alertDialogTheme = cupertinoThemes.createAlertDialogTheme();
final actionSheetTheme = cupertinoThemes.createActionSheetTheme();
final pageScaffoldTheme = cupertinoThemes.createPageScaffoldTheme();
final listTileTheme = cupertinoThemes.createListTileTheme();

Customization 🎨 #

Color Schemes #

// Use pre-defined color schemes
final colorScheme = ColorSchemes.materialBlue;
final darkColorScheme = ColorSchemes.materialBlueDark;

// Get all available schemes
final allSchemes = ColorSchemes.allSchemes;
final lightSchemes = ColorSchemes.lightSchemes;
final darkSchemes = ColorSchemes.darkSchemes;

Typography Styles #

// Use pre-defined typography styles
final textTheme = Typography.material2021;
final iosTextTheme = Typography.ios;
final androidTextTheme = Typography.android;
final largeTextTheme = Typography.large;
final compactTextTheme = Typography.compact;

// Get all available styles
final allStyles = Typography.allStyles;
final platformStyles = Typography.platformStyles;
final accessibilityStyles = Typography.accessibilityStyles;

Theme Data #

final appThemes = AppThemes(
  colors: appColors,
  textStyles: appTextStyles,
  brightness: Brightness.light,
  platform: TargetPlatform.android,
  customThemes: {
    'custom': ThemeData(
      colorScheme: ColorSchemes.materialBlue,
      textTheme: Typography.material2021,
    ),
  },
);

// Convert to ThemeData
final themeData = appThemes.toThemeData();

// Get light/dark themes
final lightTheme = appThemes.lightTheme;
final darkTheme = appThemes.darkTheme;

// Get custom theme
final customTheme = appThemes.getCustomTheme('custom');

Widgets 📱 #

AppColors #

Comprehensive color utility class with light/dark theme support and custom color management.

AppTextStyles #

Text style utility class with consistent typography and custom text scaling.

AppThemes #

Main theme utility class that combines colors and text styles into complete themes.

CupertinoThemes #

iOS-specific theme utility class with Cupertino component themes.

ThemeUtils #

Utility functions for theme management, color manipulation, and platform adaptation.

ColorSchemes #

Pre-defined color schemes for common design patterns.

Typography #

Pre-defined typography styles for consistent text styling.

Dependencies 📋 #

• flutter: SDK
• flutter_platform_widgets: Platform-adaptive widgets

Contributing 🤝 #

Contributions are welcome! Please feel free to submit a Pull Request.

License 📄 #

This project is licensed under the MIT License - see the LICENSE file for details.

Support 💬 #

If you encounter any problems or have suggestions, please file an issue at the GitHub repository.

Made with ❤️ by seifmoustafa