Drawer appears full width after 7.0.0-dev.3

[fotiDim]

Until 7.0.0-dev.3 the material drawer always left a gap on the right side. Since 7.0.0-dev.4 it is full width and I am having the same behavior in 7.0.1. Was that change intentional?

[rydmike]

Hi @fotiDim, thanks for your question.

I think you meant that since 7.0.0.dev-3, so 7.0.0.dev-3, 7.0.0 and 7.0.1, that the M3 drawer is 360dp wide by default.

Yes, in M3 mode this is intentional. The default width of the Drawer follows the M3 specification, that states that is should be 360dp wide:

https://m3.material.io/components/navigation-drawer/specs#ce8bfbcf-3dec-45d2-9d8b-5e10af1cf87d

On old smaller phone that is my opinion a very poor design choice, since they are typically only 360dp wide. Which is why I made a study about it and wrote this flutter/flutter#123380. I have been in contact with @rodydavis to get some comments on the topic from the Material design team.

I just added a reference in the FlexColorScheme docs to this known issue as well, I noticed it was missing: https://docs.flexcolorscheme.com/known_issues#flutter-navigationdrawer-wrong-default-width-in-m3

To use another width in FlexColorScheme than the current default 360dp, just set it to e.g. 320dp, nice compromise between old Flutter 304dp default and a bit wider, or set it to 304dp which was past default in Flutter for a drawer in M2 mode. As you can see in my analysis of the width 304dp is also not correct M2 spec, well OK it is, if your phone width is 360dp then 304dp is correct spec width, but only for that width case.

  subThemesData: const FlexSubThemesData(
    drawerWidth: 320.0, // Or use 304.0 for M2 default.
  ),

The new Themes Playground btw includes links to most known Flutter M3 theming issues that impacts it, see below.

Screen.Recording.2023-04-07.at.12.41.24.mov

I am going to close this issue as it works as expected. I will move it the Discussions FAQ section though, as it is a good question.

The default might change if the M3 spec is updated or to whatever Flutter will do.

Hope this helps.

[fotiDim]

@rydmike thank you for the detailed reply. You are right dev.3 introduced the behavior. Dev.2 was the last version working for me as "expected".
I tested on 2 devices (Samsung S20 FE and Oppo A52) and on both the width was the exact same width as the screen so I thought it always expanded to 100%.

Is it possible to set it to a percentage of the screen or to set the gap width (on the right) instead of the drawer width?

[rydmike]

@fotiDim Yes indeed, any "old" or small phone is typically 360dp wide, as I showed in my issue report flutter/flutter#123380 to Google Flutter and Material team as well. It feels a bit like they only tried this on iPhones that are typically wider than Android phones.

Quite frankly the new spec is bad, the M2 spec made more sense. Or if the spec is actually intended to work as I propose in the issue then it would work OK.

Since the only way to set the width of the NavigationDrawer is via DrawerTheme it is in fact a bit tricky to make a NavigationDrawer that is media size dependent, since it must come via the theme.

I would not recommend using a screen width proportional width, on tablets/desktop such a Drawer would become very wide. It should be clamped to a given max values, and it should always leave at least 56dp not covered space, but it should also not shrink to 0. So on super narrow screens it might actually cover the full screen with, but that would be on more narrow widths than phones actually are, so it would only be seen on a desktop build when making it very narrow.

This is a better function for the drawerWidth that I came up with, it actually follows how I suggested in the issue that the width should work.

/// Return a width for a Drawer that is media width responsive.
///
/// Is width responsive as follow:
/// * Is never wider than 360 dp
/// * Leaves empty space of min 56 dp when screen width is larger than 300 dp.
/// * Is never less than 244 dp wide.
/// * Will fill max width if screen is less than 244 dp wide.
double drawerWidth() {
  final double screenWidth =
      MediaQueryData.fromWindow(WidgetsBinding.instance.window).size.width;

  /// Drawer, minimum none covered space when screen width is > 300 dp .
  const double minNotUsedSpace = 56; // This is spec in M2.

  /// Minimum width the Drawer theme will ever use.
  ///
  /// If screen is more narrow than this, it will be constrained to screen
  /// width by built in Drawer behavior constraints.
  const double drawerMinWidth = 244;

  /// Max width the Drawer theme will use.
  ///
  /// This is fixed width spec in M3, but it works better if it used as
  /// max width ever used, but only when screen width is wider than
  /// this width plus [minNotUsedSpace].
  const double drawerMaxWidth = 360;

  // Usable Drawer width is total screen width minus minimum not used space.
  final double usableWidth = screenWidth - minNotUsedSpace;

  // Clamp usableWidth between drawerMinWidth and drawerMaxWidth value.
  return usableWidth.clamp(drawerMinWidth, drawerMaxWidth);
}

With the above function I can an app theme where the themed Drawer width and thus also a NavigationDrawer behaves like this:

Screen.Recording.2023-04-10.at.21.11.57.mov

Sadly without support in the framework I cannot dynamically adjust the Drawer's themed width like that for the produced ThemeData.

It is still of course possible to make a theme that dynamically adjusts the themed drawer width as the app's media width changes, by using the above function to just adjust themed drawerWidth with it as media size is chnaged. That is what I did in the above example. Still using FlexColorScheme to make the theme.

To try if it works I added it to the FlexColorScheme + Riverpod example mentioned in the docs. You can find it here: https://github.com/rydmike/theme_demo

You can do this without Riverpod too of course, but it was handier to do it in the Riverpod example.

Some code links:

The MaterialApp: https://github.com/rydmike/theme_demo/blob/master/lib/app/views/theme_demo_app.dart
Theme providers/controllers: https://github.com/rydmike/theme_demo/blob/master/lib/theme/controllers/theme_providers.dart
Theme: https://github.com/rydmike/theme_demo/blob/master/lib/theme/models/app_theme.dart
Drawer width function: https://github.com/rydmike/theme_demo/blob/master/lib/core/utils/drawer_width.dart
Drawer width provider: https://github.com/rydmike/theme_demo/blob/master/lib/drawer/controllers/drawer_width_provider.dart
Drawer: https://github.com/rydmike/theme_demo/blob/master/lib/drawer/views/app_drawer.dart

The Drawer does not contain any width setting, it comes via the theme and hence also works for NavigationDrawer that gets width from same theme.

There might be a separate width property exposed in Flutter framework in future version, as both a widget property and a theme property. Maybe there will even be a property like the minNotUsedSpace in my above function. If so FlexColorScheme will also support them when available in stable channel.

[rydmike]

There is an unmerged PR in Flutter master channel that fixes this issue btw: flutter/flutter#124042

So when that lands in some form the Drawer theme width will behave mostly like the complex thing above, with a fixed padding of 56 dp. and expand to max the given width value.

For the final fix I'm going to wait for that to support it in FlexColorScheme.

As simple fix for now, just use e.g. 304dp as a fix width and it will be same as before 😄