Using dynamic_color on Flutter 3.21.0-1.0.pre.2 yields weird/incorrect color palette

[evgfilim1]

Package

dynamic_color

Existing issue?

• I checked the existing issues

What happened?

Background color of ElevatedButton is the same as surface color when using the plugin

Expected vs actual result:

Steps to reproduce:

1. Create a Flutter application project on 3.21.0-1.0.pre.2 (beta channel)
2. Add dynamic_color: ^1.7.0 to dependencies in pubspec.yaml
3. Paste code below into main.dart

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 Column(
      children: [
        Expanded(
          child: MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              colorScheme: ColorScheme.fromSeed(
                seedColor: Colors.blue,
              ),
              useMaterial3: true,
            ),
            darkTheme: ThemeData(
              colorScheme: ColorScheme.fromSeed(
                seedColor: Colors.blue,
                brightness: Brightness.dark,
              ),
              useMaterial3: true,
            ),
            themeMode: ThemeMode.system,
            home: const MyHomePage(text: "ColorScheme.fromSeed"),
            debugShowCheckedModeBanner: false,
          ),
        ),
        Expanded(
          child: DynamicColorBuilder(
            builder: (light, dark) => MaterialApp(
              title: 'Flutter Demo',
              theme: ThemeData(
                colorScheme: light ?? ColorScheme.fromSeed(
                  seedColor: Colors.blue,
                ),
                useMaterial3: true,
              ),
              darkTheme: ThemeData(
                colorScheme: dark ?? ColorScheme.fromSeed(
                  seedColor: Colors.blue,
                  brightness: Brightness.dark,
                ),
                useMaterial3: true,
              ),
              themeMode: ThemeMode.system,
              home: const MyHomePage(text: "DynamicColorBuilder"),
              debugShowCheckedModeBanner: false,
            ),
          ),
        )
      ],
    );
  }
}

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

  final String text;

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

class _MyHomePageState extends State<MyHomePage> {
  String get text => widget.text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(text),
            ElevatedButton(
              onPressed: () {},
              child: const Text("Click me"),
            ),
          ],
        ),
      ),
    );
  }
}

4. Run the app and observe the difference

Relevant log output

[✓] Flutter (Channel beta, 3.21.0-1.0.pre.2, on Arch Linux 6.8.2-arch2-1, locale en_US.UTF-8)
    • Flutter version 3.21.0-1.0.pre.2 on channel beta at /data/distr/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c398442c35 (3 weeks ago), 2024-03-12 22:26:24 -0700
    • Engine revision 0d4f78c952
    • Dart version 3.4.0 (build 3.4.0-190.1.beta)
    • DevTools version 2.33.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /data/distr/android-sdk
    • Platform android-VanillaIceCream, build-tools 34.0.0
    • ANDROID_HOME = /data/distr/android-sdk
    • Java binary at: /home/evgfilim1/.local/share/JetBrains/Toolbox/apps/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /usr/bin/chromium

[✓] Linux toolchain - develop for Linux desktop
    • clang version 17.0.6
    • cmake version 3.29.0
    • ninja version 1.11.1
    • pkg-config version 2.1.1

[✓] Android Studio (version 2023.3)
    • Android Studio at /home/evgfilim1/.local/share/JetBrains/Toolbox/apps/android-studio
    • Flutter plugin version 78.4.2
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.3)
    • IntelliJ at /home/evgfilim1/.local/share/JetBrains/Toolbox/apps/intellij-idea-ultimate
    • Flutter plugin version 78.4.2
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (3 available)
    • Pixel 7 (mobile) • 192.168.0.2:34305 • android-arm64  • Android 14 (API 34)
    • Linux (desktop)  • linux             • linux-x64      • Arch Linux 6.8.2-arch2-1
    • Chrome (web)     • chrome            • web-javascript • Chromium 123.0.6312.86 Arch Linux

[✓] Network resources
    • All expected network resources are available.

• No issues found!

Extra info

Bisecting flutter changes between latest known working version and latest beta, I found the commit that changed the behavior: flutter/flutter@0d8eafb

[veloce]

I think the problem is external and comes from the fixed material_color_utilities (0.8.x) version in the last flutter beta.
They recently upgraded it to the last version so it should be good with the next beta.

[evgfilim1]

@veloce I've tested material_color_utilities 0.11.1 with latest Flutter beta, nothing changed visually.

pubspec.yaml

name: flutter_experiments
description: "A new Flutter project."
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: '>=3.4.0-190.1.beta <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  dynamic_color: ^1.7.0
  cupertino_icons: ^1.0.6

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

dependency_overrides:
  # https://github.com/material-foundation/flutter-packages/issues/574
  material_color_utilities: ^0.11.1

flutter:
  uses-material-design: true

flutter doctor -v

[✓] Flutter (Channel beta, 3.22.0-0.1.pre, on Arch Linux 6.9.0-rc3-1-mainline, locale en_US.UTF-8)
    • Flutter version 3.22.0-0.1.pre on channel beta at /data/distr/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 29babcb32a (13 days ago), 2024-04-03 17:17:04 -0500
    • Engine revision 97550907b7
    • Dart version 3.4.0 (build 3.4.0-282.1.beta)
    • DevTools version 2.34.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /data/distr/android-sdk
    • Platform android-VanillaIceCream, build-tools 34.0.0
    • ANDROID_HOME = /data/distr/android-sdk
    • Java binary at: /home/evgfilim1/.local/share/JetBrains/Toolbox/apps/android-studio/jbr/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1207.12-11679475)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • CHROME_EXECUTABLE = /usr/bin/chromium

[✓] Linux toolchain - develop for Linux desktop
    • clang version 17.0.6
    • cmake version 3.29.2
    • ninja version 1.11.1
    • pkg-config version 2.1.1

[✓] Android Studio (version 2024.1)
    • Android Studio at /home/evgfilim1/.local/share/JetBrains/Toolbox/apps/android-studio
    • Flutter plugin version 78.5.1
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1207.12-11679475)

[✓] IntelliJ IDEA Ultimate Edition (version 2024.1)
    • IntelliJ at /home/evgfilim1/.local/share/JetBrains/Toolbox/apps/intellij-idea-ultimate
    • Flutter plugin version 79.0.3
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (3 available)
    • Pixel 7 (mobile) • 192.168.0.2:45955 • android-arm64  • Android 14 (API 34)
    • Linux (desktop)  • linux             • linux-x64      • Arch Linux 6.9.0-rc3-1-mainline
    • Chrome (web)     • chrome            • web-javascript • Chromium 124.0.6367.49 Arch Linux

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[hasali19]

The issue is that dynamic_color does not set the tone-based surface colours in the colour scheme here, so they are all defaulted to the same surface colour.

I have fixed this in a fork, but currently only for API 34.