### Running FlexColorScheme Default Example - Bash

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This Bash snippet provides commands to navigate into the `example/` directory of the FlexColorScheme repository and run the default example application in release mode. This allows users to experiment with the theming and configuration options using hot reload.

```bash
cd example/
flutter run --release
```

--------------------------------

### Creating a Flutter Skeleton Project

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This command initializes a new Flutter project with a skeleton application architecture, providing a structured starting point for managing application settings like themes, as demonstrated in this example.

```bash
flutter create -t skeleton my_flutter_app
```

--------------------------------

### Running FlexColorScheme Example 1 Application - Bash

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V3.md

This snippet provides the bash commands to navigate into the example directory of the `flex_color_scheme` repository and run the default example application in release mode. This allows users to test the simplest implementation of the package's theming capabilities.

```Bash
cd example/
flutter run --release
```

--------------------------------

### Initializing ThemeController and ThemeService in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This Dart snippet illustrates the main application entry point, focusing on the setup of the ThemeController and ThemeService. It explains how to choose between different ThemeService implementations (in-memory, SharedPreferences, or Hive) for persisting theme settings. The code initializes the chosen ThemeService (Hive in this case) and loads saved theme preferences before the Flutter application starts, preventing visual theme changes during startup.

```Dart
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Use a ThemeController, which glues our theme settings to Flutter Widgets.
  //
  // The controller uses an abstract ThemeService interface to get and save the
  // settings. There are 3 implementations available to choose from:
  //
  // 0. ThemeService      - Abstract interface base class, contains defaults
  //                        values and shared storage key value strings.
  // 1. ThemeServiceMem   - Only keeps settings in memory.
  // 2. ThemeServicePrefs - Persist settings locally using SharedPreferences.
  // 3. ThemeServiceHive  - Persist settings locally using Hive.
  //
  // Here we use Hive. The examples are all built using same
  // "example" app. If we use SharedPreferences in more than one of the apps
  // they would use the same storage container and share the settings when you
  // build them locally. By using Hive for most examples, we can change
  // the storage container name for each example. In these demos the
  // SharedPreferences service is only used for example 3, but you can swap in
  // the Hive based one for it as well.

  // The ThemeServiceHive constructor requires a box name, the others do not.
  // The box name is just a file name for the file that stores the settings.
  final ThemeService themeService = ThemeServiceHive('flex_scheme_box_5');
  // Initialize the theme service.
  await themeService.init();
  // Create a ThemeController that uses the ThemeService.
  final ThemeController themeController = ThemeController(themeService);
  // Load all the preferred theme settings, while the app is loading, before
  // MaterialApp is created. This prevents a sudden theme change when the app
  // is first displayed.
  await themeController.loadAll();
  // Run the app and pass in the ThemeController. The app listens to the
  // ThemeController for changes.
}
```

--------------------------------

### Initializing and Applying FlexColorScheme Themes in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet demonstrates the main application setup using `FlexColorScheme` to define light and dark themes. It initializes `MaterialApp` with `FlexThemeData.light` and `FlexThemeData.dark` based on a selected `FlexScheme`, and manages theme mode switching via `setState` in a `StatefulWidget`. The `HomePage` receives the current theme mode and a callback for changes.

```Dart
void main() => runApp(const DemoApp());

class DemoApp extends StatefulWidget {
  const DemoApp({Key? key}) : super(key: key);

  @override
  _DemoAppState createState() => _DemoAppState();
}

class _DemoAppState extends State<DemoApp> {
  // Used to select if we use the dark or light theme, start with system mode.
  ThemeMode themeMode = ThemeMode.system;

  @override
  Widget build(BuildContext context) {
    // Select the predefined FlexScheme color scheme to use. Modify the
    // used FlexScheme enum value below to try other pre-made color schemes.
    const FlexScheme usedScheme = FlexScheme.mandyRed;

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      scrollBehavior: AppScrollBehavior(),
      title: 'Basic Theme Usage',
      // Use a predefined FlexThemeData.light() theme for the light theme.
      theme: FlexThemeData.light(
        scheme: usedScheme,
        // Use very subtly themed app bar elevation in light mode.
        appBarElevation: 0.5,
      ),
      // Same definition for the dark theme, but using FlexThemeData.dark().
      darkTheme: FlexThemeData.dark(
        scheme: usedScheme,
        // Use stronger themed app bar elevation in dark mode.
        appBarElevation: 2,
      ),
      // Use the above dark or light theme based on active themeMode.
      themeMode: themeMode,
      home: HomePage(
        // We pass it the current theme mode.
        themeMode: themeMode,
        // On the home page we can toggle theme mode between light and dark.
        onThemeModeChanged: (ThemeMode mode) {
          setState(() {
            themeMode = mode;
          });
        },
        // Pass in the FlexSchemeData we used for the active theme.
        flexSchemeData: FlexColor.schemes[usedScheme]!,
      ),
    );
  }
}
```

--------------------------------

