Flutter Material Dynamic Colors missing surfaces and elevation colors

Question

I'm starting with Flutter and Material You dynamic colors. After setting up the example app, I tried using the dynamic color from my device. But instead of correctly rendering background and elevated elements, it makes all my surfaces the same color. SurfaceContainer, SurfaceContainerLow, SurfaceContainerHighest... all have the same white color. Elevated buttons blend with the background. Using a color scheme from a seed works perfectly.

I even tried opening demo projects with a lot of colors, Even with these I can't make dynamic colors work properly. Any ideas?

Here is my code that does not work.

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

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

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: DynamicColorBuilder(
        builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
          ColorScheme lightColorScheme;
          ColorScheme darkColorScheme;

          if (lightDynamic != null && darkDynamic != null) {
            lightColorScheme = lightDynamic;
            darkColorScheme = darkDynamic;
          } else {
            lightColorScheme = ColorScheme.fromSeed(seedColor: Colors.deepOrange);
            darkColorScheme = ColorScheme.fromSeed(
                seedColor: Colors.deepOrange, brightness: Brightness.dark);
          }

          return MaterialApp(
            title: 'Namer App',
            theme: ThemeData(
              useMaterial3: true,
              colorScheme: lightColorScheme,
            ),
            darkTheme: ThemeData(
              useMaterial3: true,
              colorScheme: darkColorScheme,
            ),
            home: MyHomePage(),
          );
        },
      ),
    );
  }
}


class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('\n\n\nA random AWESOME idea:'),
          Text(appState.current.asLowerCase),
          ElevatedButton(
            onPressed: () {
              appState.getNext();
            },
            child: Text('Next'),
          ),
        ],
      ),
    );
  }
}

By changing these lines, I can see what the color theme should look like (here I am just generating a palette from the primary of the dynamic colors):

if (lightDynamic != null && darkDynamic != null) {
            lightColorScheme = ColorScheme.fromSeed(seedColor: lightDynamic.primary);
            darkColorScheme = ColorScheme.fromSeed(seedColor: darkDynamic.primary, brightness: Brightness.dark);

You can see side by side the difference, notice how the button on the first one blends with the background.

with dynamic colors without dynamic colors

similar example, with and without adaptive colors. notice the navigation bar blending with adaptive colors.

Thank you for your help.

Answer 1

Downgrade to Dart SDK 3.3.4 and Flutter SDK 3.19.6