Repository navigation
NavigationDrawerDestination backgroundColor is not changing #138105
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
-
In example for NavigationDrawer (https://api.flutter.dev/flutter/material/NavigationDrawer-class.html) add backgroundColor: Colors.red for NavigationDestinations:
-
Run the updated example. The backgroundColor of NavigationDrawerDestinations is not changing to red.
Expected results
The backgroundColor of NavigationDrawerDestinations should change to the color specified for the property.
Actual results
The backgroundColor of NavigationDrawerDestinations is not changing.
Code sample
Code sample
import 'package:flutter/material.dart';
/// Flutter code sample for [NavigationDrawer].
class ExampleDestination {
const ExampleDestination(this.label, this.icon, this.selectedIcon);
final String label;
final Widget icon;
final Widget selectedIcon;
}
const List<ExampleDestination> destinations = <ExampleDestination>[
ExampleDestination(
'page 0', Icon(Icons.widgets_outlined), Icon(Icons.widgets)),
ExampleDestination(
'page 1', Icon(Icons.format_paint_outlined), Icon(Icons.format_paint)),
ExampleDestination(
'page 2', Icon(Icons.text_snippet_outlined), Icon(Icons.text_snippet)),
ExampleDestination(
'page 3', Icon(Icons.invert_colors_on_outlined), Icon(Icons.opacity)),
];
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(useMaterial3: true),
home: const NavigationDrawerExample(),
),
);
}
class NavigationDrawerExample extends StatefulWidget {
const NavigationDrawerExample({super.key});
@override
State<NavigationDrawerExample> createState() =>
_NavigationDrawerExampleState();
}
class _NavigationDrawerExampleState extends State<NavigationDrawerExample> {
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
int screenIndex = 0;
late bool showNavigationDrawer;
void handleScreenChanged(int selectedScreen) {
setState(() {
screenIndex = selectedScreen;
});
}
void openDrawer() {
scaffoldKey.currentState!.openEndDrawer();
}
Widget buildBottomBarScaffold() {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Page Index = $screenIndex'),
],
),
),
bottomNavigationBar: NavigationBar(
selectedIndex: screenIndex,
onDestinationSelected: (int index) {
setState(() {
screenIndex = index;
});
},
destinations: destinations.map(
(ExampleDestination destination) {
return NavigationDestination(
label: destination.label,
icon: destination.icon,
selectedIcon: destination.selectedIcon,
tooltip: destination.label,
);
},
).toList(),
),
);
}
Widget buildDrawerScaffold(BuildContext context) {
return Scaffold(
key: scaffoldKey,
body: SafeArea(
bottom: false,
top: false,
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: NavigationRail(
minWidth: 50,
destinations: destinations.map(
(ExampleDestination destination) {
return NavigationRailDestination(
label: Text(destination.label),
icon: destination.icon,
selectedIcon: destination.selectedIcon,
);
},
).toList(),
selectedIndex: screenIndex,
useIndicator: true,
onDestinationSelected: (int index) {
setState(() {
screenIndex = index;
});
},
),
),
const VerticalDivider(thickness: 1, width: 1),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Page Index = $screenIndex'),
ElevatedButton(
onPressed: openDrawer,
child: const Text('Open Drawer'),
),
],
),
),
],
),
),
endDrawer: NavigationDrawer(
onDestinationSelected: handleScreenChanged,
selectedIndex: screenIndex,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(28, 16, 16, 10),
child: Text(
'Header',
style: Theme.of(context).textTheme.titleSmall,
),
),
...destinations.map(
(ExampleDestination destination) {
return NavigationDrawerDestination(
backgroundColor: Colors.red,
label: Text(destination.label),
icon: destination.icon,
selectedIcon: destination.selectedIcon,
);
},
),
const Padding(
padding: EdgeInsets.fromLTRB(28, 16, 28, 10),
child: Divider(),
),
],
),
);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
showNavigationDrawer = MediaQuery.of(context).size.width >= 450;
}
@override
Widget build(BuildContext context) {
return showNavigationDrawer
? buildDrawerScaffold(context)
: buildBottomBarScaffold();
}
}
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.13.6, on macOS 13.0 22A380 darwin-arm64, locale en-CA)
• Flutter version 3.13.6 on channel stable at /Users/inesa/Developer/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ead455963c (6 weeks ago), 2023-09-26 18:28:17 -0700
• Engine revision a794cf2681
• Dart version 3.1.3
• DevTools version 2.25.0
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /Users/inesa/Library/Android/sdk
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
• CocoaPods version 1.12.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.2)
• Android Studio at /Applications/Python 3.11/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
[✓] VS Code (version 1.83.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.74.0
[✓] Connected device (3 available)
• iPhone 14 Pro (mobile) • C949302B-2E0E-4467-9EE3-18304F7463B1 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 119.0.6045.123
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.Metadata
Metadata
Assignees
Labels
Important issues not at the top of the work listFound to occur in 3.13Found to occur in 3.17flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onmaterial_ui package in flutter/packagesIssue is closed as already fixed in a newer versionOwned by Design Languages teamTriaged by Design Languages team
Activity
[-]NavigationDrawerDestination backgroundColor is o[/-][+]NavigationDrawerDestination backgroundColor is not changing[/+]huycozy commentedon Nov 9, 2023
Reproduced this issue on the latest stable and master channels.
Checking navigation_drawer.dart source code, NavigationDrawerDestination.backgroundColor doesn't seem to be used in its builder.
flutter doctor -v (stable and master)
[✓] Flutter (Channel stable, 3.13.9, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.13.9 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision d211f42860 (11 days ago), 2023-10-25 13:42:25 -0700 • Engine revision 0545f8705d • Dart version 3.1.5 • DevTools version 2.25.0 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.0.1) • Xcode at /Users/huynq/Downloads/Xcode.app/Contents/Developer • Build 15A507 • CocoaPods version 1.13.0 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.3) • Android Studio at /Applications/Android Studio Giraffe.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231) [✓] Android Studio (version 2022.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694) [✓] VS Code (version 1.84.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.76.0 [✓] Connected device (4 available) • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64 • Android 11 (API 30) • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios • iOS 15.7.9 19H365 • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 118.0.5993.117 [✓] Network resources • All expected network resources are available. • No issues found!removed bgColor property for NavigationDrawerDestination as it doesn'…
NavigationDrawer control (#2059)
Add background color to NavigationDrawerDestination (#139154)
github-actions commentedon Dec 22, 2023
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.