github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 : FIX : Long labels overflowing in extended navigation rail. (#145474)

Browse Source 
It has been observed that while in extended navigation rail, if longer labels are given the it is overflowing. Problem identified in "NavigationRail" widget only in case of extended version of it. This PR includes the fix for the same.

Fixes https://github.com/flutter/flutter/issues/110901.

*NO breaking changes.*
This commit is contained in:
Aliasgar Vohra 2024-05-08 16:35:24 +05:30 committed by GitHub
parent 1fba66d82e
commit 4d6c00cc2b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 61 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/flutter/lib/src/material/navigation_rail.dart
View File

@ -698,16 +698,19 @@ class _RailDestinationState extends State<_RailDestination> {
),
child: ClipRect(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
iconPart,
Align(
heightFactor: 1.0,
widthFactor: widget.extendedTransitionAnimation.value,
alignment: AlignmentDirectional.centerStart,
child: FadeTransition(
alwaysIncludeSemantics: true,
opacity: labelFadeAnimation,
child: styledLabel,
Flexible(
child: Align(
heightFactor: 1.0,
widthFactor: widget.extendedTransitionAnimation.value,
alignment: AlignmentDirectional.centerStart,
child: FadeTransition(
alwaysIncludeSemantics: true,
opacity: labelFadeAnimation,
child: styledLabel,
),
),
),
SizedBox(width: _horizontalDestinationPadding * widget.extendedTransitionAnimation.value),

50
packages/flutter/test/material/navigation_rail_test.dart
View File

@ -7,6 +7,7 @@ import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_test/flutter_test.dart';
import '../widgets/semantics_tester.dart';
void main() {
@ -3631,6 +3632,55 @@ void main() {
expect(tester.takeException(), isNull);
});
testWidgets('NavigationRail labels shall not overflow if longer texts provided - extended', (WidgetTester tester) async {
// Regression test for https://github.com/flutter/flutter/issues/110901.
// The navigation rail has a narrow width constraint. The text should wrap.
const String normalLabel = 'Abc';
const String longLabel = 'Very long bookmark text for navigation destination';
await tester.pumpWidget(MaterialApp(
home: Builder(
builder: (BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
SizedBox(
width: 140.0,
child: NavigationRail(
selectedIndex: 1,
extended: true,
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text(normalLabel),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.bookmark),
label: Text(longLabel),
),
],
),
),
const Expanded(
child: Text('body'),
),
],
),
);
},
),
));
expect(find.byType(NavigationRail), findsOneWidget);
expect(find.text(normalLabel), findsOneWidget);
expect(find.text(longLabel), findsOneWidget);
// If the widget manages to layout without throwing an overflow exception,
// the test passes.
expect(tester.takeException(), isNull);
});
group('Material 2', () {
// These tests are only relevant for Material 2. Once Material 2
// support is deprecated and the APIs are removed, these tests