Surface Color doesn't differentiate between elevation level.

[Joakim-Johansson]

I directly copied the theme settings from the playground. The problem I'm having is that the surface colors are the same no matter what elevation they have, i.e the cards doesn't have any color at all against the background.

If I'm understanding it right then 'background' has been replaced with 'surface'. In which elevated surfaces such as cards or ElevatedButton which also has surface color should be differentiated in color against the background by the amount of elevation they have. I'm trying to replicate what's under the "Card" session on playground.

I'm using Flutter 3.22 and Flex 7.3.

`import 'package:flex_color_scheme/flex_color_scheme.dart'; import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( darkTheme: FlexThemeData.dark( scheme: FlexScheme.redM3, appBarStyle: FlexAppBarStyle.background, bottomAppBarElevation: 2.0, blendLevel: 0, applyElevationOverlayColor: true, surfaceMode: FlexSurfaceMode.levelSurfacesLowScaffold, subThemesData: const FlexSubThemesData( blendTextTheme: true, useTextTheme: true, useM2StyleDividerInM3: true, thickBorderWidth: 2.0, elevatedButtonSchemeColor: SchemeColor.onPrimaryContainer, elevatedButtonSecondarySchemeColor: SchemeColor.primaryContainer, outlinedButtonOutlineSchemeColor: SchemeColor.primary, toggleButtonsBorderSchemeColor: SchemeColor.primary, segmentedButtonSchemeColor: SchemeColor.primary, segmentedButtonBorderSchemeColor: SchemeColor.primary, unselectedToggleIsColored: true, sliderValueTinted: true, inputDecoratorSchemeColor: SchemeColor.primary, inputDecoratorBackgroundAlpha: 22, inputDecoratorRadius: 10.0, chipRadius: 10.0, popupMenuRadius: 6.0, popupMenuElevation: 6.0, alignedDropdown: true, useInputDecoratorThemeInDialogs: true, drawerWidth: 280.0, drawerIndicatorSchemeColor: SchemeColor.primary, bottomNavigationBarMutedUnselectedLabel: false, bottomNavigationBarMutedUnselectedIcon: false, bottomNavigationBarBackgroundSchemeColor: SchemeColor.onSurface, menuRadius: 6.0, menuElevation: 6.0, menuBarRadius: 0.0, menuBarElevation: 1.0, navigationBarSelectedLabelSchemeColor: SchemeColor.primary, navigationBarMutedUnselectedLabel: false, navigationBarSelectedIconSchemeColor: SchemeColor.onPrimary, navigationBarMutedUnselectedIcon: false, navigationBarIndicatorSchemeColor: SchemeColor.primary, navigationBarIndicatorOpacity: 1.00, navigationBarElevation: 2.0, navigationBarHeight: 70.0, navigationRailSelectedLabelSchemeColor: SchemeColor.primary, navigationRailMutedUnselectedLabel: false, navigationRailSelectedIconSchemeColor: SchemeColor.onPrimary, navigationRailMutedUnselectedIcon: false, navigationRailIndicatorSchemeColor: SchemeColor.primary, navigationRailIndicatorOpacity: 1.00, ), keyColors: const FlexKeyColors( useTertiary: true, keepPrimary: true, ), visualDensity: FlexColorScheme.comfortablePlatformDensity, useMaterial3: true, swapLegacyOnMaterial3: true, // To use the Playground font, add GoogleFonts package and uncomment // fontFamily: GoogleFonts.notoSans().fontFamily, ), themeMode: ThemeMode.dark, home: const HomePage(), ); } }

class HomePage extends StatefulWidget { const HomePage({super.key});

@override State createState() => _HomePageState(); }

class _HomePageState extends State { @override void dispose() { super.dispose(); }

@override Widget build(BuildContext context) { return const Scaffold(body: CardsList()); } }

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

@override Widget build(BuildContext context) { return ListView.builder( itemCount: 10, itemBuilder: (context, index) { return Card( shadowColor: Colors.transparent, elevation: (index + 1).toDouble(), // Elevation from 1 to 10 margin: const EdgeInsets.all(10.0), child: ListTile( title: Text('Card ${index + 1}'), subtitle: Text('Elevation ${(index + 1)}'), ), ); }, ); } } `

[Joakim-Johansson]

Just saw that it's not intended to work for the newest flutter version. Closing.

[rydmike]

I will get an updated version out with proper support for Flutter 3.22, but there were like +200 broken tests, +2000 deprecation warnings in FlexColorScheme and Themes Playground after Flutter 3.22.

There are a lot of fundamental changes in how surface colors are treated. It is a much bigger and more breaking change than the Flutter team is letting on when it comes to intricacies in Theming and Material component defaults.

So sadly the update to 3.22 will take time, plus I am on a 3 week vacation in the tropics. I will try to code on FCS too a bit every day though 🙂💙