Issue with Flutter Material 3 looking like 120% zoom

Question

I have a strange issue with Material 3 theme in flutter. For some reason, when I enable the material3 flag, every button and text enlarges way over how it would normally need to look on the device. I have generated my color scheme using the material 3 theme builder

My theme data is as minimal as possible:

ThemeData(
visualDensity: VisualDensity.compact,
useMaterial3: true,
colorScheme: darkColorScheme,

)

This is how it looks when I toggle the material3 flag to false

And this is how it looks like when I toggle the material 3 theme:

For some reason the material 3 theme take a lot more space on my device and I have the code from the oficial material 3 example that is showcased here

As you can see that code looks a lot better and without such big padding as I get on my device. Is that a configuration somewhere or why am I having this big differences in look and feel?

Answer 1

I think that's the expected behaviour.
Material API Doc says

...A temporary flag used to opt-in to Material 3 features. If true, then widgets that have been migrated to Material 3 will use new colors, typography and other features of Material 3. If false, they will use the Material 2 look and feel....

Edit:
Also from Material Doc
...You can opt in to Material 3 using the useMaterial3 flag. However, your UI might be inconsistent until all of Flutter and your code are migrated....

I am not 100% sure, but above reasons are very likely the cause of your issue. We can fully be sure, once flutter migrates to material 3 as default.