### Creating ThemeData.from with ColorScheme.fromSwatch in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This example utilizes ThemeData.from to create a theme, explicitly sourcing its colors from a ColorScheme generated by ColorScheme.fromSwatch. This approach ensures the theme's color properties are directly populated from the derived color scheme.

```Dart
theme: ThemeData.from(
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: flexSwatch,
    brightness: Brightness.light,
  ),
),
darkTheme: ThemeData.from(
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: flexSwatch,
    brightness: Brightness.dark,
  ),
),
```

--------------------------------

### Creating ThemeData with ColorScheme.fromSeed in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This example shows how to initialize `ThemeData` by directly providing a `ColorScheme` generated from a seed color using `ColorScheme.fromSeed`. This approach offers more explicit control over the color scheme generation process compared to `colorSchemeSeed`, as `brightness` is passed directly to `fromSeed`.

```Dart
theme: ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xff6750a4),
    brightness: Brightness.light,
  ),
),
darkTheme: ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xff6750a4),
    brightness: Brightness.dark,
  ),
),
```

--------------------------------

### Configuring FlexColorScheme and MaterialApp Properties (Dart)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This Dart code snippet illustrates how to configure various theme properties within a FlexColorScheme setup, including `blendLevel`, `appBarElevation`, `useSubThemes`, `visualDensity`, and `fontFamily`. It also shows how to dynamically set the `themeMode` and pass a `themeController` to the `home` widget of a `MaterialApp` for managing theme changes.

```Dart
            // noticing, that in light mode, the alpha value used for the blends
            // is the blend level value, but in dark mode it is 2x this value.
            // Visually they match fairly well, but it depends on how saturated
            // your dark mode primary color is.
            blendLevel: 7,
            appBarElevation: 0.5,
            useSubThemes: themeController.useSubThemes,
            visualDensity: AppData.visualDensity,
            fontFamily: AppData.font,
          ),
          // Use the dark or light theme based on controller setting.
          themeMode: themeController.themeMode,
          // Here we only pass the theme controller to the HomePage.
          home: HomePage(controller: themeController),
        );
      },
    );
  }
}
```

--------------------------------

### Creating ThemeData.from with Direct ColorScheme in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This example uses ThemeData.from to create a theme, taking a pre-defined ColorScheme object (flexSchemeLight and flexSchemeDark) as its primary color source. This ensures the theme's color properties are precisely aligned with the provided color scheme.

```Dart
theme: ThemeData.from(colorScheme: flexSchemeLight),
darkTheme: ThemeData.from(colorScheme: flexSchemeDark),
```

--------------------------------

### Configuring ThemeData with Explicit Brightness in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This example shows how to explicitly set the brightness property within the ThemeData constructor. While functionally similar to ThemeData.light() and ThemeData.dark(), this approach allows for direct control over the brightness setting.

```Dart
theme: ThemeData(
  brightness: Brightness.light,
),
darkTheme: ThemeData(
  brightness: Brightness.dark,
),
```

--------------------------------

### Initializing Basic ThemeData with Defaults in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This snippet demonstrates the most straightforward way to create default light and dark themes using ThemeData.light() and ThemeData.dark(). These factory constructors provide a complete set of Material Design theme properties.

```Dart
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
```

--------------------------------

### Configuring FlexThemeData with existing ColorScheme in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This example demonstrates how to use `FlexThemeData.light` and `FlexThemeData.dark` to create themes by directly passing pre-defined `colorScheme` objects (`flexSchemeLight`, `flexSchemeDark`). This is suitable when you have custom color schemes ready and want to leverage `FlexColorScheme`'s advanced theming capabilities.

```Dart
theme: FlexThemeData.light(colorScheme: flexSchemeLight),
darkTheme: FlexThemeData.dark(colorScheme: flexSchemeDark),
```

--------------------------------

### Applying Custom Primary Swatch to ThemeData in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This example demonstrates using a custom MaterialColor swatch, flexSwatch (defined earlier), with ThemeData. This provides a way to integrate custom brand colors into the theme's primary color system.

```Dart
theme: ThemeData(
  brightness: Brightness.light,
  primarySwatch: flexSwatch,
),
darkTheme: ThemeData(
  brightness: Brightness.dark,
  primarySwatch: flexSwatch,
),
```

--------------------------------

### Creating ThemeData from ColorScheme.fromSwatch in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This snippet shows how to construct ThemeData by providing a ColorScheme generated using ColorScheme.fromSwatch. This method automatically derives a complete color scheme from a given primarySwatch and brightness.

```Dart
theme: ThemeData(
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: flexSwatch, // Colors.blue
    brightness: Brightness.light,
  ),
),
darkTheme: ThemeData(
  colorScheme: ColorScheme.fromSwatch(
    primarySwatch: flexSwatch, // Colors.blue
    brightness: Brightness.dark,
  ),
),
```

--------------------------------

### Initializing Theme Service and Running Flutter App

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This main function initializes a ThemeService (memory-based in this case) and a ThemeController to manage theme settings. It loads preferred theme settings asynchronously before the MaterialApp is created, preventing sudden theme changes, and then runs the DemoApp with the ThemeController.

