Skip to content

Package dynamic_color does not initialize new ColorScheme roles #582

Open
@amal-stack

Description

@amal-stack

Package

dynamic_color

Existing issue?

What happened?

Steps to reproduce:

  1. Switch to the beta channel and upgrade Flutter using:
flutter channel beta

and then:

flutter upgrade
  1. Create a new Flutter app.
  2. Add the dynamic_color package:
flutter pub add dynamic_color
  1. Use a platform where DynamicColorPlugin.getCorePalette does not return null (like Android).
  2. Use the DynamicColorBuilder widget and view its generated ColorScheme properties, especially the new color roles like primaryFixed surfaceContainer and so on. (done using Text widgets in the code sample below).

Code Sample

The following code uses DynamicColorBuilder and displays some of the generated colors using Text widgets.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (light, dark) => MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: light,
          useMaterial3: true,
        ),
        themeMode: ThemeMode.system,
        home: const MyHomePage(title: 'DynamicColorBuilder Demo'),
        )
      );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});  
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    final light = Theme.of(context).colorScheme;

    return Scaffold(
      backgroundColor: Theme.of(context).colorScheme.surfaceContainerLowest,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
              children: [
                Text('Primary ${light.primary}'),
                Text('Primary Fixed ${light.primaryFixed} ${light.primaryFixed == light.primary}'),
                Text('Primary Fixed Dim  ${light.primaryFixedDim} ${light.primaryFixedDim == light.primary}'),
                Text('Surface  ${light.surface}'),
                Text('Surface Container  ${light.surfaceContainer} ${light.surfaceContainer == light.surface}'),
              ],),
            ), 
    );
  }
}

Expected Results

Extension method CorePaletteToColorScheme.toColorScheme() should assign each of these new surface and fixed color roles.

Actual results

All the new color roles return the fallback colors. For instance, primaryFixed and primaryFixedDim return the fallback primary because this is the behavior of Flutter's ColorScheme as can be seen in its source:

 final Color? _primaryFixed;
  /// A substitute for [primaryContainer] that's the same color for the dark
  /// and light themes.
  Color get primaryFixed => _primaryFixed ?? primary;

  final Color? _primaryFixedDim;
  /// A color used for elements needing more emphasis than [primaryFixed].
  Color get primaryFixedDim => _primaryFixedDim ?? primary;

Reason

This is happening because DynamicColorBuilder converts a CorePalette to a Flutter ColorScheme using the extension method on CorePalette: CorePaletteToColorScheme.toColorScheme(). This method still uses the deprecated Scheme.lightFromCorePalette and Scheme.darkFromCorePalette methods and does not assign colors to the new roles.

I tried to manually write my own builder using the DynamicColorPlugin.getCorePalette method. However, the MCU library does mention an explicit way to convert a CorePalette to the new DynamicScheme type (so I created an issue here.

Relevant log output

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions