Flutter 材质动态颜色缺少表面和立面颜色

Question

我从 Flutter 和 Material You 动态颜色开始。设置示例应用程序后，我尝试使用设备中的动态颜色。但它没有正确渲染背景和升高的元素，而是使我的所有表面具有相同的颜色。 SurfaceContainer、SurfaceContainerLow、SurfaceContainerHighest...都具有相同的白色。升高的按钮与背景融为一体。使用种子的配色方案效果非常好。

我什至尝试打开具有很多颜色的演示项目，即使使用这些我也无法使动态颜色正常工作。有什么想法吗？

这是我的代码，不起作用。

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'),
          ),
        ],
      ),
    );
  }
}

通过更改这些行，我可以看到颜色主题应该是什么样子（这里我只是从动态颜色的原色生成调色板）：

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

您可以并排看到差异，注意第一个按钮上的按钮如何与背景融合。

具有动态色彩 没有动态颜色

类似的示例，有和没有自适应颜色。请注意导航栏与自适应颜色的混合。

谢谢您的帮助。

Answer 1

降级到 Dart SDK 3.3.4 和 Flutter SDK 3.19.6