```dart
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // This used theme service.
  final ThemeService themeService = ThemeServiceMem();
  // Initialize the theme service.
  await themeService.init();
  // Create a ThemeController that uses the ThemeService.
  final ThemeController themeController = ThemeController(themeService);
  // Load all the preferred theme settings, while the app is loading, before
  // MaterialApp is created. This prevents a sudden theme change when the app
  // is first displayed.
  await themeController.loadAll();
  // Run the app and pass in the ThemeController. The app listens to the
  // ThemeController for changes.
  runApp(DemoApp(themeController: themeController));
}
```

--------------------------------

### Initializing Theme Service with Hive (Dart)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet demonstrates the initialization of the theme service using `ThemeServiceHive` for persistent storage, specifying a unique box name. It then creates a `ThemeController` that utilizes this service, loads all preferred theme settings to prevent UI flickering, and finally runs the application, passing the controller for theme management.

```Dart
// The ThemeServiceHive constructor requires a box name, the others do not.\n// The box name is just a file name for the file that stores the settings.\nfinal ThemeService themeService = ThemeServiceHive('flex_scheme_box_4');\n// Initialize the theme service.\nawait themeService.init();\n// Create a ThemeController that uses the ThemeService.\nfinal ThemeController themeController = ThemeController(themeService);\n// Load all the preferred theme settings, while the app is loading, before\n// MaterialApp is created. This prevents a sudden theme change when the app\n// is first displayed.\nawait themeController.loadAll();\n// Run the app and pass in the ThemeController. The app listens to the\n// ThemeController for changes.\nrunApp(DemoApp(themeController: themeController));
```

--------------------------------

### Manually Customizing ThemeData Properties in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This snippet provides a detailed example of manually constructing a `ThemeData` object by explicitly setting various color properties based on a `ColorScheme`. This approach offers maximum control over every aspect of the theme, allowing for highly specific visual adjustments beyond what automated theme generation provides.

```Dart
theme: ThemeData(
  colorScheme: flexSchemeLight,
  brightness: flexSchemeLight.brightness,
  primaryColor: flexSchemeLight.primary,
  primaryColorLight: Color.alphaBlend(
      Colors.white.withAlpha(0x66), flexSchemeLight.primary),
  primaryColorDark: Color.alphaBlend(
      Colors.black.withAlpha(0x66), flexSchemeLight.primary),
  secondaryHeaderColor: Color.alphaBlend(
      Colors.white.withAlpha(0xCC), flexSchemeLight.primary),
  toggleableActiveColor: flexSchemeLight.secondary,
  scaffoldBackgroundColor: flexSchemeLight.background,
  canvasColor: flexSchemeLight.background,
  backgroundColor: flexSchemeLight.background,
  cardColor: flexSchemeLight.surface,
  bottomAppBarColor: flexSchemeLight.surface,
  dialogBackgroundColor: flexSchemeLight.surface,
  indicatorColor: flexSchemeLight.onPrimary,
  dividerColor: flexSchemeLight.onSurface.withValues(alpha: 0.12),
  errorColor: flexSchemeLight.error,
  applyElevationOverlayColor: false,
),
darkTheme: ThemeData(
  colorScheme: flexSchemeDark,
  brightness: flexSchemeDark.brightness,
  primaryColor: flexSchemeDark.primary,
  primaryColorLight: Color.alphaBlend(
      Colors.white.withAlpha(0x59), flexSchemeDark.primary),
  primaryColorDark: Color.alphaBlend(
      Colors.black.withAlpha(0x72), flexSchemeDark.primary),
  secondaryHeaderColor: Color.alphaBlend(
      Colors.black.withAlpha(0x99), flexSchemeDark.primary),
  toggleableActiveColor: flexSchemeDark.secondary,
  scaffoldBackgroundColor: flexSchemeDark.background,
  canvasColor: flexSchemeDark.background,
  backgroundColor: flexSchemeDark.background,
  cardColor: flexSchemeDark.surface,
  bottomAppBarColor: flexSchemeDark.surface,
  dialogBackgroundColor: flexSchemeDark.surface,
  indicatorColor: flexSchemeDark.onBackground,
  dividerColor: flexSchemeDark.onSurface.withValues(alpha: 0.12),
  errorColor: flexSchemeDark.error,
  applyElevationOverlayColor: true,
)
```

--------------------------------

### Running the Flutter Application with Theme Controller

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet initializes and runs the Flutter application, injecting an instance of `ThemeController`. The `ThemeController` is responsible for managing and persisting all theme-related settings throughout the application, ensuring that UI updates reflect the current theme configuration.

```Dart
runApp(DemoApp(themeController: themeController));
```

--------------------------------

### Initializing Theme Service with SharedPreferences in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This `main` function initializes the Flutter application, ensuring widgets are bound. It sets up `ThemeServicePrefs` for local theme persistence using `SharedPreferences`, loads preferred theme settings to prevent UI flashes, and then runs the `DemoApp` with the initialized `ThemeController`. It also shows how to swap to a Hive-based persistence.

