Flutter Material Dynamic Colors недостающие поверхности и цвета возвышений ⇐ Android

[Anonymous]

Я начинаю с динамических цветов 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();

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);

Вы можете увидеть разницу между собой: обратите внимание, как кнопка на первой сливается с фоном.
с динамическими цветами
без динамических цветов
аналогичный пример, с адаптивными цветами и без них. обратите внимание, что панель навигации смешивается с адаптивными цветами.
Спасибо за помощь.

Подробнее здесь: https://stackoverflow.com/questions/787 ... ion-colors