Skip to content
This repository was archived by the owner on May 14, 2023. It is now read-only.

Commit 94e5d7f

Browse files
committed
resolved merge conflic
2 parents 2b7a028 + b5418ad commit 94e5d7f

File tree

8 files changed

+557
-123
lines changed

8 files changed

+557
-123
lines changed

adaptive_navigation/README.md

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
# adaptive_navigation_scaffold
1+
# adaptive_navigation
22

3-
A package that contains a component for adaptive switching between the Navigation Rail and Bottom Navigation Bar.
3+
A package that contains a component for adaptive switching between the Bottom Navigation Bar, Navigation Rail, and Drawer.
4+
5+
Demo: https://adaptive-navigation.web.app/#/
6+
7+
NOTE: This is an opinionated implementation of adaptive navigation in Material. While there are some
8+
basic options for switching the adaptive behavior, it is not meant to support advanced or custom
9+
configurations. For example, if you need an extended Navigation Rail or a Drawer with custom
10+
actions, this package should not be used. It can still, however, be used a reference for breakpoint
11+
logic and navigation destination mapping.
412

513
Initial history: https://github.com/material-components/material-components-flutter-experimental/tree/130139f36752df458f8d033f51a8983004b69c17/adaptive_navigation_scaffold
+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"projects": {
3+
"default": "adaptive-navigation"
4+
}
5+
}
+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"hosting": {
3+
"public": "build/web",
4+
"ignore": [
5+
"firebase.json",
6+
"**/.*",
7+
"**/node_modules/**"
8+
],
9+
"rewrites": [
10+
{
11+
"source": "**",
12+
"destination": "/index.html"
13+
}
14+
]
15+
}
16+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import 'package:adaptive_navigation/scaffold.dart';
2+
import 'package:flutter/material.dart';
3+
4+
class CustomScaffoldDemo extends StatefulWidget {
5+
@override
6+
_CustomScaffoldDemoState createState() => _CustomScaffoldDemoState();
7+
}
8+
9+
class _CustomScaffoldDemoState extends State<CustomScaffoldDemo> {
10+
int _destinationCount = 5;
11+
12+
@override
13+
Widget build(BuildContext context) {
14+
return AdaptiveNavigationScaffold(
15+
selectedIndex: 0,
16+
destinations: _allDestinations.sublist(0, _destinationCount),
17+
appBar: AppBar(title: const Text('Custom Demo')),
18+
body: _body(),
19+
floatingActionButton: FloatingActionButton(
20+
child: Icon(Icons.add),
21+
onPressed: () {},
22+
),
23+
navigationTypeResolver: (context) {
24+
if (MediaQuery.of(context).size.width > 600) {
25+
return NavigationType.drawer;
26+
} else {
27+
return NavigationType.bottom;
28+
}
29+
},
30+
);
31+
}
32+
33+
Widget _body() {
34+
return Center(
35+
child: Column(
36+
mainAxisAlignment: MainAxisAlignment.center,
37+
children: [
38+
const Text('''
39+
This is a custom behavior of the AdaptiveNavigationScaffold.
40+
It switches between bottom navigation and a drawer.
41+
Resize the window to switch between the navigation types.
42+
'''),
43+
const SizedBox(height: 40),
44+
Slider(
45+
min: 2,
46+
max: _allDestinations.length.toDouble(),
47+
divisions: _allDestinations.length - 2,
48+
value: _destinationCount.toDouble(),
49+
label: _destinationCount.toString(),
50+
onChanged: (value) {
51+
setState(() {
52+
_destinationCount = value.round();
53+
});
54+
},
55+
),
56+
const Text('Destination Count'),
57+
const SizedBox(height: 40),
58+
RaisedButton(
59+
child: const Text('BACK'),
60+
onPressed: () {
61+
Navigator.of(context).pushReplacementNamed('/');
62+
},
63+
)
64+
],
65+
),
66+
);
67+
}
68+
}
69+
70+
const _allDestinations = [
71+
AdaptiveScaffoldDestination(title: 'Alarm', icon: Icons.alarm),
72+
AdaptiveScaffoldDestination(title: 'Book', icon: Icons.book),
73+
AdaptiveScaffoldDestination(title: 'Cake', icon: Icons.cake),
74+
AdaptiveScaffoldDestination(title: 'Directions', icon: Icons.directions),
75+
AdaptiveScaffoldDestination(title: 'Email', icon: Icons.email),
76+
AdaptiveScaffoldDestination(title: 'Favorite', icon: Icons.favorite),
77+
AdaptiveScaffoldDestination(title: 'Group', icon: Icons.group),
78+
AdaptiveScaffoldDestination(title: 'Headset', icon: Icons.headset),
79+
AdaptiveScaffoldDestination(title: 'Info', icon: Icons.info),
80+
];
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import 'package:adaptive_navigation/scaffold.dart';
2+
import 'package:flutter/material.dart';
3+
4+
class DefaultScaffoldDemo extends StatefulWidget {
5+
@override
6+
_DefaultScaffoldDemoState createState() => _DefaultScaffoldDemoState();
7+
}
8+
9+
class _DefaultScaffoldDemoState extends State<DefaultScaffoldDemo> {
10+
int _destinationCount = 5;
11+
bool _fabInRail = false;
12+
13+
@override
14+
Widget build(BuildContext context) {
15+
return AdaptiveNavigationScaffold(
16+
selectedIndex: 0,
17+
destinations: _allDestinations.sublist(0, _destinationCount),
18+
appBar: AppBar(title: Text('Default Demo')),
19+
body: _body(),
20+
floatingActionButton: FloatingActionButton(
21+
child: Icon(Icons.add),
22+
onPressed: () {},
23+
),
24+
fabInRail: _fabInRail,
25+
);
26+
}
27+
28+
Widget _body() {
29+
return Center(
30+
child: Column(
31+
mainAxisAlignment: MainAxisAlignment.center,
32+
children: [
33+
const Text('''
34+
This is the default behavior of the AdaptiveNavigationScaffold.
35+
It switches between bottom navigation, navigation rail, and a permanent drawer.
36+
Resize the window to switch between the navigation types.
37+
'''),
38+
const SizedBox(height: 40),
39+
Slider(
40+
min: 2,
41+
max: _allDestinations.length.toDouble(),
42+
divisions: _allDestinations.length - 2,
43+
value: _destinationCount.toDouble(),
44+
label: _destinationCount.toString(),
45+
onChanged: (value) {
46+
setState(() {
47+
_destinationCount = value.round();
48+
});
49+
},
50+
),
51+
const Text('Destination Count'),
52+
const SizedBox(height: 40),
53+
Switch(
54+
value: _fabInRail,
55+
onChanged: (value) {
56+
setState(() {
57+
_fabInRail = value;
58+
});
59+
},
60+
),
61+
const Text('fabInRail'),
62+
const SizedBox(height: 40),
63+
RaisedButton(
64+
child: const Text('BACK'),
65+
onPressed: () {
66+
Navigator.of(context).pushReplacementNamed('/');
67+
},
68+
)
69+
],
70+
),
71+
);
72+
}
73+
}
74+
75+
const _allDestinations = [
76+
AdaptiveScaffoldDestination(title: 'Alarm', icon: Icons.alarm),
77+
AdaptiveScaffoldDestination(title: 'Book', icon: Icons.book),
78+
AdaptiveScaffoldDestination(title: 'Cake', icon: Icons.cake),
79+
AdaptiveScaffoldDestination(title: 'Directions', icon: Icons.directions),
80+
AdaptiveScaffoldDestination(title: 'Email', icon: Icons.email),
81+
AdaptiveScaffoldDestination(title: 'Favorite', icon: Icons.favorite),
82+
AdaptiveScaffoldDestination(title: 'Group', icon: Icons.group),
83+
AdaptiveScaffoldDestination(title: 'Headset', icon: Icons.headset),
84+
AdaptiveScaffoldDestination(title: 'Info', icon: Icons.info),
85+
];