```Dart
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Here we can use Shared Preferences. The examples are all built using same
  // "example" app. If we use SharedPreferences in more than one of the apps
  // they would use the same storage container and share the settings when you
  // build them locally. By using Hive for most examples, we can change
  // the storage container name for each example. In these demos the
  // SharedPreferences service is only used for this example, but you can swap
  // in the Hive based one here as well if you want to try it.
  // This also demonstrates how swap used persistence implementation.
  final ThemeService themeService = ThemeServicePrefs();
  // To swap to Hive use this instead:
  // final ThemeService themeService = ThemeServiceHive('flex_scheme_box_3');
  // Initialize the theme service.
  await themeService.init();
  // Create a ThemeController that uses the ThemeService.
  final ThemeController themeController = ThemeController(themeService);
  // Load all the preferred theme settings, while the app is loading, before
  // MaterialApp is created. This prevents a sudden theme change when the app
  // is first displayed.
  await themeController.loadAll();
  // Run the app and pass in the ThemeController. The app listens to the
  // ThemeController for changes.
  runApp(DemoApp(themeController: themeController));
}
```

--------------------------------

### Customizing FlexThemeData with Key Colors and Sub-Themes in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This advanced example demonstrates comprehensive `FlexThemeData` configuration, combining `colorScheme`, `FlexKeyColors`, and `FlexSubThemesData`. `FlexSubThemesData` allows for detailed customization of component-specific theme properties like default radius, FAB shape, text theme usage, and interaction effects.

```Dart
theme: FlexThemeData.light(
  colorScheme: flexSchemeLight,
  keyColors: const FlexKeyColors(),
  subThemesData: const FlexSubThemesData(
    defaultRadius: 4,
    fabUseShape: false,
    useTextTheme: false,
  ),
),
darkTheme: FlexThemeData.dark(
  colorScheme: flexSchemeDark,
  keyColors: const FlexKeyColors(),
  subThemesData: const FlexSubThemesData(
    defaultRadius: 4,
    fabUseShape: false,
    useTextTheme: false,
    interactionEffects: false,
  ),
),
```

--------------------------------

### Importing FlexColorScheme in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet demonstrates the required import statement for the `flex_color_scheme` package in your Dart library file. This makes the `FlexColorScheme` and related APIs available for use in your Flutter application.

```dart
import 'package:flex_color_scheme/flex_color_scheme.dart';
```

--------------------------------

### Initializing ThemeData.from with ColorScheme.fromSeed in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This snippet illustrates using `ThemeData.from` to create a theme, where the `colorScheme` is derived from a seed color using `ColorScheme.fromSeed`. `ThemeData.from` is useful for creating a theme based on an existing `ColorScheme` and ensures all theme properties are derived from it.

```Dart
theme: ThemeData.from(
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xff6750a4),
    brightness: Brightness.light,
  ),
),
darkTheme: ThemeData.from(
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xff6750a4),
    brightness: Brightness.dark,
  ),
),
```

--------------------------------

### Adding FlexColorScheme Dependency to pubspec.yaml

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet shows how to add the `flex_color_scheme` package as a dependency in your Flutter project's `pubspec.yaml` file. This is the first step to integrate the package into your application.

```yaml
dependencies:
  flex_color_scheme: ^4.2.0
```

--------------------------------

### Defining FlexSchemeColor from a single primary color (Dart)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet illustrates a more concise way to create `FlexSchemeColor` instances using the `FlexSchemeColor.from` factory. By providing only a primary color, the factory automatically computes the remaining scheme colors (primaryContainer, secondary, secondaryContainer, and appBarColor), simplifying the definition of new color schemes.

```Dart
 // Vivid green colors.\nstatic final FlexSchemeColor _myScheme2Light =\nFlexSchemeColor.from(primary: const Color(0xFF055C34));\nstatic final FlexSchemeColor _myScheme2Dark =\nFlexSchemeColor.from(primary: const Color(0xFF629F80));
```

--------------------------------

### Applying Direct ColorScheme to ThemeData in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This snippet demonstrates passing a pre-defined ColorScheme object (flexSchemeLight and flexSchemeDark) directly to the colorScheme property of ThemeData. This method offers precise control over the entire color palette of the theme.

```Dart
theme: ThemeData(colorScheme: flexSchemeLight),
darkTheme: ThemeData.from(colorScheme: flexSchemeDark),
```

--------------------------------

### Defining Custom Theme Constants in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This snippet defines essential constants for custom theming: a MaterialColor swatch (flexSwatch) derived from a specific color, and two comprehensive ColorScheme objects (flexSchemeLight and flexSchemeDark) for light and dark modes. These constants serve as building blocks for subsequent theme configurations.

```Dart
final MaterialColor flexSwatch =
    FlexColorScheme.createPrimarySwatch(const Color(0xff6750a4));

const ColorScheme flexSchemeLight = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xff6750a4),
  onPrimary: Color(0xffffffff),
  primaryContainer: Color(0xffeaddff),
  onPrimaryContainer: Color(0xff000000),
  secondary: Color(0xff625b71),
  onSecondary: Color(0xffffffff),
  secondaryContainer: Color(0xffe8def8),
  onSecondaryContainer: Color(0xff000000),
  tertiary: Color(0xff7d5260),
  onTertiary: Color(0xffffffff),
  tertiaryContainer: Color(0xffffd8e4),
  onTertiaryContainer: Color(0xff000000),
  error: Color(0xffb00020),
  onError: Color(0xffffffff),
  errorContainer: Color(0xfffcd8df),
  onErrorContainer: Color(0xff000000),
  outline: Color(0xff4d4d4d),
  background: Color(0xffffffff),
  onBackground: Color(0xff000000),
  surface: Color(0xffffffff),
  onSurface: Color(0xff000000),
  surfaceVariant: Color(0xffffffff),
  onSurfaceVariant: Color(0xff000000),
  inverseSurface: Color(0xff121212),
  onInverseSurface: Color(0xffffffff),
  inversePrimary: Color(0xfff0e9ff),
  shadow: Color(0xff000000),
);

const ColorScheme flexSchemeDark = ColorScheme(
  brightness: Brightness.dark,
  primary: Color(0xffd0bcff),
  onPrimary: Color(0xff000000),
  primaryContainer: Color(0xff4f378b),
  onPrimaryContainer: Color(0xffffffff),
  secondary: Color(0xffccc2dc),
  onSecondary: Color(0xff000000),
  secondaryContainer: Color(0xff4a4458),
  onSecondaryContainer: Color(0xffffffff),
  tertiary: Color(0xffefb8c8),
  onTertiary: Color(0xff000000),
  tertiaryContainer: Color(0xff633b48),
  onTertiaryContainer: Color(0xffffffff),
  error: Color(0xffcf6679),
  onError: Color(0xff000000),
  errorContainer: Color(0xffb1384e),
  onErrorContainer: Color(0xffffffff),
  outline: Color(0xffb3b3b3),
  background: Color(0xff121212),
  onBackground: Color(0xffffffff),
  surface: Color(0xff121212),
  onSurface: Color(0xffffffff),
  surfaceVariant: Color(0xff121212),
  onSurfaceVariant: Color(0xffffffff),
  inverseSurface: Color(0xffffffff),
  onInverseSurface: Color(0xff000000),
  inversePrimary: Color(0xff635b70),
  shadow: Color(0xff000000),
);
```

--------------------------------

### Configuring Flutter App Themes with FlexColorScheme (Dart)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This `DemoApp` StatelessWidget demonstrates how to set up a Flutter application's theming using `FlexColorScheme` and a `ThemeController`. It uses an `AnimatedBuilder` to react to theme changes, applying custom light and dark themes with specified colors, sub-theme options, app bar elevations, visual densities, and a custom font. The `themeMode` is controlled by the `themeController`, which is also passed to the `HomePage` for UI interaction.

```dart
class DemoApp extends StatelessWidget {
  const DemoApp({Key? key, required this.themeController}) : super(key: key);
  final ThemeController themeController;

  @override
  Widget build(BuildContext context) {

    return AnimatedBuilder(
      animation: themeController,
      builder: (BuildContext context, Widget? child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          scrollBehavior: AppScrollBehavior(),
          title: 'Custom Theme',
          // Define FlexThemeData.light() theme using above custom colors.
          theme: FlexThemeData.light(
            colors: _myFlexScheme.light,
            // Opt in/out on FlexColorScheme sub-themes with theme controller.
            useSubThemes: themeController.useSubThemes,
            // Use  very low elevation light theme mode. On light colored
            // AppBars this show up as a nice thin underline effect.
            appBarElevation: 0.5,
            // Here we want the large default visual density on all platforms.
            visualDensity: VisualDensity.standard,
            // Use a custom font, Noto Sans in this case.
            fontFamily: GoogleFonts.notoSans().fontFamily,
          ),
          // Same setup for the dark theme, but using FlexThemeData.dark().
          darkTheme: FlexThemeData.dark(
            colors: _myFlexScheme.dark,
            useSubThemes: themeController.useSubThemes,
            appBarElevation: 1,
            visualDensity: VisualDensity.standard,
            fontFamily: GoogleFonts.notoSans().fontFamily,
          ),
          // Use the dark or light theme, based on theme controller setting.
          themeMode: themeController.themeMode,
          home: HomePage(
            flexSchemeData: _myFlexScheme,
            // Pass in the theme controller to the home page.
            controller: themeController,
          ),
        );
      });
  }
}
```

--------------------------------

### Configuring FlexColorScheme Pre-defined Scheme - Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This Dart snippet demonstrates how to configure a pre-defined color scheme in FlexColorScheme by setting the `_scheme` constant to `FlexScheme.blueWhale`. It also shows how to toggle between using custom colors or the selected pre-defined scheme using the `_useScheme` boolean constant, enabling hot reload experimentation.

```dart
// To use a pre-defined color scheme, don't assign any FlexSchemeColor to
// `colors`, instead pick a FlexScheme and assign it to the `scheme` property.
// Try eg the new "Blue Whale" color scheme.
const FlexScheme _scheme = FlexScheme.blueWhale;

// To make it easy to toggle between using the above custom colors, or the
// selected predefined scheme in this example, set _useScheme to true to use the
// selected predefined scheme above, change to false to use the custom colors.
const bool _useScheme = true;
```

