Skip to content

F
Front-End
Unverified Commit fd7f45a8 authored by Mohammad Bagher Fakouri's avatar Mohammad Bagher Fakouri Committed by GitHub
Browse files
Options

Add `SingleChildScrollView` for `NavigationRail` (#137415) 

## Description
Add `SingleChildScrollView` to `NavigationRail` for scrolling.
Closes: #89167
parent f727948f
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 56 deletions
packages/flutter/lib/src/material/navigation_rail.dart
View file @ fd7f45a8
...@@ -439,39 +439,41 @@ class _NavigationRailState extends State<NavigationRail> with TickerProviderStat ...@@ -439,39 +439,41 @@ class _NavigationRailState extends State<NavigationRail> with TickerProviderStat
Expanded( Expanded(
child: Align( child: Align(
alignment: Alignment(0, groupAlignment), alignment: Alignment(0, groupAlignment),
child: Column( child: SingleChildScrollView(
mainAxisSize: MainAxisSize.min, child: Column(
children: <Widget>[ mainAxisSize: MainAxisSize.min,
for (int i = 0; i < widget.destinations.length; i += 1) children: <Widget>[
_RailDestination( for (int i = 0; i < widget.destinations.length; i += 1)
minWidth: minWidth, _RailDestination(
minExtendedWidth: minExtendedWidth, minWidth: minWidth,
extendedTransitionAnimation: _extendedAnimation, minExtendedWidth: minExtendedWidth,
selected: widget.selectedIndex == i, extendedTransitionAnimation: _extendedAnimation,
icon: widget.selectedIndex == i ? widget.destinations[i].selectedIcon : widget.destinations[i].icon, selected: widget.selectedIndex == i,
label: widget.destinations[i].label, icon: widget.selectedIndex == i ? widget.destinations[i].selectedIcon : widget.destinations[i].icon,
destinationAnimation: _destinationAnimations[i], label: widget.destinations[i].label,
labelType: labelType, destinationAnimation: _destinationAnimations[i],
iconTheme: widget.selectedIndex == i ? selectedIconTheme : effectiveUnselectedIconTheme, labelType: labelType,
labelTextStyle: widget.selectedIndex == i ? selectedLabelTextStyle : unselectedLabelTextStyle, iconTheme: widget.selectedIndex == i ? selectedIconTheme : effectiveUnselectedIconTheme,
padding: widget.destinations[i].padding, labelTextStyle: widget.selectedIndex == i ? selectedLabelTextStyle : unselectedLabelTextStyle,
useIndicator: useIndicator, padding: widget.destinations[i].padding,
indicatorColor: useIndicator ? indicatorColor : null, useIndicator: useIndicator,
indicatorShape: useIndicator ? indicatorShape : null, indicatorColor: useIndicator ? indicatorColor : null,
onTap: () { indicatorShape: useIndicator ? indicatorShape : null,
if (widget.onDestinationSelected != null) { onTap: () {
widget.onDestinationSelected!(i); if (widget.onDestinationSelected != null) {
} widget.onDestinationSelected!(i);
}, }
indexLabel: localizations.tabLabel( },
tabIndex: i + 1, indexLabel: localizations.tabLabel(
tabCount: widget.destinations.length, tabIndex: i + 1,
tabCount: widget.destinations.length,
),
disabled: widget.destinations[i].disabled,
), ),
disabled: widget.destinations[i].disabled, if (widget.trailing != null)
), widget.trailing!,
if (widget.trailing != null) ],
widget.trailing!, ),
],
), ),
), ),
), ),
......
packages/flutter/test/material/navigation_rail_test.dart
View file @ fd7f45a8
...@@ -3605,6 +3605,62 @@ void main() { ...@@ -3605,6 +3605,62 @@ void main() {
expect(inkFeatures, paints..circle(color: Colors.transparent)); expect(inkFeatures, paints..circle(color: Colors.transparent));
}, skip: kIsWeb && !isCanvasKit); // https://github.com/flutter/flutter/issues/99933 }, skip: kIsWeb && !isCanvasKit); // https://github.com/flutter/flutter/issues/99933
testWidgets('NavigationRail can scroll in low height', (WidgetTester tester) async {
// This is a regression test for https://github.com/flutter/flutter/issues/89167.
await tester.pumpWidget(
MaterialApp(
theme: ThemeData(
useMaterial3: true,
),
home: Builder(
builder: (BuildContext context) {
return MediaQuery(
// Set Screen height with 300
data: MediaQuery.of(context).copyWith(size: const Size(800, 300)),
child: Scaffold(
body: Row(
children: <Widget>[
// Set NavigationRail height with 100
SizedBox(
height: 100,
child: NavigationRail(
selectedIndex: 0,
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('Abc'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.bookmark),
label: Text('Def'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text('Ghi'),
),
],
),
),
const Expanded(
child: Text('body'),
),
],
),
),
);
},
),
),
);
final ScrollableState scrollable = tester.state(find.byType(Scrollable));
scrollable.position.jumpTo(500.0);
expect(scrollable.position.pixels, equals(500.0));
});
group('Material 2', () { group('Material 2', () {
// These tests are only relevant for Material 2. Once Material 2 // These tests are only relevant for Material 2. Once Material 2
// support is deprecated and the APIs are removed, these tests // support is deprecated and the APIs are removed, these tests
...@@ -5433,31 +5489,34 @@ TestSemantics _expectedSemantics() { ...@@ -5433,31 +5489,34 @@ TestSemantics _expectedSemantics() {
flags: <SemanticsFlag>[SemanticsFlag.scopesRoute], flags: <SemanticsFlag>[SemanticsFlag.scopesRoute],
children: <TestSemantics>[ children: <TestSemantics>[
TestSemantics( TestSemantics(
flags: <SemanticsFlag>[ flags: <SemanticsFlag>[SemanticsFlag.hasImplicitScrolling],
SemanticsFlag.isSelected, children: <TestSemantics>[
SemanticsFlag.isFocusable, TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.isSelected,
SemanticsFlag.isFocusable],
actions: <SemanticsAction>[SemanticsAction.tap],
label: 'Abc\nTab 1 of 4',
textDirection: TextDirection.ltr,
),
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.isFocusable],
actions: <SemanticsAction>[SemanticsAction.tap],
label: 'Def\nTab 2 of 4',
textDirection: TextDirection.ltr,
),
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.isFocusable],
actions: <SemanticsAction>[SemanticsAction.tap],
label: 'Ghi\nTab 3 of 4',
textDirection: TextDirection.ltr,
),
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.isFocusable],
actions: <SemanticsAction>[SemanticsAction.tap],
label: 'Jkl\nTab 4 of 4',
textDirection: TextDirection.ltr,
),
], ],
actions: <SemanticsAction>[SemanticsAction.tap],
label: 'Abc\nTab 1 of 4',
textDirection: TextDirection.ltr,
),
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.isFocusable],
actions: <SemanticsAction>[SemanticsAction.tap],
label: 'Def\nTab 2 of 4',
textDirection: TextDirection.ltr,
),
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.isFocusable],
actions: <SemanticsAction>[SemanticsAction.tap],
label: 'Ghi\nTab 3 of 4',
textDirection: TextDirection.ltr,
),
TestSemantics(
flags: <SemanticsFlag>[SemanticsFlag.isFocusable],
actions: <SemanticsAction>[SemanticsAction.tap],
label: 'Jkl\nTab 4 of 4',
textDirection: TextDirection.ltr,
), ),
TestSemantics( TestSemantics(
label: 'body', label: 'body',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab