-
Notifications
You must be signed in to change notification settings - Fork 32
/
yaru_compact_layout.dart
133 lines (122 loc) · 4.76 KB
/
yaru_compact_layout.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';
import 'package:yaru_widgets/yaru_widgets.dart';
/// A responsive layout switching between [YaruWideLayout]
/// and [YaruNarrowLayout] depening on the screen width.
class YaruCompactLayout extends StatefulWidget {
const YaruCompactLayout({
Key? key,
required this.pageItems,
this.showSelectedLabels = true,
this.showUnselectedLabels = true,
this.labelType = NavigationRailLabelType.none,
this.extendNavigationRail = false,
this.initialIndex = 0,
}) : super(key: key);
/// The list of [YaruPageItem] has to be provided.
final List<YaruPageItem> pageItems;
/// Optional bool to hide selected labels in the [BottomNavigationBar]
final bool showSelectedLabels;
/// Optional bool to hide unselected labels in the [BottomNavigationBar]
final bool showUnselectedLabels;
/// Optionally control the labels of the [NavigationRail]
final NavigationRailLabelType labelType;
/// Defines if the labels are shown right to the icon
/// of the [NavigationRail] in the wide layout
final bool extendNavigationRail;
/// The index of the [YaruPageItem] that is selected from [pageItems]
final int initialIndex;
@override
State<YaruCompactLayout> createState() => _YaruCompactLayoutState();
}
class _YaruCompactLayoutState extends State<YaruCompactLayout> {
late int _index;
@override
void initState() {
_index = widget.initialIndex;
super.initState();
}
@override
Widget build(BuildContext context) {
final unselectedTextColor =
Theme.of(context).colorScheme.onSurface.withOpacity(0.8);
final selectedTextColor = Theme.of(context).colorScheme.onSurface;
return SafeArea(
child: Scaffold(
body: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SingleChildScrollView(
child: IntrinsicHeight(
child: NavigationRail(
extended: widget.labelType == NavigationRailLabelType.none
? widget.extendNavigationRail
: false,
unselectedIconTheme: IconThemeData(
color: unselectedTextColor,
),
indicatorColor:
Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
selectedIconTheme: IconThemeData(
color: selectedTextColor,
),
selectedLabelTextStyle: TextStyle(
overflow: TextOverflow.ellipsis,
color: selectedTextColor,
fontSize: 13,
fontWeight: FontWeight.w500,
),
unselectedLabelTextStyle: TextStyle(
color: unselectedTextColor,
overflow: TextOverflow.ellipsis,
fontSize: 13,
fontWeight: FontWeight.w500,
),
backgroundColor: Theme.of(context).colorScheme.background,
selectedIndex: _index,
onDestinationSelected: (index) {
setState(() => _index = index);
},
labelType: widget.labelType,
destinations: widget.pageItems
.map(
(pageItem) => NavigationRailDestination(
icon: pageItem.itemWidget ?? Icon(pageItem.iconData),
selectedIcon: pageItem.selectedItemWidget ??
pageItem.itemWidget ??
(pageItem.selectedIconData != null
? Icon(pageItem.selectedIconData)
: Icon(pageItem.iconData)),
label: pageItem.titleBuilder(context),
),
)
.toList(),
),
),
),
const VerticalDivider(thickness: 1, width: 1),
Expanded(
child: Theme(
data: Theme.of(context).copyWith(
pageTransitionsTheme: YaruPageTransitionsTheme.vertical,
),
child: Navigator(
pages: [
MaterialPage(
key: ValueKey(_index),
child: widget.pageItems.length > _index
? widget.pageItems[_index].builder(context)
: widget.pageItems[0].builder(context),
),
],
onPopPage: (route, result) => route.didPop(result),
),
),
)
],
),
),
);
}
}