adaptive_navigation/example/lib/main.dart

+37-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import 'package:flutter/material.dart';
2-
import 'package:adaptive_navigation/scaffold.dart';
2+
3+
import 'custom_scaffold.dart';
4+
import 'default_scaffold.dart';
35

46
void main() {
57
runApp(MyApp());
@@ -9,24 +11,47 @@ class MyApp extends StatelessWidget {
911
@override
1012
Widget build(BuildContext context) {
1113
return MaterialApp(
12-
title: 'Adaptive Navigation Scaffold',
13-
home: AdaptiveNavigationScaffoldDemo(),
14+
title: 'Adaptive Navigation Scaffold Demo',
15+
home: DemoSelector(),
1416
);
1517
}
1618
}
1719

18-
class AdaptiveNavigationScaffoldDemo extends StatelessWidget {
20+
class DemoSelector extends StatelessWidget {
1921
@override
2022
Widget build(BuildContext context) {
21-
return AdaptiveNavigationScaffold(
22-
currentIndex: 0,
23-
destinations: [
24-
AdaptiveScaffoldDestination(title: 'Home', icon: Icons.home),
25-
AdaptiveScaffoldDestination(title: 'Settings', icon: Icons.settings),
26-
],
23+
return Scaffold(
2724
body: Center(
28-
child: Text(
29-
'Resize the window to switch between the Navigation Rail and Bottom Navigation'),
25+
child: Column(
26+
mainAxisAlignment: MainAxisAlignment.center,
27+
children: [
28+
RaisedButton(
29+
child: Text('Default Scaffold'),
30+
onPressed: () {
31+
Navigator.of(context).pushReplacement(
32+
MaterialPageRoute(
33+
builder: (context) {
34+
return DefaultScaffoldDemo();
35+
},
36+
),
37+
);
38+
},
39+
),
40+
SizedBox(height: 16),
41+
RaisedButton(
42+
child: Text('Custom Scaffold'),
43+
onPressed: () {
44+
Navigator.of(context).pushReplacement(
45+
MaterialPageRoute(
46+
builder: (context) {
47+
return CustomScaffoldDemo();
48+
},
49+
),
50+
);
51+
},
52+
)
53+
],
54+
),
3055
),
3156
);
3257
}

0 commit comments

Comments
 (0)