Skip to content

Commit eca0925

Browse files
TahaTesserTahaTesser
authored
Add Material 3 NavigationRail example and improve Material 2 example (flutter#101345)
1 parent 3c4d7a1 commit eca0925

File tree

6 files changed

+512
-20
lines changed

6 files changed

+512
-20
lines changed

‎examples/api/lib/material/navigation_rail/navigation_rail.0.dart

Lines changed: 117 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,27 @@ void main() => runApp(const MyApp());
1111
class MyApp extends StatelessWidget {
1212
const MyApp({Key? key}) : super(key: key);
1313

14-
static const String _title = 'Flutter Code Sample';
15-
1614
@override
1715
Widget build(BuildContext context) {
1816
return const MaterialApp(
19-
title: _title,
20-
home: MyStatefulWidget(),
17+
home: NavRailExample(),
2118
);
2219
}
2320
}
2421

25-
class MyStatefulWidget extends StatefulWidget {
26-
const MyStatefulWidget({Key? key}) : super(key: key);
22+
class NavRailExample extends StatefulWidget {
23+
const NavRailExample({Key? key}) : super(key: key);
2724

2825
@override
29-
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
26+
State<NavRailExample> createState() => _NavRailExampleState();
3027
}
3128

32-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
29+
class _NavRailExampleState extends State<NavRailExample> {
3330
int _selectedIndex = 0;
31+
NavigationRailLabelType labelType = NavigationRailLabelType.all;
32+
bool showLeading = false;
33+
bool showTrailing = false;
34+
double groupAligment = -1.0;
3435

3536
@override
3637
Widget build(BuildContext context) {
@@ -39,12 +40,26 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
3940
children: <Widget>[
4041
NavigationRail(
4142
selectedIndex: _selectedIndex,
43+
groupAlignment: groupAligment,
4244
onDestinationSelected: (int index) {
4345
setState(() {
4446
_selectedIndex = index;
4547
});
4648
},
47-
labelType: NavigationRailLabelType.selected,
49+
labelType: labelType,
50+
leading: showLeading ? FloatingActionButton(
51+
elevation: 0,
52+
onPressed: () {
53+
// Add your onPressed code here!
54+
},
55+
child: const Icon(Icons.add),
56+
) : const SizedBox(),
57+
trailing: showTrailing ? IconButton(
58+
onPressed: () {
59+
// Add your onPressed code here!
60+
},
61+
icon: const Icon(Icons.more_horiz_rounded),
62+
) : const SizedBox(),
4863
destinations: const <NavigationRailDestination>[
4964
NavigationRailDestination(
5065
icon: Icon(Icons.favorite_border),
@@ -65,11 +80,100 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
6580
),
6681
const VerticalDivider(thickness: 1, width: 1),
6782
// This is the main content.
68-
Expanded(
69-
child: Center(
70-
child: Text('selectedIndex: $_selectedIndex'),
83+
Expanded(
84+
child: Column(
85+
mainAxisAlignment: MainAxisAlignment.center,
86+
children: <Widget>[
87+
Text('selectedIndex: $_selectedIndex'),
88+
const SizedBox(height: 20),
89+
Text('Label type: ${labelType.name}'),
90+
const SizedBox(height: 10),
91+
OverflowBar(
92+
spacing: 10.0,
93+
children: <Widget>[
94+
ElevatedButton(
95+
onPressed: () {
96+
setState(() {
97+
labelType = NavigationRailLabelType.none;
98+
});
99+
},
100+
child: const Text('None'),
101+
),
102+
ElevatedButton(
103+
onPressed: () {
104+
setState(() {
105+
labelType = NavigationRailLabelType.selected;
106+
});
107+
},
108+
child: const Text('Selected'),
109+
),
110+
ElevatedButton(
111+
onPressed: () {
112+
setState(() {
113+
labelType = NavigationRailLabelType.all;
114+
});
115+
},
116+
child: const Text('All'),
117+
),
118+
],
119+
),
120+
const SizedBox(height: 20),
121+
Text('Group alignment: $groupAligment'),
122+
const SizedBox(height: 10),
123+
OverflowBar(
124+
spacing: 10.0,
125+
children: <Widget>[
126+
ElevatedButton(
127+
onPressed: () {
128+
setState(() {
129+
groupAligment = -1.0;
130+
});
131+
},
132+
child: const Text('Top'),
133+
),
134+
ElevatedButton(
135+
onPressed: () {
136+
setState(() {
137+
groupAligment = 0.0;
138+
});
139+
},
140+
child: const Text('Center'),
141+
),
142+
ElevatedButton(
143+
onPressed: () {
144+
setState(() {
145+
groupAligment = 1.0;
146+
});
147+
},
148+
child: const Text('Bottom'),
149+
),
150+
],
151+
),
152+
const SizedBox(height: 20),
153+
OverflowBar(
154+
spacing: 10.0,
155+
children: <Widget>[
156+
ElevatedButton(
157+
onPressed: () {
158+
setState(() {
159+
showLeading = !showLeading;
160+
});
161+
},
162+
child: Text(showLeading ? 'Hide Leading' : 'Show Leading'),
163+
),
164+
ElevatedButton(
165+
onPressed: () {
166+
setState(() {
167+
showTrailing = !showTrailing;
168+
});
169+
},
170+
child: Text(showTrailing ? 'Hide Trailing' : 'Show Trailing'),
171+
),
172+
],
173+
),
174+
],
175+
),
71176
),
72-
)
73177
],
74178
),
75179
);

‎examples/api/lib/material/navigation_rail/navigation_rail.1.dart

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
// Flutter code sample for NavigationRail
6+
7+
import 'package:flutter/material.dart';
8+
9+
void main() => runApp(const MyApp());
10+
11+
class MyApp extends StatelessWidget {
12+
const MyApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return MaterialApp(
17+
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
18+
home: const NavRailExample(),
19+
);
20+
}
21+
}
22+
23+
class NavRailExample extends StatefulWidget {
24+
const NavRailExample({Key? key}) : super(key: key);
25+
26+
@override
27+
State<NavRailExample> createState() => _NavRailExampleState();
28+
}
29+
30+
class _NavRailExampleState extends State<NavRailExample> {
31+
int _selectedIndex = 0;
32+
NavigationRailLabelType labelType = NavigationRailLabelType.all;
33+
bool showLeading = false;
34+
bool showTrailing = false;
35+
double groupAligment = -1.0;
36+
37+
@override
38+
Widget build(BuildContext context) {
39+
return Scaffold(
40+
body: SafeArea(
41+
child: Row(
42+
children: <Widget>[
43+
NavigationRail(
44+
selectedIndex: _selectedIndex,
45+
groupAlignment: groupAligment,
46+
onDestinationSelected: (int index) {
47+
setState(() {
48+
_selectedIndex = index;
49+
});
50+
},
51+
labelType: labelType,
52+
leading: showLeading ? FloatingActionButton(
53+
elevation: 0,
54+
onPressed: () {
55+
// Add your onPressed code here!
56+
},
57+
child: const Icon(Icons.add),
58+
) : const SizedBox(),
59+
trailing: showTrailing ? IconButton(
60+
onPressed: () {
61+
// Add your onPressed code here!
62+
},
63+
icon: const Icon(Icons.more_horiz_rounded),
64+
) : const SizedBox(),
65+
destinations: const <NavigationRailDestination>[
66+
NavigationRailDestination(
67+
icon: Icon(Icons.favorite_border),
68+
selectedIcon: Icon(Icons.favorite),
69+
label: Text('First'),
70+
),
71+
NavigationRailDestination(
72+
icon: Icon(Icons.bookmark_border),
73+
selectedIcon: Icon(Icons.book),
74+
label: Text('Second'),
75+
),
76+
NavigationRailDestination(
77+
icon: Icon(Icons.star_border),
78+
selectedIcon: Icon(Icons.star),
79+
label: Text('Third'),
80+
),
81+
],
82+
),
83+
const VerticalDivider(thickness: 1, width: 1),
84+
// This is the main content.
85+
Expanded(
86+
child: Column(
87+
mainAxisAlignment: MainAxisAlignment.center,
88+
children: <Widget>[
89+
Text('selectedIndex: $_selectedIndex'),
90+
const SizedBox(height: 20),
91+
Text('Label type: ${labelType.name}'),
92+
const SizedBox(height: 10),
93+
OverflowBar(
94+
spacing: 10.0,
95+
children: <Widget>[
96+
ElevatedButton(
97+
onPressed: () {
98+
setState(() {
99+
labelType = NavigationRailLabelType.none;
100+
});
101+
},
102+
child: const Text('None'),
103+
),
104+
ElevatedButton(
105+
onPressed: () {
106+
setState(() {
107+
labelType = NavigationRailLabelType.selected;
108+
});
109+
},
110+
child: const Text('Selected'),
111+
),
112+
ElevatedButton(
113+
onPressed: () {
114+
setState(() {
115+
labelType = NavigationRailLabelType.all;
116+
});
117+
},
118+
child: const Text('All'),
119+
),
120+
],
121+
),
122+
const SizedBox(height: 20),
123+
Text('Group alignment: $groupAligment'),
124+
const SizedBox(height: 10),
125+
OverflowBar(
126+
spacing: 10.0,
127+
children: <Widget>[
128+
ElevatedButton(
129+
onPressed: () {
130+
setState(() {
131+
groupAligment = -1.0;
132+
});
133+
},
134+
child: const Text('Top'),
135+
),
136+
ElevatedButton(
137+
onPressed: () {
138+
setState(() {
139+
groupAligment = 0.0;
140+
});
141+
},
142+
child: const Text('Center'),
143+
),
144+
ElevatedButton(
145+
onPressed: () {
146+
setState(() {
147+
groupAligment = 1.0;
148+
});
149+
},
150+
child: const Text('Bottom'),
151+
),
152+
],
153+
),
154+
const SizedBox(height: 20),
155+
OverflowBar(
156+
spacing: 10.0,
157+
children: <Widget>[
158+
ElevatedButton(
159+
onPressed: () {
160+
setState(() {
161+
showLeading = !showLeading;
162+
});
163+
},
164+
child: Text(showLeading ? 'Hide Leading' : 'Show Leading'),
165+
),
166+
ElevatedButton(
167+
onPressed: () {
168+
setState(() {
169+
showTrailing = !showTrailing;
170+
});
171+
},
172+
child: Text(showTrailing ? 'Hide Trailing' : 'Show Trailing'),
173+
),
174+
],
175+
),
176+
],
177+
),
178+
),
179+
],
180+
),
181+
),
182+
);
183+
}
184+
}

‎examples/api/lib/material/navigation_rail/navigation_rail.extended_animation.0.dart

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,11 @@ void main() => runApp(const MyApp());
1313
class MyApp extends StatelessWidget {
1414
const MyApp({Key? key}) : super(key: key);
1515

16-
static const String _title = 'NavigationRail.extendedAnimation Sample';
17-
1816
@override
1917
Widget build(BuildContext context) {
20-
return MaterialApp(
21-
title: _title,
18+
return const MaterialApp(
2219
home: Scaffold(
23-
appBar: AppBar(title: const Text(_title)),
24-
body: const MyNavigationRail(),
20+
body: MyNavigationRail(),
2521
),
2622
);
2723
}
@@ -78,7 +74,14 @@ class _MyNavigationRailState extends State<MyNavigationRail> {
7874
// This is the main content.
7975
Expanded(
8076
child: Center(
81-
child: Text('selectedIndex: $_selectedIndex'),
77+
child: Column(
78+
mainAxisAlignment: MainAxisAlignment.center,
79+
children: <Widget>[
80+
const Text('Tap on FloatingActionButton to expand'),
81+
const SizedBox(height: 20),
82+
Text('selectedIndex: $_selectedIndex'),
83+
],
84+
),
8285
),
8386
)
8487
],

0 commit comments

Comments
 (0)