Surface containers (and its variants) same color as surface

[YarosMallorca]

Package

dynamic_color

Existing issue?

• I checked the existing issues

What happened?

When using Dynamic color, the surface container and its variants variants Theme.of(context).colorScheme.

• surfaceContainer
• surfaceContainerHighest
• surfaceContainerHigh
• surfaceContainerLow
• surfaceContainerLowest

are the same color as Theme.of(context).colorScheme.surface.

Screenshot (web without dynamicColor, Android with dynamicColor:

Code:

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: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            colorScheme:
                lightDynamic ?? ColorScheme.fromSeed(seedColor: Colors.cyan),
          ),
          darkTheme: ThemeData(
            colorScheme:
                darkDynamic ??
                ColorScheme.fromSeed(
                  seedColor: Colors.cyan,
                  brightness: Brightness.dark,
                ),
            brightness: Brightness.dark,
          ),
          themeMode: ThemeMode.dark,
          home: Scaffold(body: Center(child: MyWidget())),
        );
      },
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Card(
          child: Padding(
            padding: EdgeInsets.all(8),
            child: Text('Hello, World!'),
          ),
        ),
        Card(
          color: Theme.of(context).colorScheme.surfaceContainerHigh,
          child: Padding(
            padding: EdgeInsets.all(8),
            child: Text('Hello, World!'),
          ),
        ),
      ],
    );
  }
}

[Error504TimeOut]

I have this issue on Android as well, but it does not appear on Linux or Windows. Upgrading to 1.8.1 does work to some degree, as now I only have this issue when using the light design, but not with the dark design

[MarvinFischer]

Version: 1.8.1

The issue exists for the dark and light theme, in some cases even the primary matches the same color as the surface colour.

Some example values

Light:

I/flutter (31922): Primary: 4282605201
I/flutter (31922): surface: 4294900735
I/flutter (31922): surface Low: 4294900735
I/flutter (31922): surface High: 4294900735

Dark:
I/flutter (31922): Primary: 4279900960
I/flutter (31922): surface: 4279900960
I/flutter (31922): surface Low: 4279900960
I/flutter (31922): surface High: 4279900960

Workaround

For those needing a temporary workaround:

This will generate different surfaces and container colours.

DynamicColorBuilder(
        builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {      
      if (lightDynamic != null && darkDynamic != null) {
        
        lightDynamic = ColorScheme.fromSeed(
            seedColor: Color(lightDynamic.primary.toARGB32()),
            brightness: Brightness.light);
        darkDynamic = ColorScheme.fromSeed(
            seedColor: Color(darkDynamic.primary.toARGB32()),
            brightness: Brightness.dark);

// your logic

  }
}

[emersion]

I believe the root cause is surfaceContainer being left unspecified here, which causes it to default to surface:

flutter-packages/packages/dynamic_color/lib/src/corepalette_to_colorscheme.dart

Line 22 in 35f4bc8

return ColorScheme(