--------------------------------

### Defining Custom FlexSchemeColor with all properties (Dart)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This code defines two custom `FlexSchemeColor` instances, `_myScheme1Light` and `_myScheme1Dark`, by explicitly specifying all required color properties: primary, primaryContainer, secondary, secondaryContainer, and an optional `appBarColor`. This method provides full control over each color component for both light and dark theme variations.

```Dart
// Create a custom flex scheme color for a light theme.\nstatic const FlexSchemeColor _myScheme1Light = FlexSchemeColor(\n  primary: Color(0xFF00296B),\n  primaryContainer: Color(0xFF2F5C91),\n  secondary: Color(0xFFFF7B00),\n  secondaryContainer: Color(0xFFFDB100),\n  // The built in schemes use their secondary container color as their\n  // custom app bar color, but it can be any color. We use a custom color\n  // here. We will see this in example 5 when using the theme and selecting\n  // the custom app bar style.\n  appBarColor: Color(0xFFf95738),\n);\n// Create a corresponding custom flex scheme color for a dark theme.\nstatic const FlexSchemeColor _myScheme1Dark = FlexSchemeColor(\n  primary: Color(0xFF6B8BC3),\n  primaryContainer: Color(0xFF4874AA),\n  secondary: Color(0xffff7155),\n  secondaryContainer: Color(0xFFF1CB9D),\n  appBarColor: Color(0xFF892807),\n);
```

--------------------------------

### Applying FlexColorScheme Themes in Flutter (Original Method)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet demonstrates how to apply light and dark themes using the `FlexColorScheme` class and its `toTheme` getter within a Flutter `MaterialApp`. It configures themes for the 'Mandy red' scheme and sets `themeMode` to `ThemeMode.system` for automatic light/dark switching based on system settings.

```Dart
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // The Mandy red, light theme.
      theme: FlexColorScheme.light(scheme: FlexScheme.mandyRed).toTheme,
      // The Mandy red, dark theme.
      darkTheme: FlexColorScheme.dark(scheme: FlexScheme.mandyRed).toTheme,
      // Use dark or light theme based on system setting.
      themeMode: ThemeMode.system,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

```

--------------------------------

### Applying FlexKeyColors with FlexThemeData in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This snippet shows how to enhance `FlexThemeData` by including `FlexKeyColors` in addition to a `colorScheme`. `FlexKeyColors` allows for more granular control over specific key colors within the theme, influencing the overall visual design and Material 3 dynamic color generation.

```Dart
theme: FlexThemeData.light(
  colorScheme: flexSchemeLight,
  keyColors: const FlexKeyColors(),
),
darkTheme: FlexThemeData.dark(
  colorScheme: flexSchemeDark,
  keyColors: const FlexKeyColors(),
),
```

--------------------------------

### Applying Standard Primary Swatch to ThemeData in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/roads_to_themedata.md

This snippet illustrates how to apply a standard MaterialColor swatch, such as Colors.blue, to ThemeData using the primarySwatch property. This property influences the primary color and its shades throughout the theme.

```Dart
theme: ThemeData(
  brightness: Brightness.light,
  primarySwatch: Colors.blue,
),
darkTheme: ThemeData(
  brightness: Brightness.dark,
  primarySwatch: Colors.blue,
),
```

--------------------------------

### Configuring MaterialApp with FlexColorScheme Themes

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet illustrates how to apply a predefined `FlexScheme` (mandyRed) to a Flutter `MaterialApp`'s light and dark themes using `FlexThemeData.light` and `FlexThemeData.dark`. It also sets `themeMode` to `ThemeMode.system` for automatic theme switching based on device settings.

```dart
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // The Mandy red, light theme.
      theme: FlexThemeData.light(scheme: FlexScheme.mandyRed),
      // The Mandy red, dark theme.
      darkTheme: FlexThemeData.dark(scheme: FlexScheme.mandyRed),
      // Use dark or light theme based on system setting.
      themeMode: ThemeMode.system,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

```

--------------------------------

### Defining a Light FlexSchemeColor for Red & Blue Theme (Dart)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet defines a `FlexSchemeColor` object named `myScheme3Light` for a light theme. It specifies primary and secondary colors using hexadecimal values, creating a classic blue and red color scheme. This object serves as a base for a custom theme.

```Dart
// Blue and red colors, for a classic blue and red theme.
 final FlexSchemeColor myScheme3Light = FlexSchemeColor.from(
  primary: const Color(0xFF04368E),
  secondary: const Color(0xFFA00505),
 );
```

--------------------------------

### Using Predefined FlexColorScheme for Light/Dark Themes - Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V3.md

This snippet demonstrates how to initialize a Flutter application using FlexColorScheme to define both light and dark themes from a single predefined scheme (FlexScheme.mandyRed). It sets up a StatefulWidget to manage the current ThemeMode and allows switching between light and dark modes via a callback from the HomePage. The example also applies a comfortable visual density suitable for desktop and web platforms.

