Material Foundation Flutter Packages

The dynamic_color package is available on pub.dev. You can find its source code in the ./packages/dynamic_color/ directory of this repository. For practical implementation details, refer to the official example.

pub add dynamic_color

To change the launch screen image for the iOS version of your Flutter app, you can either replace the image files directly in the project directory or use Xcode.

Method 1: Direct File Replacement

Replace the existing image files located in the packages/dynamic_color/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.

Method 2: Using Xcode

1. Open your Flutter project's iOS workspace using the command: open ios/Runner.xcworkspace.
2. In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
3. Drag and drop your desired images into the asset catalog to replace the existing launch images.

When writing widget tests, you can use DynamicColorTestingUtils to simulate specific dynamic color palettes. Use setMockDynamicColors() in your setUp block to ensure a consistent state for every test.

import 'package:dynamic_color/test_utils.dart';
import 'package:dynamic_color/samples.dart';

void main() {
  // Reset for every test
  setUp(() => DynamicColorTestingUtils.setMockDynamicColors());

  testWidgets('Verify dynamic core palette is used ',
      (WidgetTester tester) async {
    DynamicColorTestingUtils.setMockDynamicColors(
      corePalette: SampleCorePalettes.green,
    );

    // ...
  });
}

To use dynamic colors in your Flutter application, add the dynamic_color package to your project using the Flutter CLI.

flutter pub add dynamic_color

Harmonization shifts the hue and chroma of colors to make them feel more cohesive with the user's dynamic color scheme. The package provides two extension methods:

1. Color.harmonizeWith(Color target): Shifts the hue of the calling Color towards the target color. This is useful for making custom brand colors blend with the dynamic theme.
2. ColorScheme.harmonized(): Returns a new ColorScheme where the built-in semantic colors are harmonized with the current scheme.

Color color = Colors.red;
// Shift's [color]'s hue towards the (dynamic) color scheme's primary color.
harmonizedColor = color.harmonizeWith(colorScheme.primary);

// Harmonizes the entire ColorScheme's built-in semantic colors.
harmonizedColorScheme = colorScheme.harmonized();

The DynamicColorBuilder is a stateful widget that retrieves the device's dynamic colors via an underlying platform plugin. It provides two ColorScheme objects through its builder function: one for light mode and one for dark mode. If the platform does not support dynamic colors, these parameters will be null.

import 'package:dynamic_color/dynamic_color.dart';

DynamicColorBuilder(
  builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
    // Use lightDynamic and darkDynamic to build your app's theme
    return ...;
  },
),

The SampleColorSchemes class provides helper methods to generate ColorScheme objects based on the sample core palettes. You must provide a Brightness (either Brightness.light or Brightness.dark) to the method to get the appropriate scheme.

import 'package:dynamic_color/dynamic_color.dart';
import 'package:flutter/material.dart';

// Generate a light green color scheme
ColorScheme lightGreenScheme = SampleColorSchemes.green(Brightness.light);

// Generate a dark orange color scheme
ColorScheme darkOrangeScheme = SampleColorSchemes.orange(Brightness.dark);

The SampleCorePalettes class provides pre-defined CorePalette instances. These are useful for mocking dynamic color behavior during testing or development without needing a device that supports actual dynamic color (like Android 12+).

import 'package:dynamic_color/dynamic_color.dart';

// Accessing sample palettes
CorePalette myMockPalette = SampleCorePalettes.green;