zan1456/flutter
1
0
Fork 0
forked from firka/flutter
Code Pull Requests Activity

Add ability to override NavigationDestination.label padding for NavigationBar (#158260)

Browse Source 
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">
This commit is contained in:
Taha Tesser
2024-11-08 16:19:18 +02:00
committed by GitHub
parent 2afadc2cdf
commit 7abb083ae2
5 changed files with 207 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
dev/tools/gen_defaults/lib/navigation_bar_template.dart
View File

@@ -14,23 +14,27 @@ class NavigationBarTemplate extends TokenTemplate {
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,
);
: 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 backgroundColor => ${componentColor("md.comp.navigation-bar.container")};
@override Color? get shadowColor => ${colorOrTransparent("md.comp.navigation-bar.container.shadow-color")};
@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
Color? get surfaceTintColor => ${colorOrTransparent("md.comp.navigation-bar.container.surface-tint-layer.color")};
@override MaterialStateProperty<IconThemeData?>? get iconTheme {
@override
MaterialStateProperty<IconThemeData?>? get iconTheme {
return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
return IconThemeData(
size: ${getToken("md.comp.navigation-bar.icon.size")},
@@ -43,10 +47,14 @@ class _${blockName}DefaultsM3 extends NavigationBarThemeData {
});
}
@override Color? get indicatorColor => ${componentColor("md.comp.navigation-bar.active-indicator")};
@override ShapeBorder? get indicatorShape => ${shape("md.comp.navigation-bar.active-indicator")};
@override
Color? get indicatorColor => ${componentColor("md.comp.navigation-bar.active-indicator")};
@override MaterialStateProperty<TextStyle?>? get labelTextStyle {
@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(
@@ -58,6 +66,9 @@ class _${blockName}DefaultsM3 extends NavigationBarThemeData {
);
});
}
@override
EdgeInsetsGeometry? get labelPadding => const EdgeInsets.only(top: 4);
}
''';
}