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

Libraries

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