How to customize input decoration in dropdownMenuTheme?

[laterdayi]

 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?

[rydmike]

Hi @laterdayi, thank you for your question.

FlexColorScheme sets quite a few theming properties for InputDecorationTheme and the DropdownMenuTheme, for example it uses the same InputDecorationTheme on the DropdownMenuTheme as on TextField so that their text input field designs match by default. In future versions I plan to add much more flexibility on this part, but for now this common design case that they should match, is used by default.

The InputDecorationTheme also uses the older border properties which are individual for each state. I plan to update this to the newer border only based style in an upcoming release.

However, currently if you override only the border property in the InputDecorationTheme produced by FCS, it has no impact on the seen border style of the input decorator theme in lightTheme.inputDecorationTheme.copyWith, unless you also set the same border radius on all the other border properties in this inputDecorationTheme.copyWith, meaning also errorBorder, focusedBorder, focusedErrorBorder, disabledBorder and enabledBorder. Yes I know, this is a lot of theme props defs.

FCS also sets the MenuTheme that is used by the MenuAnchor that DropdownMenu uses under the hood. This impacts the DropdownMenu style as well, just because it does in Flutter. I actually don’t know if it intentional in Flutter or something that they overlooked in the design. I need to take another look at this, it is possible that you have discovered an issue in Flutter SDK behavior here, but I need to test and take a closer look at this.

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 InputDecoratorTheme the border props certainly comes to mind.

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 FlexColorScheme. If you plan to do a lot of custom changes to a component theme, it may be easier to start with a clean slate, and just make a completely new component (sub) theme for such components. This way you can avoid any influence FCS defined sub-theme might have via prop values it has set already. Of course, anything you have not defined is then null and results in Widget default styles, so you might have define a lot more props than the ones shown below to get your desired style. However, starting with "raw" component theme as show below, and just copying them into the lightTheme might be a better starting point for your custom component design and use case.

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 menuTheme property and its menuStyle in ThemeData. However, this does feel odd if it is so. I was looking at the Flutter SDK code for this again and it does look like any menuStyle set in dropdownMenuTheme should override this for the MenuAnchor it uses under the hood, that gets its style via menuTheme in ThemeData.

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 DropdownMenu with FlexColorScheme a quite bit, below a config example from Themes Playground

and some of the configured props that was set for above design, it does use the defaultRadius: 30.0, which btw is quite high border radius, you might need to reduce this one widget level for some widgets, e.g. Card, but depends on how you use it and some other widgets impacted by the global border radius. Anyway below I did use the defaultRadius: 30.0, but did an override on input decorator radius to 8, menu radius to 12, some custom padding, and also custom radius on menu indicator. Just as example of what can be styled in the Playgprund and FCS convenience APIs.

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, copyWith override of made ThemeData is needed if you want to go beyond what FCS offers. And as mentioned when doing something very custom with the component themes, one might as well start from an empty default instead of overriding the component theme FCS has produced.

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.

[laterdayi]

hi rydmike thank you very much for your help when I use

        inputDecorationTheme: InputDecorationTheme(
          isDense: true,
          contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
        ),
        dropdownMenuTheme: DropdownMenuThemeData(
          inputDecorationTheme: InputDecorationTheme(
            isDense: true,
            border: OutlineInputBorder(borderRadius: BorderRadius.circular(14)),
            contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
          ),
          menuStyle: MenuStyle(
            shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(14))),
          ),
        ),

Yes I can set the rounded corners or styles of dropMenu, but that means I have to also set

inputDecorationTheme: InputDecorationTheme(

isDense: true,

contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),

),

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

[laterdayi]

@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

[laterdayi]

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

[laterdayi]

The background color selected in dropMenu is inconsistent with the background color selected in popupMenu and cannot be set

[laterdayi]

Including its radius

[rydmike]

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 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 defaultRadius, the widgets use their M3 default radius in M3 mode, which varies by widget according to M3 spec. In M2 they also almost use the same M3 defaults in FCS, as it uses on opinionated M2 design that looks a lot like M3 by default, but it is e.g. InputDecorator (10dp) is more rounded than M3

Setting the defaultRadius changes the borderRadius on many component themes. Its intention is to be able to set the border radius with one setting for all of them to the same value with one simple property.

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:

• BottomSheet
• Card
• Chip
• Dialog
• Drawer
• DropdownMenu
• ElevatedButton
• FloatingActionButton (if opted in with fabUseShape: true)
• InputDecoration
• MenuAnchor
• OutlinedButton
• SegmentedButton
• TextButton
• ToggleButtons
• TimePickerDialog
• Older deprecated buttons using ButtonThemeData

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 defaultRadius.

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 InputDecorationTheme for the input text field used by the DropdownMenu and its theme directly with FCS. It by design and intention uses the same style as the global input decoration that is used by TextField on the DropdownMenu's TextField part. The design intent and rationale is that they should look the same when used next to each other. Since both are text input fields, this is typically the design desire, well one I use as default anyway 😄

If you want another InputDecoration on the DropdownMenu you will indeed have to override it as explained in my previous reply. I agree this is not ideal for such a use case, but still very doable. You can use the FCS FlexSubThemes.inputDecorationTheme to make it easier to define a new one.

In a future version I will add the possibility to define different InputDecorator for e.g. DropdownMenu. This will not happen until version 10. I can however, add a toggle to not use the InputDecoration defined for TextField at all on the DropdownMenu as an option to start with a clean default slate. Although it is not much different than overriding with default input decorator, but at least then DropdownMenu won't be affected at all by what you define as decorator for the text field. This kind of option by the way already exists for the dialogs, as they can also use the "global" input decorator in their text entry fields, if so desired. It actually only works well in TimePickerDialog, but not really in the DatePickerDialog due to an issue in Flutter. For more info see flutter/flutter#131666.

BTW, I just added the option use isDense on the InputDecorator for TextField it is nice to have, not sure why I have not added it before. This will be in version 7.4.0, also in UI in Themes Playground. I also added the contentPadding as an API property. I wont add that to the Playground, but it will be available via the FCS API in next version (7.4.0) as well.

Customization example

Let'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 TextField and DropdownMenu have same decorator styles with 12dp radius, we can also see that e.g. Card is using the global radius 30.

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 isDense content padding, if you want a custom value use it instead.

Next let's make custom input decoration theme for the DropdownMenuTheme, using one of FlexColorScheme's component theming helpers to make it easier. We will need the active color scheme, for each theme mode, so let's grab the light one:

// 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 DropdownMenuTheme in our lightTheme:

// 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 MaterialApp theme we can define the theme with our customized component theme props as this:

      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 isDense and DropdownMenu a custom contentPadding.

Hope this helps a bit more 😄

[laterdayi]

@rydmike Thank you very much for your help, this is a great warehouse, I like it very much

[laterdayi]

@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

[laterdayi]

[rydmike]

The isDense or the contentPadding will do that. With contentPadding you have more control. The isDense is just convenience Material default values using predefined contentPadding that have different values when using outline or underline border.

As you can see in the example I made, it has considerably less height than the one you show above.

I on purpose used isDense in the TextField decorator example and contentPadding in the DropdwonMenuTheme's input decorator, just to demo their difference. You probably want them to be the same height, so try isDense first on both, if it is not enough, you can make one with even less height by using the contentPadding padding instead on both using same values.

[laterdayi]

Thank you. I'll try

[rydmike]

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.

[rydmike]

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.

[laterdayi]

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