7abb083ae2
Fixes [Long NavigationBar tab titles can't be padded from the sides of the screen](https://github.com/flutter/flutter/issues/158130) ### Code sample <details> <summary>expand 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, theme: ThemeData( navigationBarTheme: const NavigationBarThemeData( labelTextStyle: WidgetStatePropertyAll(TextStyle(overflow: TextOverflow.ellipsis)), labelPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 4), )), home: Scaffold( body: Center( child: Text( 'Custom NavigationBar label padding', style: Theme.of(context).textTheme.titleMedium, ), ), bottomNavigationBar: NavigationBar( destinations: const [ NavigationDestination( icon: Icon(Icons.favorite_rounded), label: 'Long Label Text', ), NavigationDestination( // icon: SizedBox.shrink(), icon: Icon(Icons.favorite_rounded), label: 'Long Label Text', ), NavigationDestination( icon: Icon(Icons.favorite_rounded), label: 'Long Label Text', ), ], ), ), ); } } ``` </details> ### Default `NavigationDestination.label` padding with long label <img width="458" alt="Screenshot 2024-11-06 at 14 30 52" src="https://github.com/user-attachments/assets/637e5e66-e05f-49fa-a4ae-72083b6ff884"> ### Custom `NavigationDestination.label` padding with long label <img width="458" alt="Screenshot 2024-11-06 at 14 32 02" src="https://github.com/user-attachments/assets/23ebf715-30d3-433c-92cd-c8f0fdb1571b">
75 lines
2.7 KiB
Dart
75 lines
2.7 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 NavigationBarTemplate extends TokenTemplate {
|
|
const NavigationBarTemplate(super.blockName, super.fileName, super.tokens, {
|
|
super.colorSchemePrefix = '_colors.',
|
|
super.textThemePrefix = '_textTheme.',
|
|
});
|
|
|
|
@override
|
|
String generate() => '''
|
|
class _${blockName}DefaultsM3 extends NavigationBarThemeData {
|
|
_${blockName}DefaultsM3(this.context)
|
|
: super(
|
|
height: ${getToken("md.comp.navigation-bar.container.height")},
|
|
elevation: ${elevation("md.comp.navigation-bar.container")},
|
|
labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
|
|
);
|
|
|
|
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-bar.container")};
|
|
|
|
@override
|
|
Color? get shadowColor => ${colorOrTransparent("md.comp.navigation-bar.container.shadow-color")};
|
|
|
|
@override
|
|
Color? get surfaceTintColor => ${colorOrTransparent("md.comp.navigation-bar.container.surface-tint-layer.color")};
|
|
|
|
@override
|
|
MaterialStateProperty<IconThemeData?>? get iconTheme {
|
|
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
|
|
return IconThemeData(
|
|
size: ${getToken("md.comp.navigation-bar.icon.size")},
|
|
color: states.contains(MaterialState.disabled)
|
|
? _colors.onSurfaceVariant.withOpacity(0.38)
|
|
: states.contains(MaterialState.selected)
|
|
? ${componentColor("md.comp.navigation-bar.active.icon")}
|
|
: ${componentColor("md.comp.navigation-bar.inactive.icon")},
|
|
);
|
|
});
|
|
}
|
|
|
|
@override
|
|
Color? get indicatorColor => ${componentColor("md.comp.navigation-bar.active-indicator")};
|
|
|
|
@override
|
|
ShapeBorder? get indicatorShape => ${shape("md.comp.navigation-bar.active-indicator")};
|
|
|
|
@override
|
|
MaterialStateProperty<TextStyle?>? get labelTextStyle {
|
|
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
|
|
final TextStyle style = ${textStyle("md.comp.navigation-bar.label-text")}!;
|
|
return style.apply(
|
|
color: states.contains(MaterialState.disabled)
|
|
? _colors.onSurfaceVariant.withOpacity(0.38)
|
|
: states.contains(MaterialState.selected)
|
|
? ${componentColor("md.comp.navigation-bar.active.label-text")}
|
|
: ${componentColor("md.comp.navigation-bar.inactive.label-text")}
|
|
);
|
|
});
|
|
}
|
|
|
|
@override
|
|
EdgeInsetsGeometry? get labelPadding => const EdgeInsets.only(top: 4);
|
|
}
|
|
''';
|
|
}
|