mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
7cef966147
fixes [NavigationDrawer selected item has wrong icon color [Material3 spec]](https://github.com/flutter/flutter/issues/129572) ### Description This PR fixes a mistake in the `NavigationDrawer` defaults, where generated token value returns a `null`. This issue can be detected when you want to customize the selected icon color for `NavigationDrawerDestination` using a custom color scheme. ### Code sample <details> <summary>expanded to view the code sample</summary> ```dart 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( debugShowCheckedModeBanner: false, themeMode: ThemeMode.light, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue).copyWith( onSecondaryContainer: Colors.red, ), useMaterial3: true, ), home: const Example(), ); } } class Example extends StatelessWidget { const Example({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('NavigationDrawer Sample'), ), drawer: const NavigationDrawer( children: <Widget>[ NavigationDrawerDestination( icon: Icon(Icons.favorite_outline_rounded), label: Text('Favorite'), selectedIcon: Icon(Icons.favorite_rounded), ), NavigationDrawerDestination( icon: Icon(Icons.favorite_outline_rounded), label: Text('Favorite'), ), ], ), ); } } ``` </details> ### Before <img width="1053" alt="Screenshot 2023-06-27 at 13 24 38" src="https://github.com/flutter/flutter/assets/48603081/18c13a73-688f-4586-bb60-bddef45d173f"> ### After <img width="1053" alt="Screenshot 2023-06-27 at 13 24 25" src="https://github.com/flutter/flutter/assets/48603081/8a1427c6-517f-424a-b0bd-24bad7c5fbb0">
66 lines
2.5 KiB
Dart
66 lines
2.5 KiB
Dart
// Copyright 2014 The Flutter Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import 'template.dart';
|
|
|
|
class NavigationDrawerTemplate extends TokenTemplate {
|
|
const NavigationDrawerTemplate(super.blockName, super.fileName, super.tokens, {
|
|
super.colorSchemePrefix = '_colors.',
|
|
super.textThemePrefix = '_textTheme.'
|
|
});
|
|
|
|
@override
|
|
String generate() => '''
|
|
class _${blockName}DefaultsM3 extends NavigationDrawerThemeData {
|
|
_${blockName}DefaultsM3(this.context)
|
|
: super(
|
|
elevation: ${elevation("md.comp.navigation-drawer.modal.container")},
|
|
tileHeight: ${getToken("md.comp.navigation-drawer.active-indicator.height")},
|
|
indicatorShape: ${shape("md.comp.navigation-drawer.active-indicator")},
|
|
indicatorSize: const Size(${getToken("md.comp.navigation-drawer.active-indicator.width")}, ${getToken("md.comp.navigation-drawer.active-indicator.height")}),
|
|
);
|
|
|
|
final BuildContext context;
|
|
late final ColorScheme _colors = Theme.of(context).colorScheme;
|
|
late final TextTheme _textTheme = Theme.of(context).textTheme;
|
|
|
|
@override
|
|
Color? get backgroundColor => ${componentColor("md.comp.navigation-drawer.container")};
|
|
|
|
@override
|
|
Color? get surfaceTintColor => ${colorOrTransparent("md.comp.navigation-drawer.container.surface-tint-layer.color")};
|
|
|
|
@override
|
|
Color? get shadowColor => ${colorOrTransparent("md.comp.navigation-drawer.container.shadow-color")};
|
|
|
|
@override
|
|
Color? get indicatorColor => ${componentColor("md.comp.navigation-drawer.active-indicator")};
|
|
|
|
@override
|
|
MaterialStateProperty<IconThemeData?>? get iconTheme {
|
|
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
|
|
return IconThemeData(
|
|
size: ${getToken("md.comp.navigation-drawer.icon.size")},
|
|
color: states.contains(MaterialState.selected)
|
|
? ${componentColor("md.comp.navigation-drawer.active.icon")}
|
|
: ${componentColor("md.comp.navigation-drawer.inactive.icon")},
|
|
);
|
|
});
|
|
}
|
|
|
|
@override
|
|
MaterialStateProperty<TextStyle?>? get labelTextStyle {
|
|
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
|
|
final TextStyle style = ${textStyle("md.comp.navigation-drawer.label-text")}!;
|
|
return style.apply(
|
|
color: states.contains(MaterialState.selected)
|
|
? ${componentColor("md.comp.navigation-drawer.active.label-text")}
|
|
: ${componentColor("md.comp.navigation-drawer.inactive.label-text")},
|
|
);
|
|
});
|
|
}
|
|
}
|
|
''';
|
|
}
|