我从 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);
您可以并排看到差异,注意第一个按钮上的按钮如何与背景融合。
类似的示例,有和没有自适应颜色。请注意导航栏与自适应颜色的混合。
谢谢您的帮助。
降级到 Dart SDK 3.3.4 和 Flutter SDK 3.19.6