-
defaultRadius: 30, theme: lightTheme.copyWith(
inputDecorationTheme: lightTheme.inputDecorationTheme.copyWith(
isDense: true,
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
),
dropdownMenuTheme: lightTheme.dropdownMenuTheme.copyWith(
inputDecorationTheme: lightTheme.inputDecorationTheme.copyWith(
isDense: true,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(4)),
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
),
menuStyle: MenuStyle(
shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(14))),
),
),
), In this case, DropdownMenu will always use 30 radius, and there is no way to customize the rounded corners,The same goes for including contentPadding How do I adjust the height and rounded corners of a dense dropdownMenuTheme? |
Beta Was this translation helpful? Give feedback.
Replies: 15 comments
-
Hi @laterdayi, thank you for your question. FlexColorScheme sets quite a few theming properties for The However, currently if you override only the FCS also sets the Regardless of all this, it should in theory be possible to override with copyWith and component themes, like you try in this case, there are most likely only more props that needs to be overridden for them to come into effect. For If you want to build and style a given component theme completely from scratch yourself, you don’t actually have to start with the inherited one that is in the theme created by theme: lightTheme.copyWith(
inputDecorationTheme: InputDecorationTheme(
isDense: true,
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
),
dropdownMenuTheme: DropdownMenuThemeData(
inputDecorationTheme: InputDecorationTheme(
isDense: true,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(4)),
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
),
menuStyle: MenuStyle(
shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(14))),
),
),
), It might be that you also need to set the I am curious about all of this, so I'm going to take a closer look at all of it tomorrow, or before the end of week at least, to actually test things and see what actually works for something equivalent to your design. I will follow up with some more findings and recommendations when I have done that. Meanwhile if it is urgent perhaps some of the above topics can provide some clues to how to get the desired result. I did not actually run and test them myself yet, so no guarantees before that. Alternatively you can also style them more with FCS API props. An example of that is shown below, but you probably know this already and want something beyond what it offers, but just in case 😃 Theme it with FlexColorScheme instead?You can also theme the and some of the configured props that was set for above design, it does use the final ThemeData lightTheme = FlexThemeData.light(
scheme: FlexScheme.indigoM3,
subThemesData: const FlexSubThemesData(
useM2StyleDividerInM3: true,
defaultRadius: 30.0,
inputDecoratorRadius: 8.0,
menuRadius: 12.0,
menuPadding: EdgeInsetsDirectional.fromSTEB(10, 20, 10, 16),
menuIndicatorRadius: 8.0,
),
keyColors: const FlexKeyColors(),
tones: FlexTones.chroma(Brightness.light),
useMaterial3: true,
); But of course FCS and Themes Playground cannot do everything you can do with the component themes directly, it is not even intended. Currently the intention is only to support "commonly" used designs. In a future major rewrite/revision I will probably design things from the ground up so we can do pretty much everything in a visual theming tool, but for now for more custom designs, I also recommend debugging and taking a closer look at what props FCS has set in a component theme, if you intend to override them and don't remake one from scratch. Then you can make sure you do all needed overrides to get the desired and intended result. |
Beta Was this translation helpful? Give feedback.
-
hi rydmike thank you very much for your help when I use
Yes I can set the rounded corners or styles of dropMenu, but that means I have to also set
Can't use lightTheme inputDecorationTheme,In fact, when I use FCS, I find that there are some components that are like this, FCS is very powerful, but I still want to optimize this part |
Beta Was this translation helpful? Give feedback.
-
@rydmike In many cases, you just want to set a certain attribute of a part, and you do not want to completely redefine its theme, if you need to redefine all the themes for a certain attribute, it is a little more than worth the loss |
Beta Was this translation helpful? Give feedback.
-
There could be a scenario where I want input to be 30 rounded corners, but dropmenu is based on input so it inherits 30, but I don't want to inherit 30, I want to customize its rounded corners |
Beta Was this translation helpful? Give feedback.
-
The background color selected in dropMenu is inconsistent with the background color selected in popupMenu and cannot be set |
Beta Was this translation helpful? Give feedback.
-
Hi again @laterdayi 😃 I guess I'm a bit lost, concerning what your end design is. Can you perhaps please describe how you want things to look? Then I can demonstrate how to optimally make that design. Sure I can do a principle example anyway, which I did at the end here. Target design?What I got so far about what you want is: You want 30 dp as global border radius, so:
Ok fine, this is a bit high, I would not generally recommend it as a design, but you can certainly do it. For smaller elements it will mean that they get will look like they have a stadium border shape at their normal/typical sizes. You also get very round dialogs and cards, which certainly works on dialogs, on card as default it is bit so so, but you can define its radius directly with FCS too, so no issue there. If you don't set the global Setting the This is described in the docs here: https://pub.dev/documentation/flex_color_scheme/latest/flex_color_scheme/FlexSubThemesData/defaultRadius.html. It sets themed border radius of all Widgets below to the same defined value:
If this is not desired, then just leave it undefined for M3 defaults. Regardless of if it is set or not, you can also define the border radius of most component (widget) themes individually, as shown in screenshot from Themes Playground above earlier. If you define an individual border radius for a widget/component sub-theme, it will override the system default as well as the value set by FCS You can e.g. set: subThemesData: const FlexSubThemesData(
useM2StyleDividerInM3: true,
defaultRadius: 30.0,
inputDecoratorRadius: 12.0,
popupMenuRadius: 10.0,
menuRadius: 10.0,
menuPadding: EdgeInsetsDirectional.fromSTEB(10, 16, 10, 16),
menuIndicatorRadius: 8.0,
), Above input decorator uses 12dp, and all the menu containers 10dp, plus some special padding on on the menu content and radius 8dp on menu indicator. Just as an example. But you are right, you cannot define, a separate If you want another In a future version I will add the possibility to define different BTW, I just added the option use Customization exampleLet's say we have a light theme made with FCS like this: final ThemeData lightTheme = FlexThemeData.light(
scheme: FlexScheme.indigoM3,
subThemesData: const FlexSubThemesData(
useM2StyleDividerInM3: true,
defaultRadius: 30.0,
inputDecoratorRadius: 12.0,
popupMenuRadius: 10.0,
menuRadius: 12.0,
menuPadding: EdgeInsetsDirectional.fromSTEB(10, 20, 10, 16),
menuIndicatorRadius: 8.0,
),
keyColors: const FlexKeyColors(),
tones: FlexTones.chroma(Brightness.light),
visualDensity: FlexColorScheme.comfortablePlatformDensity,
useMaterial3: true,
); Global radius is 30, input decorator is 12. We can see that below, the Now let's define some custom overrides: // If you define `contentPadding`, using `isDense` is meaningless. The `isDense`
// property is shorthand for a few predefined content paddings that are different
// if outlined or underline border is used. Use either one, but not both, if
// both are used the values from contentPadding wins.
final InputDecorationTheme inputDecorationThemeLight =
lightTheme.inputDecorationTheme.copyWith(
isDense: true,
); The above uses the predefined Next let's make custom input decoration theme for the // We need the active colorscheme, so let's grab it.
final ColorScheme lightScheme = lightTheme.colorScheme; Next making the input decorator theme for the dropdown menu theme: // Let's make a new custom input decorator theme with FCS for the dropdown with radius 4.
// Making one from scratch is very tedious, but we can use FCS helper.
// All we need to give it is the radius and used light color scheme.
// It does not yet have content padding property, but we can add that with copyWith.
// FCS 7.4.0 will have content padding prop as well btw, then copyWith is not needed,
// but in this case copyWith is very simple to use too.
final InputDecorationTheme inputDecorationDropdownLight =
FlexSubThemes.inputDecorationTheme(
colorScheme: lightScheme,
radius: 4,
).copyWith(
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
); Next let's add it to the // A custom DropdownMenu theme, with only the new custom input decorator added
// to the theme in our lightTheme's dropdownMenuTheme.
final DropdownMenuThemeData dropdownMenuThemeLight = lightTheme
.dropdownMenuTheme
.copyWith(inputDecorationTheme: inputDecorationDropdownLight); Finally in our theme: lightTheme.copyWith(
inputDecorationTheme: inputDecorationThemeLight,
dropdownMenuTheme: dropdownMenuThemeLight,
), We now have 30 as global radius, 12 on TextField and 4 on DropdownMenu and custom padding inside menu of DropdownMenu and also custom radius on indicator in DropdownMenu. TextField uses Hope this helps a bit more 😄 |
Beta Was this translation helpful? Give feedback.
-
@rydmike Thank you very much for your help, this is a great warehouse, I like it very much |
Beta Was this translation helpful? Give feedback.
-
@rydmike The example you wrote works for me, I would like to ask you a question, how can you control the height of dropMenu, now it is very high |
Beta Was this translation helpful? Give feedback.
-
The As you can see in the example I made, it has considerably less height than the one you show above. I on purpose used |
Beta Was this translation helpful? Give feedback.
-
Thank you. I'll try |
Beta Was this translation helpful? Give feedback.
-
If you have any issues getting it to work, let me know. If you can share a code sample with the issue, I can take a look and maybe find the culprit with the setup. As defined, used and tested above in the example, it worked well though. |
Beta Was this translation helpful? Give feedback.
-
I will convert this issue into a Q&A for the discussions section so other users can find it and learn from it later too. We can continue to discussion there if you need more help. It was a good question and also gave me a nudge to add a few small new features, so thanks for that. The new features will be coming in the next version (7.4.0), but it will be a while until I release it. |
Beta Was this translation helpful? Give feedback.
-
Yes, we should let more people find it and learn from it, looking forward to the release of the new version, 7.4.0 has the expected release time, perhaps you can also describe this part of the change in the documentation |
Beta Was this translation helpful? Give feedback.
Hi again @laterdayi 😃
I guess I'm a bit lost, concerning what your end design is. Can you perhaps please describe how you want things to look? Then I can demonstrate how to optimally make that design. Sure I can do a principle example anyway, which I did at the end here.
Target design?
What I got so far about what you want is:
You want 30 dp as global border radius, so:
defaultRadius: 30.0
Ok fine, this is a bit high, I would not generally recommend it as a design, but you can certainly do it. For smaller elements it will mean that they get will look like they have a stadium border shape at their normal/typical sizes. You also get very round dialogs and cards, which certainly works on dia…