```Dart
void main() => runApp(const DemoApp());

class DemoApp extends StatefulWidget {
  const DemoApp({Key key}) : super(key: key);
  @override
  _DemoAppState createState() => _DemoAppState();
}

class _DemoAppState extends State<DemoApp> {
  // Used to select if we use the dark or light theme.
  ThemeMode themeMode = ThemeMode.light;

  @override
  Widget build(BuildContext context) {
    // Define which predefined FlexScheme to use.
    // Go ahead and try some other ones too.
    const FlexScheme usedFlexScheme = FlexScheme.mandyRed;
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'FlexColorScheme',
      // A light scheme, passed to FlexColorScheme.light factory, then use
      // toTheme to return the resulting theme to the MaterialApp theme.
      theme: FlexColorScheme.light(
        scheme: usedFlexScheme,
        // Use comfortable on desktops instead of compact, devices use default.
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
      ).toTheme,
      // Same thing for the dark theme, but using FlexColorScheme.dark factory.
      darkTheme: FlexColorScheme.dark(
        scheme: usedFlexScheme,
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
      ).toTheme,
      // Use the above dark or light theme, based on active themeMode
      // value light/dark/system.
      themeMode: themeMode,
      // The HomePage, with its properties. In this example we pass it the
      // current themeMode, change it via its call-back. We also pass the
      // currently used FlexSchemeData to the HomePage so we can use it to 
      // display some info about it, and use the colors on the theme switch.
      home: HomePage(
        themeMode: themeMode,
        onThemeModeChanged: (ThemeMode mode) {
          setState(() { themeMode = mode; });
        },
        // Pass in the used active FlexSchemeData so we can
        // use its properties on the HomePage.
        flexSchemeData: FlexColor.schemes[usedFlexScheme],
      ),
    );
  }
}
```

--------------------------------

### Defining Light and Dark Themes with FlexColorScheme in Dart

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This `DemoApp` widget's `build` method defines the light and dark themes for the `MaterialApp` using `FlexThemeData`. It dynamically selects between built-in and custom color schemes based on the `themeController`, applies specific `FlexSurfaceMode` and `blendLevel` for surface color branding, and configures `appBarElevation`, `useSubThemes`, `visualDensity`, and `fontFamily`.

```Dart
class DemoApp extends StatelessWidget {
  const DemoApp({Key? key, required this.themeController}) : super(key: key);
  final ThemeController themeController;

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: themeController,
      builder: (BuildContext context, Widget? child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          scrollBehavior: AppScrollBehavior(),
          title: 'Four Themes',
          theme: FlexThemeData.light(
            colors: themeController.usedScheme == FlexScheme.custom
                    ? _myFlexScheme.light
                    : FlexColor.schemes[themeController.usedScheme]!.light,
            // We use a surface color mode where all Material surfaces use
            // the same primary color branding, but scaffold background
            // uses much less.
            surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold,
            // We set the blend level strength to 20.
            blendLevel: 20,
            appBarElevation: 0.5,
            useSubThemes: themeController.useSubThemes,
            visualDensity: FlexColorScheme.comfortablePlatformDensity,
            fontFamily: GoogleFonts.notoSans().fontFamily,
          ),
          // We do the exact same definition for the dark theme.
          darkTheme: FlexThemeData.dark(
            colors: themeController.usedScheme == FlexScheme.custom
                    ? _myFlexScheme.dark
                    : FlexColor.schemes[themeController.usedScheme]!.dark,
            // We don't have to use the same surface mode in dark mode, for an
            // interesting effect here we use a mode where scaffold background
            // color gets a much higher blend value than surface and background.
            surfaceMode: FlexSurfaceMode.highScaffoldLowSurfaces,
            // You don't have to use same blend level or mode in light
            // and dark mode, here we use a lower value in dark mode, that
            // goes better together with the highScaffoldLowSurfaces mode.
            blendLevel: 15,
            appBarElevation: 1,

```

--------------------------------

### Configuring MaterialApp with FlexColorScheme in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This Dart snippet illustrates the configuration of a `MaterialApp` to use `FlexColorScheme` for dynamic theme management. It sets properties like `useSubThemes`, `visualDensity`, and `fontFamily`, and crucially, determines the `flexSchemeData` for the `HomePage` based on the `themeController.usedScheme`, allowing selection between a custom scheme (`_myFlexScheme`) and predefined `FlexColor.schemes`.

```Dart
useSubThemes: themeController.useSubThemes,
            visualDensity: FlexColorScheme.comfortablePlatformDensity,
            fontFamily: GoogleFonts.notoSans().fontFamily,
          ),
          themeMode: themeController.themeMode,
          // This simple example app has only one page.
          home: HomePage(
            // Pass in the FlexSchemeData we use for the active theme.
            flexSchemeData: themeController.usedScheme == FlexScheme.custom
                    ? _myFlexScheme
                    : FlexColor.schemes[themeController.usedScheme]!,
            // Pass in the theme controller to the home page.
            controller: themeController,
          ),
        );
      },
    );
  }
}
```

