Refactor NavigationRailM3E theme to use expanded and collapsed height properties for items

This commit is contained in:
Emily Pauli 2025-10-25 22:59:08 +02:00
commit d3ad4b9c9d
3 changed files with 15 additions and 10 deletions

View file

@ -36,7 +36,9 @@ class RailItem extends StatelessWidget {
Widget build(BuildContext context) {
final theme = Theme.of(context).extension<NavigationRailM3ETheme>() ??
const NavigationRailM3ETheme();
final height = destination.short ? theme.itemShortHeight : theme.itemHeight;
final height = destination.short
? theme.itemCollapsedHeight
: theme.itemExpandedHeight;
final Widget button = RailItemButtonM3E(
icon: destination.icon,

View file

@ -58,7 +58,8 @@ class RailItemButtonM3E extends StatelessWidget {
const NavigationRailM3ETheme();
final tokens = NavigationRailTokensAdapter(context);
final double height = expanded ? theme.itemHeight : theme.itemHeight;
final double height =
expanded ? theme.itemCollapsedHeight : theme.itemCollapsedHeight;
final bool selected = isSelected;
// Colors and shape per state.

View file

@ -9,8 +9,8 @@ class NavigationRailM3ETheme extends ThemeExtension<NavigationRailM3ETheme> {
this.collapsedWidth = 96.0,
this.expandedMinWidth = 220.0,
this.expandedMaxWidth = 360.0,
this.itemHeight = 64.0,
this.itemShortHeight = 56.0,
this.itemExpandedHeight = 40.0,
this.itemCollapsedHeight = 56.0,
this.iconSize = 24.0,
this.indicatorLeading = 16.0,
this.indicatorTrailing = 16.0,
@ -31,10 +31,10 @@ class NavigationRailM3ETheme extends ThemeExtension<NavigationRailM3ETheme> {
final double expandedMaxWidth;
/// Default height of an item.
final double itemHeight;
final double itemExpandedHeight;
/// Short item height variant.
final double itemShortHeight;
final double itemCollapsedHeight;
/// Default icon size used for items.
final double iconSize;
@ -80,8 +80,8 @@ class NavigationRailM3ETheme extends ThemeExtension<NavigationRailM3ETheme> {
collapsedWidth: collapsedWidth ?? this.collapsedWidth,
expandedMinWidth: expandedMinWidth ?? this.expandedMinWidth,
expandedMaxWidth: expandedMaxWidth ?? this.expandedMaxWidth,
itemHeight: itemHeight ?? this.itemHeight,
itemShortHeight: itemShortHeight ?? this.itemShortHeight,
itemExpandedHeight: itemHeight ?? this.itemExpandedHeight,
itemCollapsedHeight: itemShortHeight ?? this.itemCollapsedHeight,
iconSize: iconSize ?? this.iconSize,
indicatorLeading: indicatorLeading ?? this.indicatorLeading,
indicatorTrailing: indicatorTrailing ?? this.indicatorTrailing,
@ -105,8 +105,10 @@ class NavigationRailM3ETheme extends ThemeExtension<NavigationRailM3ETheme> {
lerpDouble(expandedMinWidth, other.expandedMinWidth, t)!,
expandedMaxWidth:
lerpDouble(expandedMaxWidth, other.expandedMaxWidth, t)!,
itemHeight: lerpDouble(itemHeight, other.itemHeight, t)!,
itemShortHeight: lerpDouble(itemShortHeight, other.itemShortHeight, t)!,
itemExpandedHeight:
lerpDouble(itemExpandedHeight, other.itemExpandedHeight, t)!,
itemCollapsedHeight:
lerpDouble(itemCollapsedHeight, other.itemCollapsedHeight, t)!,
iconSize: lerpDouble(iconSize, other.iconSize, t)!,
indicatorLeading:
lerpDouble(indicatorLeading, other.indicatorLeading, t)!,