Skip to content

Commit

Permalink
Readjusted navigation bar and navigation rail [#53]
Browse files Browse the repository at this point in the history
  • Loading branch information
@sunarya-thito
sunarya-thito committed Aug 13, 2024
1 parent d597739 commit 8d38457
Show file tree
Hide file tree
Showing 5 changed files with 418 additions and 67 deletions.
113 changes: 104 additions & 9 deletions shadcn_flutter/docs/lib/pages/docs/components/navigation_bar/navigation_bar_example_1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,38 +8,133 @@ class NavigationBarExample1 extends StatefulWidget {
class _NavigationBarExample1State extends State<NavigationBarExample1> {
int selected = 0;

NavigationBarAlignment alignment = NavigationBarAlignment.spaceAround;
bool expands = false;
NavigationLabelType labelType = NavigationLabelType.none;
bool customButtonStyle = false;

Widget buildButton(int i, String label, IconData icon) {
return NavigationButton(
style: customButtonStyle
? const ButtonStyle.muted(density: ButtonDensity.icon)
: null,
selectedStyle: customButtonStyle
? const ButtonStyle.fixed(density: ButtonDensity.icon)
: null,
onChanged: (value) {
setState(() {
selected = i;
});
},
selected: selected == i,
label: Text(label),
selected: selected == i,
child: Icon(icon),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.primaries[Colors.primaries.length - selected - 1],
)),
return OutlinedContainer(
width: 500,
height: 400,
child: Scaffold(
footers: [
const Divider(),
NavigationBar(
alignment: alignment,
labelType: labelType,
expands: expands,
children: [
buildButton(0, 'Home', BootstrapIcons.house),
buildButton(1, 'Explore', BootstrapIcons.compass),
buildButton(2, 'Library', BootstrapIcons.musicNoteList),
buildButton(3, 'Profile', BootstrapIcons.person),
buildButton(4, 'App', BootstrapIcons.appIndicator),
],
),
],
child: Container(
color: Colors.primaries[Colors.primaries.length - selected - 1],
padding: EdgeInsets.all(24),
child: Card(
child: Wrap(
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runSpacing: 8,
spacing: 8,
children: [
Select<NavigationBarAlignment>(
value: alignment,
itemBuilder:
(BuildContext context, NavigationBarAlignment item) {
return Text(item.name);
},
popupConstraints: BoxConstraints.tight(const Size(200, 200)),
onChanged: (value) {
if (value != null) {
setState(() {
alignment = value;
});
}
},
children: [
for (var value in NavigationBarAlignment.values)
SelectItemButton(
value: value,
child: Text(value.name),
),
],
),
Select<NavigationLabelType>(
value: labelType,
itemBuilder:
(BuildContext context, NavigationLabelType item) {
return Text(item.name);
},
popupConstraints: BoxConstraints.tight(const Size(200, 200)),
onChanged: (value) {
if (value != null) {
setState(() {
labelType = value;
});
}
},
children: [
for (var value in NavigationLabelType.values)
// expanded is used for the navigation sidebar
if (value != NavigationLabelType.expanded)
SelectItemButton(
value: value,
child: Text(value.name),
),
],
),
Checkbox(
state:
expands ? CheckboxState.checked : CheckboxState.unchecked,
onChanged: (value) {
setState(() {
expands = value == CheckboxState.checked;
});
},
trailing: Text('Expands'),
),
Checkbox(
state: customButtonStyle
? CheckboxState.checked
: CheckboxState.unchecked,
onChanged: (value) {
setState(() {
customButtonStyle = value == CheckboxState.checked;
});
},
trailing: Text('Custom Button Style'),
),
],
),
),
),
),
);
}
Expand Down
6 changes: 1 addition & 5 deletions shadcn_flutter/docs/lib/pages/docs/components/navigation_bar_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@ class NavigationBarExample extends StatelessWidget {
children: [
WidgetUsageExample(
title: 'Example',
child: SizedBox(
width: 500,
height: 400,
child: OutlinedContainer(child: NavigationBarExample1()),
),
child: NavigationBarExample1(),
path:
'lib/pages/docs/components/navigation_bar/navigation_bar_example_1.dart',
),
Expand Down
92 changes: 88 additions & 4 deletions shadcn_flutter/docs/lib/pages/docs/components/navigation_rail/navigation_rail_example_1.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,25 @@ class NavigationRailExample1 extends StatefulWidget {
class _NavigationRailExample1State extends State<NavigationRailExample1> {
int selected = 0;

NavigationRailAlignment alignment = NavigationRailAlignment.start;
NavigationLabelType labelType = NavigationLabelType.none;
bool customButtonStyle = false;

Widget buildButton(int i, String label, IconData icon) {
return NavigationButton(
style: customButtonStyle
? const ButtonStyle.muted(density: ButtonDensity.icon)
: null,
selectedStyle: customButtonStyle
? const ButtonStyle.fixed(density: ButtonDensity.icon)
: null,
onChanged: (value) {
setState(() {
selected = i;
});
},
selected: selected == i,
label: Text(label),
selected: selected == i,
child: Icon(icon),
);
}
Expand All @@ -30,6 +40,8 @@ class _NavigationRailExample1State extends State<NavigationRailExample1> {
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
NavigationRail(
alignment: alignment,
labelType: labelType,
children: [
buildButton(0, 'Home', BootstrapIcons.house),
buildButton(1, 'Explore', BootstrapIcons.compass),
Expand All @@ -45,9 +57,81 @@ class _NavigationRailExample1State extends State<NavigationRailExample1> {
),
const VerticalDivider(),
Expanded(
child: Container(
color: Colors.primaries[Colors.primaries.length - selected - 1],
)),
child: Container(
color: Colors.primaries[Colors.primaries.length - selected - 1],
padding: EdgeInsets.all(24),
child: Card(
child: Wrap(
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runSpacing: 8,
spacing: 8,
children: [
Select<NavigationRailAlignment>(
value: alignment,
itemBuilder:
(BuildContext context, NavigationRailAlignment item) {
return Text(item.name);
},
popupConstraints:
BoxConstraints.tight(const Size(200, 200)),
onChanged: (value) {
if (value != null) {
setState(() {
alignment = value;
});
}
},
children: [
for (var value in NavigationRailAlignment.values)
SelectItemButton(
value: value,
child: Text(value.name),
),
],
),
Select<NavigationLabelType>(
value: labelType,
itemBuilder:
(BuildContext context, NavigationLabelType item) {
return Text(item.name);
},
popupConstraints:
BoxConstraints.tight(const Size(200, 200)),
onChanged: (value) {
if (value != null) {
setState(() {
labelType = value;
});
}
},
children: [
for (var value in NavigationLabelType.values)
// expanded is used for the navigation sidebar
if (value != NavigationLabelType.expanded)
SelectItemButton(
value: value,
child: Text(value.name),
),
],
),
Checkbox(
state: customButtonStyle
? CheckboxState.checked
: CheckboxState.unchecked,
onChanged: (value) {
setState(() {
customButtonStyle = value == CheckboxState.checked;
});
},
trailing: Text('Custom Button Style'),
),
],
),
),
),
),
],
),
);
Expand Down
Loading

0 comments on commit 8d38457

Please sign in to comment.