Add ability to override NavigationDestination.label padding for NavigationBar

[TahaTesser]

Fixes Long NavigationBar tab titles can't be padded from the sides of the screen

Code sample

expand to view the code sample

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',
            ),
          ],
        ),
      ),
    );
  }
}

Default NavigationDestination.label padding with long label

Custom NavigationDestination.label padding with long label

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• I followed the breaking change policy and added Data Driven Fixes where supported.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[QuncCccccc]

The change LGTM.

Just have one question, what's the expected behavior after we add paddings for each label? If cutting the text (like the screenshot in the PR description) is expected, then it's fine. But if the expected look is to make the text become 2 lines, then it may cause some alignment issue on the icons because destinations are placed in center of the bar.

[TahaTesser]

what's the expected behavior after we add paddings for each label? If cutting the text (like the screenshot in the PR description) is expected, then it's fine.

It is expected to overflow with ellipses on Android when providing long label.

But it's not a default feature in Flutter. The user should provide custom overflow when using padding.

      theme: ThemeData(
          navigationBarTheme: const NavigationBarThemeData(
        labelTextStyle:
            WidgetStatePropertyAll(TextStyle(overflow: TextOverflow.ellipsis)),
        labelPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
      )),

Since the default label text style doesn't set a overflow behavior

flutter/packages/flutter/lib/src/material/navigation_bar.dart

Lines 1385 to 1396 in 673d604

	@override MaterialStateProperty<TextStyle?>? get labelTextStyle {
	return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
	final TextStyle style = _textTheme.labelMedium!;
	return style.apply(
	color: states.contains(MaterialState.disabled)
	? _colors.onSurfaceVariant.withOpacity(0.38)
	: states.contains(MaterialState.selected)
	? _colors.onSurface
	: _colors.onSurfaceVariant
	);
	});
	}

[QuncCccccc]

I see! LGTM! Thanks for adding this feature and helping to improve file format!

But it's not a default feature in Flutter. The user should provide custom overflow when using padding.

I think it's okay since changing the default feature may also cause breaking change haha.

[auto-submit]

auto label is removed for flutter/flutter/158260, due to - The status or check suite Mac plugin_dependencies_test has failed. Please fix the issues identified (or deflake) before re-applying this label.

[auto-submit]

auto label is removed for flutter/flutter/158260, due to - The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label.