Skip to content

Commit

Permalink
Fix NavigationRail examples overflow alignment (flutter#159937)
Browse files Browse the repository at this point in the history 
Fix flutter#160270

Fix the NavigationRail examples overflow alignment by replacing it with
the SegmentedButton widget.

### Before
Example 1:
<img
src="https://github.com/user-attachments/assets/b9f54cd2-b2d1-44ee-a159-f1f04ed011e2"
alt="NavigationRail Example 1 - Before" height="450">

Example: 2:
<img
src="https://github.com/user-attachments/assets/be78bee7-f03d-40ff-ae36-679416c9c3d2"
alt="NavigationRail Example 2 - Before" height="450">

### After
Example 1:
<img
src="https://github.com/user-attachments/assets/c6a3f060-dc9a-44d3-9ab3-3eea5f6183d6"
alt="NavigationRail Example 1 - After" height="450">

Example 2:
<img
src="https://github.com/user-attachments/assets/6b35753b-e2ab-4053-8dd7-d983531b2c74"
alt="NavigationRail Example 2 - After" height="450">




## Pre-launch Checklist

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

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

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

---------

Co-authored-by: Taha Tesser <tessertaha@gmail.com>
  • Loading branch information
@yaostyle @TahaTesser
yaostyle and TahaTesser authored Jan 31, 2025
1 parent 6830960 commit 1416381
Show file tree
Hide file tree
Showing 5 changed files with 142 additions and 448 deletions.
256 changes: 116 additions & 140 deletions examples/api/lib/material/navigation_rail/navigation_rail.0.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,151 +34,127 @@ class _NavRailExampleState extends State<NavRailExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _selectedIndex,
groupAlignment: groupAlignment,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: labelType,
leading:
showLeading
? FloatingActionButton(
elevation: 0,
onPressed: () {
// Add your onPressed code here!
},
child: const Icon(Icons.add),
)
: const SizedBox(),
trailing:
showTrailing
? IconButton(
onPressed: () {
// Add your onPressed code here!
},
icon: const Icon(Icons.more_horiz_rounded),
)
: const SizedBox(),
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('First'),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text('Second'),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text('Third'),
),
],
),
const VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('selectedIndex: $_selectedIndex'),
const SizedBox(height: 20),
Text('Label type: ${labelType.name}'),
const SizedBox(height: 10),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.none;
});
},
child: const Text('None'),
),
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.selected;
});
},
child: const Text('Selected'),
),
ElevatedButton(
onPressed: () {
setState(() {
labelType = NavigationRailLabelType.all;
});
},
child: const Text('All'),
),
],
body: SafeArea(
child: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _selectedIndex,
groupAlignment: groupAlignment,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: labelType,
leading:
showLeading
? FloatingActionButton(
elevation: 0,
onPressed: () {
// Add your onPressed code here!
},
child: const Icon(Icons.add),
)
: const SizedBox(),
trailing:
showTrailing
? IconButton(
onPressed: () {
// Add your onPressed code here!
},
icon: const Icon(Icons.more_horiz_rounded),
)
: const SizedBox(),
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.favorite_border),
selectedIcon: Icon(Icons.favorite),
label: Text('First'),
),
const SizedBox(height: 20),
Text('Group alignment: $groupAlignment'),
const SizedBox(height: 10),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = -1.0;
});
},
child: const Text('Top'),
),
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = 0.0;
});
},
child: const Text('Center'),
),
ElevatedButton(
onPressed: () {
setState(() {
groupAlignment = 1.0;
});
},
child: const Text('Bottom'),
),
],
NavigationRailDestination(
icon: Badge(child: Icon(Icons.bookmark_border)),
selectedIcon: Badge(child: Icon(Icons.book)),
label: Text('Second'),
),
const SizedBox(height: 20),
OverflowBar(
spacing: 10.0,
children: <Widget>[
ElevatedButton(
onPressed: () {
setState(() {
showLeading = !showLeading;
});
},
child: Text(showLeading ? 'Hide Leading' : 'Show Leading'),
),
ElevatedButton(
onPressed: () {
setState(() {
showTrailing = !showTrailing;
});
},
child: Text(showTrailing ? 'Hide Trailing' : 'Show Trailing'),
),
],
NavigationRailDestination(
icon: Badge(label: Text('4'), child: Icon(Icons.star_border)),
selectedIcon: Badge(label: Text('4'), child: Icon(Icons.star)),
label: Text('Third'),
),
],
),
),
],
const VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('selectedIndex: $_selectedIndex'),
const SizedBox(height: 20),
Text('Label type: ${labelType.name}'),
const SizedBox(height: 10),
SegmentedButton<NavigationRailLabelType>(
segments: const <ButtonSegment<NavigationRailLabelType>>[
ButtonSegment<NavigationRailLabelType>(
value: NavigationRailLabelType.none,
label: Text('None'),
),
ButtonSegment<NavigationRailLabelType>(
value: NavigationRailLabelType.selected,
label: Text('Selected'),
),
ButtonSegment<NavigationRailLabelType>(
value: NavigationRailLabelType.all,
label: Text('All'),
),
],
selected: <NavigationRailLabelType>{labelType},
onSelectionChanged: (Set<NavigationRailLabelType> newSelection) {
setState(() {
labelType = newSelection.first;
});
},
),
const SizedBox(height: 20),
Text('Group alignment: $groupAlignment'),
const SizedBox(height: 10),
SegmentedButton<double>(
segments: const <ButtonSegment<double>>[
ButtonSegment<double>(value: -1.0, label: Text('Top')),
ButtonSegment<double>(value: 0.0, label: Text('Center')),
ButtonSegment<double>(value: 1.0, label: Text('Bottom')),
],
selected: <double>{groupAlignment},
onSelectionChanged: (Set<double> newSelection) {
setState(() {
groupAlignment = newSelection.first;
});
},
),
const SizedBox(height: 20),
SwitchListTile(
title: Text(showLeading ? 'Hide Leading' : 'Show Leading'),
value: showLeading,
onChanged: (bool value) {
setState(() {
showLeading = value;
});
},
),
SwitchListTile(
title: Text(showTrailing ? 'Hide Trailing' : 'Show Trailing'),
value: showTrailing,
onChanged: (bool value) {
setState(() {
showTrailing = value;
});
},
),
],
),
),
],
),
),
);
}
Expand Down
Loading

0 comments on commit 1416381

Please sign in to comment.