Material 3 Navigation Drawer does not support scrolling or safe areas #116782
Description
The new Navigation Drawer widget that was introduced in #115668 is not scrollable. This easily becomes an issue when the navigation drawer contains many items or even just very few items, when viewed in landscape mode.
The user also cannot just add a ListView around the NavigationDrawerDestinations, like with the "old" drawer, because that will trigger an error:
Navigation destinations need a _NavigationDrawerDestinationInfo parent, which is usually provided by NavigationDrawer.
'package:flutter/src/material/navigation_drawer.dart':
Failed assertion: line 497 pos 7: 'result != null'
Along with implementing scrolling support, the Navigation Drawer should probably also automatically respect Safe Areas, because that will be hard for users to add theirselves with the current design, too.
Steps to Reproduce
- Execute
flutter runon the code sample - Resize the window / switch between portrait and landscape mode
- The navigation is cut off
Expected results:
The NavigationDrawerDestinations are scrollable and also respect Safe Areas on devices with e.g. notches.
Actual results:
The items are cut off. Also, on an android device, the first element is behind the notch, because Safe Areas are ignored.
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: const Text('Nav Bar Scrolling'),
),
drawer: NavigationDrawer(children: [
const SizedBox(height: 22),
for (var i = 0; i < 30; i++)
NavigationDrawerDestination(
icon: const Icon(Icons.home_outlined),
selectedIcon: const Icon(Icons.home),
label: Text('Item $i'),
),
]),
),
);
}
}
Flutter Doctor
[✓] Flutter (Channel master, 3.7.0-4.0.pre.48, on Fedora Linux 37 (Workstation Edition) 6.0.9-300.fc37.x86_64, locale de_DE.UTF-8)
• Flutter version 3.7.0-4.0.pre.48 on channel master at /home/marcus/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision eefbe85c8b (vor 11 Stunden), 2022-12-08 22:32:07 -0600
• Engine revision 8d83b98c55
• Dart version 3.0.0 (build 3.0.0-0.0.dev)
• DevTools version 2.20.0
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /home/marcus/Android/Sdk
• Platform android-33, build-tools 33.0.0
• Java binary at: /home/marcus/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8815526/jre/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• Chrome at google-chrome
[✓] Linux toolchain - develop for Linux desktop
• clang version 15.0.4 (Fedora 15.0.4-1.fc37)
• cmake version 3.24.2
• ninja version 1.10.2
• pkg-config version 1.8.0
[✓] Android Studio (version 2021.2)
• Android Studio at /home/marcus/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/212.5712.43.2112.8815526
• Flutter plugin version 69.0.2
• Dart plugin version 212.5744
• Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
[✓] Android Studio (version 2021.3)
• Android Studio at /home/marcus/.local/share/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335
• Flutter plugin version 71.0.3
• Dart plugin version 213.7433
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
[✓] VS Code (version 1.73.1)
• VS Code at /usr/share/code
• Flutter extension can be installed from:
🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Fedora Linux 37 (Workstation Edition) 6.0.9-300.fc37.x86_64
• Chrome (web) • chrome • web-javascript • Google Chrome 107.0.5304.110
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!