Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace NavigationRail with YaruNavigationRail #201

Merged
merged 14 commits into from Oct 6, 2022
Merged

Replace NavigationRail with YaruNavigationRail #201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3a78718
Merge main
Jupi007 Oct 4, 2022
a3f9cbe
Add YaruNavigationRail
Jupi007 Oct 4, 2022
6a867a8
Fix analyzing issue
Jupi007 Oct 4, 2022
3446901
Increase font-size and padding-y
Jupi007 Oct 5, 2022
1317824
Bigger gap and font weight 500
Jupi007 Oct 5, 2022
d4594ea
Add padding top and adjust font-size
Jupi007 Oct 6, 2022
95c5d2b
Add transition between states
Jupi007 Oct 6, 2022
21a539e
Merge branch 'main' into yaru_navigation_rail
Jupi007 Oct 6, 2022
1a6fa82
Merge branch 'main' into yaru_navigation_rail
Jupi007 Oct 6, 2022
5ab7c61
Use _buildTitle()
Jupi007 Oct 6, 2022
c7f055e
Use enum for rail styling
Jupi007 Oct 6, 2022
5c314df
Split code for readability
Jupi007 Oct 6, 2022
8d26898
Cleanups, comments and asserts
Jupi007 Oct 6, 2022
be74792
Add animation on selected icon background
Jupi007 Oct 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 5 additions & 4 deletions example/lib/main.dart
View file
Open in desktop
Expand Up @@ -82,11 +82,12 @@ class _CompactPage extends StatelessWidget {
final width = MediaQuery.of(context).size.width;

return YaruCompactLayout(
extendNavigationRail: width > 1000,
style: width > 1000
? YaruNavigationRailStyle.labelledExtended
: width > 500
? YaruNavigationRailStyle.labelled
: YaruNavigationRailStyle.compact,
pageItems: [configItem] + examplePageItems,
backgroundColor: Theme.of(context).brightness == Brightness.light
? Colors.white
: Theme.of(context).colorScheme.onSurface.withOpacity(0.03),
);
}
}
Expand Down
169 changes: 58 additions & 111 deletions lib/src/pages/layouts/yaru_compact_layout.dart
View file
Open in desktop
Expand Up @@ -2,41 +2,24 @@ import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';
import '../../../yaru_widgets.dart';

/// A responsive layout switching between [YaruWideLayout]
/// and [YaruNarrowLayout] depening on the screen width.
/// A page layout which use a [YaruNavigationRail] on left for page navigation
class YaruCompactLayout extends StatefulWidget {
const YaruCompactLayout({
super.key,
required this.pageItems,
this.showSelectedLabels = true,
this.showUnselectedLabels = true,
this.labelType = NavigationRailLabelType.none,
this.extendNavigationRail = false,
this.style = YaruNavigationRailStyle.compact,
this.initialIndex = 0,
this.backgroundColor,
});

/// The list of [YaruPageItem] has to be provided.
/// A list of page destinations
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;
/// Define the navigation rail style, see [YaruNavigationRailStyle]
final YaruNavigationRailStyle style;

/// The index of the [YaruPageItem] that is selected from [pageItems]
final int initialIndex;

final Color? backgroundColor;

@override
State<YaruCompactLayout> createState() => _YaruCompactLayoutState();
}
Expand All @@ -61,9 +44,6 @@ class _YaruCompactLayoutState extends State<YaruCompactLayout> {

@override
Widget build(BuildContext context) {
final unselectedTextColor =
Theme.of(context).colorScheme.onSurface.withOpacity(0.8);
final selectedTextColor = Theme.of(context).colorScheme.onSurface;
return LayoutBuilder(
builder: (context, constraint) {
return SafeArea(
Expand All @@ -72,97 +52,64 @@ class _YaruCompactLayoutState extends State<YaruCompactLayout> {
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
controller: _controller,
child: ConstrainedBox(
constraints:
BoxConstraints(minHeight: constraint.maxHeight),
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: widget.backgroundColor ??
Theme.of(context).colorScheme.background,
selectedIndex: _index,
onDestinationSelected: (index) {
if (widget.pageItems[index].onTap != null) {
widget.pageItems[index].onTap?.call(context);
}
setState(() {
_index = index;
});
},
labelType: widget.labelType,
destinations: [
for (int i = 0; i < widget.pageItems.length; i++)
NavigationRailDestination(
icon: widget.pageItems[i].iconBuilder(
context,
i == _index,
),
selectedIcon: widget.pageItems[i].iconBuilder(
context,
i == _index,
),
label:
widget.pageItems[i].titleBuilder(context),
)
],
),
),
),
),
),
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),
),
),
)
_buildNavigationRail(context, constraint),
_buildVerticalSeparator(),
_buildPageView(context),
],
),
),
);
},
);
}

Widget _buildNavigationRail(BuildContext context, BoxConstraints constraint) {
return SizedBox(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
controller: _controller,
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraint.maxHeight),
child: YaruNavigationRail(
style: widget.style,
selectedIndex: _index,
onDestinationSelected: (index) {
if (widget.pageItems[index].onTap != null) {
widget.pageItems[index].onTap!.call(context);
}
setState(() {
_index = index;
});
},
destinations: widget.pageItems,
),
),
),
);
}

Widget _buildVerticalSeparator() {
return const VerticalDivider(thickness: 1, width: 1);
}

Widget _buildPageView(BuildContext context) {
return 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),
),
),
);
}
}