Skip to content

Commit

Permalink
馃悰 : FIX : Long labels overflowing in extended navigation rail. (#145474)
Browse files Browse the repository at this point in the history
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 #110901.

*NO breaking changes.*
  • Loading branch information
aliasgar4558 committed May 8, 2024
1 parent 1fba66d commit 4d6c00c
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 8 deletions.
19 changes: 11 additions & 8 deletions packages/flutter/lib/src/material/navigation_rail.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
50 changes: 50 additions & 0 deletions packages/flutter/test/material/navigation_rail_test.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 4d6c00c

Please sign in to comment.