--------------------------------

### Defining Custom FlexSchemeData for Theming

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This constant defines a custom FlexSchemeData object named 'Midnight blue', encapsulating a name, description, and distinct FlexSchemeColor definitions for both light and dark themes. This structure conveniently bundles all necessary color information for a custom theme, making it reusable across the application.

```dart
const FlexSchemeData _myFlexScheme = FlexSchemeData(
  name: 'Midnight blue',
  description: 'Midnight blue theme, custom definition of all colors',
  light: FlexSchemeColor(
    primary: Color(0xFF00296B),
    primaryContainer: Color(0xFF2F5C91),
    secondary: Color(0xFFFF7B00),
    secondaryContainer: Color(0xFFFDB100),
  ),
  dark: FlexSchemeColor(
    primary: Color(0xFF6B8BC3),
    primaryContainer: Color(0xFF4874AA),
    secondary: Color(0xffff7155),
    secondaryContainer: Color(0xFFF1CB9D),
  ),
);
```

--------------------------------

### Configuring MaterialApp with FlexThemeData for Light and Dark Themes (Flutter/Dart)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This `DemoApp` widget configures a `MaterialApp` to dynamically apply themes based on a `ThemeController`. It uses `FlexThemeData.light` and `FlexThemeData.dark` to define the light and dark themes, respectively, drawing colors from a list of `AppColor.schemes`. Key properties like `surfaceMode`, `blendLevel`, `appBarElevation`, `useSubThemes`, `visualDensity`, and `fontFamily` are set to customize the theme's appearance, demonstrating advanced theming capabilities.

```Dart
class DemoApp extends StatelessWidget {
  const DemoApp({Key? key, required this.themeController}) : super(key: key);
  final ThemeController themeController;

  @override
  Widget build(BuildContext context) {
    // Whenever the user updates theme settings, the MaterialApp is rebuilt.
    return AnimatedBuilder(
      animation: themeController,
      builder: (BuildContext context, Widget? child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          scrollBehavior: AppScrollBehavior(),
          title: 'All Themes',
          // Define the light theme for the app, using current scheme index.
          theme: FlexThemeData.light(
            // We moved the definition of the list of color schemes to use into
            // a separate static class and list. We use the theme controller
            // to change the index of used color scheme from the list.
            colors: AppColor.schemes[themeController.schemeIndex].light,
            // Here we use another surface blend mode, where the scaffold
            // background gets a strong blend. This type is commonly used
            // on web/desktop when you wrap content on the scaffold in a
            // card that has a lighter background.
            surfaceMode: FlexSurfaceMode.highScaffoldLowSurfaces,
            // Our content is not all wrapped in cards in this demo, so
            // we keep the blend level fairly low for good contrast.
            blendLevel: 5,
            appBarElevation: 0.5,
            useSubThemes: themeController.useSubThemes,
            // In this example we use the values for visual density and font
            // from a single static source, so we can change it easily there.
            visualDensity: AppData.visualDensity,
            fontFamily: AppData.font,
          ),
          // We do the exact same definition for the dark theme, but using
          // FlexThemeData.dark() and the dark FlexSchemeColors in our
          // AppColor.schemes list instead.
          darkTheme: FlexThemeData.dark(
            colors: AppColor.schemes[themeController.schemeIndex].dark,
            surfaceMode: FlexSurfaceMode.highScaffoldLowSurfaces,
            // We go with a slightly stronger blend in dark mode. It is worth
```

--------------------------------

### Applying FlexThemeData Extension Themes in Flutter

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet illustrates a more concise way to apply light and dark themes using the `FlexThemeData` extension on `ThemeData` within a Flutter `MaterialApp`. It configures themes for the 'Mandy red' scheme and sets `themeMode` to `ThemeMode.system` for automatic light/dark switching, offering a direct `ThemeData` object.

```Dart
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // The Mandy red, light theme.
      theme: FlexThemeData.light(scheme: FlexScheme.mandyRed),
      // The Mandy red, dark theme.
      darkTheme: FlexThemeData.dark(scheme: FlexScheme.mandyRed),
      // Use dark or light theme based on system setting.
      themeMode: ThemeMode.system,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );

```

--------------------------------

### Customizing AppBar Shadow Color with FlexColorScheme (Dart)

Source: https://github.com/rydmike/flex_color_scheme/blob/master/README-V4.md

This snippet demonstrates how to customize the `shadowColor` of the `AppBar` within a `FlexColorScheme` themed application. It uses `copyWith` on `lightTheme.appBarTheme` to set a specific shadow color (white in this case) for the `AppBar`, overriding the default behavior. This allows for fine-grained control over the visual appearance of the app bar.

```Dart
class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    final ThemeData lightTheme = FlexThemeData.light(scheme: FlexScheme.mandyRed);
    return MaterialApp(
      title: 'Flutter Demo',
      theme: lightTheme.copyWith(appBarTheme: lightTheme.appBarTheme.copyWith(
           shadowColor: const Color(0xFFFFFFFF));
      themeMode: ThemeMode.light,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
```