1

In my application, I am using Material 3 for theming. I created a theme at Figma with Material Theme Builder and add generated code to my app. But there is something that I can not figure out how to achieve. For example, material theme builder creates a Surface tones palette that contains six different colors.

I want to use the "Surface at + 1" color for example, it harmonizes the surface color with the primary color. But generated code doesn't contain any property like surface1 and harmonizeWith property is not working as expected.

Do you have any suggestions?

bahadir arslan
  • 4,535
  • 7
  • 44
  • 82

1 Answers1

4

Those values are derived within the framework. In case you want to calculate values yourself,

final color = ElevationOverlay.applySurfaceTint(color, surfaceTint, elevation); Here color would be background color, surfaceTint is defined in colorScheme and elevation would be 1-5. You will get the resultant color.

But... The way it should be used is by using Material widget as parent with providing MaterialType to that Material Widget. More info could be found here in source code

https://github.com/flutter/flutter/blob/198a51ace9d4a7d79ec01e64d48f8fc6e37fb9d7/packages/flutter/lib/src/material/material.dart#L504

Rahul
  • 3,529
  • 1
  • 5
  • 19