Skip to content

Commit aec1a4f

Browse files
diegoveloperdiegoveloper
committed
menu navigation added
1 parent ec5aa04 commit aec1a4f

File tree

11 files changed

+345
-6
lines changed

11 files changed

+345
-6
lines changed

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,10 @@ You can follow me on twitter [@diegoveloper](https://www.twitter.com/diegovelope
3131
|--|--|
3232
| <center> <img src="https://media.giphy.com/media/JH0WO8BWjl6rxwcols/giphy.gif" width="250"> </center> | <center> <img src="https://media.giphy.com/media/jRwXjfQDEnnMLbrVL1/giphy.gif" width="250"> </center>|
3333

34-
| Split Widgets: Split Widget/Main Split Widget | Custom Sliver Header |
34+
| Animations /Split Widgets/Main Split Widget | Animations/ Custom Sliver Header |
3535
|--|--|
3636
| <center> <img src="https://media.giphy.com/media/fWqRy75Zg5lEtP5qkc/giphy.gif" width="250"> </center> | <center> <img src="https://media.giphy.com/media/JOXClC3XFwHosWAVqX/giphy.gif" width="250"> </center>|
3737

38+
| Menu Navigations: Header Navigation | |
39+
|--|--|
40+
| <center> <img src="https://media.giphy.com/media/f5SP7mJnO4x9mK4CSv/giphy.gif" width="250"> </center> | <center> </center>|

‎lib/animations/foldable_animation.dart‎ renamed to ‎lib/animations/foldable/foldable_animation.dart‎

File renamed without changes.

‎lib/animations/main_animations.dart‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_samples/animations/circular_list/circular_list_page.dart';
33
import 'package:flutter_samples/animations/custom_appbar/my_custom_appbar_page.dart';
4-
import 'package:flutter_samples/animations/foldable_animation.dart';
4+
import 'package:flutter_samples/animations/foldable/foldable_animation.dart';
55
import 'package:flutter_samples/animations/list_details/list_page.dart';
6+
import 'package:flutter_samples/animations/split_widget/main_split_widget.dart';
67
import 'package:flutter_samples/main.dart';
78

89
import 'custom_sliverheader/custom_sliver_header.dart';
910

1011
class MainAnimations extends StatefulWidget {
1112
@override
1213
MainAnimationsState createState() {
13-
return new MainAnimationsState();
14+
return MainAnimationsState();
1415
}
1516
}
1617

@@ -60,6 +61,12 @@ class MainAnimationsState extends State<MainAnimations> {
6061
onButtonTap(CustomSliverHeader());
6162
},
6263
),
64+
MyMenuButton(
65+
title: "Split Widget",
66+
actionTap: () {
67+
onButtonTap(MainSplitWidget());
68+
},
69+
),
6370
],
6471
),
6572
),

‎lib/split_widget/main_split_widget.dart‎ renamed to ‎lib/animations/split_widget/main_split_widget.dart‎

File renamed without changes.

‎lib/split_widget/split_half_widget.dart‎ renamed to ‎lib/animations/split_widget/split_half_widget.dart‎

File renamed without changes.

‎lib/main.dart‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ import 'package:flutter_samples/collapsing_toolbar/main_collapsing_toolbar.dart'
66
import 'package:flutter_samples/communication_widgets/main_communication_widgets.dart';
77
import 'package:flutter_samples/fetch_data/main_fetch_data.dart';
88
import 'package:flutter_samples/hero_animations/main_hero_animations.dart';
9+
import 'package:flutter_samples/menu_navigations/main_menu_navigations.dart';
910
import 'package:flutter_samples/persistent_tabbar/main_persistent_tabbar.dart';
1011
import 'package:flutter_samples/scroll_controller/main_scroll_controller.dart';
1112
import 'package:flutter_samples/size_and_position/main_size_and_position.dart';
1213
import 'package:flutter_samples/split_image/main_split_image.dart';
13-
import 'package:flutter_samples/split_widget/main_split_widget.dart';
1414

1515
void main() => runApp(MaterialApp(
1616
theme: ThemeData(
@@ -126,9 +126,9 @@ class MyAppState extends State<MyApp> {
126126
},
127127
),
128128
MyMenuButton(
129-
title: "Split Widget",
129+
title: "Menu Navigations",
130130
actionTap: () {
131-
onButtonTap(MainSplitWidget());
131+
onButtonTap(MainMenuNavigations());
132132
},
133133
),
134134
],

‎lib/menu_navigations/content_navigation.dart‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import 'package:flutter/material.dart';
2+
3+
class ContentNavigation extends StatelessWidget {
4+
final Color color;
5+
6+
const ContentNavigation({Key key, this.color}) : super(key: key);
7+
8+
@override
9+
Widget build(BuildContext context) {
10+
return GridView.count(
11+
crossAxisCount: 2,
12+
childAspectRatio: 1 / 1.5,
13+
mainAxisSpacing: 10,
14+
crossAxisSpacing: 15,
15+
padding: const EdgeInsets.all(15),
16+
children: [
17+
ContentItem(
18+
color: color,
19+
),
20+
ContentItem(
21+
color: color,
22+
),
23+
ContentItem(
24+
color: color,
25+
),
26+
ContentItem(
27+
color: color,
28+
),
29+
],
30+
);
31+
}
32+
}
33+
34+
class ContentItem extends StatelessWidget {
35+
final Color color;
36+
37+
const ContentItem({Key key, this.color}) : super(key: key);
38+
39+
@override
40+
Widget build(BuildContext context) {
41+
return Container(
42+
color: color.withOpacity(0.5),
43+
alignment: Alignment.bottomCenter,
44+
child: Padding(
45+
padding: const EdgeInsets.all(8.0),
46+
child: Column(
47+
mainAxisSize: MainAxisSize.min,
48+
crossAxisAlignment: CrossAxisAlignment.stretch,
49+
children: [
50+
Container(
51+
height: 7,
52+
color: color.withOpacity(0.6),
53+
),
54+
const SizedBox(
55+
height: 5,
56+
),
57+
Container(
58+
height: 7,
59+
margin: const EdgeInsets.only(right: 10),
60+
color: color.withOpacity(0.6),
61+
),
62+
const SizedBox(
63+
height: 15,
64+
),
65+
],
66+
),
67+
),
68+
);
69+
}
70+
}

‎lib/menu_navigations/header_navigation/header_navigation.dart‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import 'package:flutter/material.dart';
2+
3+
class HeaderNavigationItem {
4+
final Color colorBackground;
5+
final Color colorForeground;
6+
final Widget icon;
7+
final String title;
8+
final Widget child;
9+
10+
HeaderNavigationItem(
11+
{this.colorBackground = Colors.blue,
12+
this.colorForeground = Colors.white,
13+
this.icon,
14+
this.child,
15+
@required this.title});
16+
}
17+
18+
class HeaderNavigation extends StatefulWidget {
19+
final List<HeaderNavigationItem> items;
20+
final Duration duration;
21+
22+
const HeaderNavigation(
23+
{Key key,
24+
@required this.items,
25+
this.duration = const Duration(milliseconds: 400)})
26+
: super(key: key);
27+
28+
@override
29+
_HeaderNavigationState createState() => _HeaderNavigationState();
30+
}
31+
32+
class _HeaderNavigationState extends State<HeaderNavigation> {
33+
int _currentIndex = 0;
34+
final _keyLayout = GlobalKey();
35+
double _heightLayout = 0;
36+
bool _open = true;
37+
38+
void _onItemTapped(int index) {
39+
if (!_open) {
40+
setState(() {
41+
_open = true;
42+
});
43+
return;
44+
}
45+
setState(() {
46+
_currentIndex = index;
47+
_open = false;
48+
});
49+
}
50+
51+
@override
52+
void initState() {
53+
WidgetsBinding.instance.addPostFrameCallback((_) {
54+
setState(() {
55+
_heightLayout =
56+
(_keyLayout.currentContext.findRenderObject() as RenderBox)
57+
.size
58+
.height;
59+
});
60+
});
61+
super.initState();
62+
}
63+
64+
@override
65+
Widget build(BuildContext context) {
66+
final count = widget.items.length;
67+
final verticalItems = List<Widget>();
68+
if (_heightLayout > 0) {
69+
final heightPerItem = _heightLayout / count;
70+
for (int i = count - 1; i >= 0; i--) {
71+
final item = widget.items[i];
72+
double itemSize = heightPerItem;
73+
if (!_open) {
74+
if (_currentIndex == i) {
75+
itemSize = kToolbarHeight;
76+
} else {
77+
itemSize = 0;
78+
}
79+
}
80+
final text = Text(
81+
item.title,
82+
style: TextStyle(
83+
fontSize: 16,
84+
color: item.colorForeground,
85+
),
86+
);
87+
verticalItems.add(AnimatedPositioned(
88+
duration: widget.duration,
89+
top: !_open ? 0 : i * heightPerItem,
90+
height: itemSize,
91+
left: 0,
92+
right: 0,
93+
child: InkWell(
94+
onTap: () {
95+
_onItemTapped(i);
96+
},
97+
child: Container(
98+
alignment: Alignment.center,
99+
child: Column(
100+
mainAxisSize: MainAxisSize.min,
101+
mainAxisAlignment: MainAxisAlignment.center,
102+
children: [
103+
if (_open)
104+
Expanded(
105+
flex: 2,
106+
child: ShaderMask(
107+
shaderCallback: (bounds) => LinearGradient(
108+
colors: [item.colorForeground, item.colorForeground],
109+
tileMode: TileMode.mirror,
110+
).createShader(bounds),
111+
blendMode: BlendMode.srcIn,
112+
child: item.icon,
113+
),
114+
),
115+
Expanded(
116+
child: _open
117+
? text
118+
: Center(
119+
child: text,
120+
),
121+
),
122+
],
123+
),
124+
decoration: BoxDecoration(
125+
color: item.colorBackground,
126+
boxShadow: [
127+
BoxShadow(
128+
offset: Offset(2, 1),
129+
spreadRadius: 2,
130+
blurRadius: 10,
131+
)
132+
],
133+
),
134+
),
135+
),
136+
));
137+
}
138+
}
139+
140+
return Scaffold(
141+
body: Stack(
142+
key: _keyLayout,
143+
children: [
144+
Positioned(
145+
top: kToolbarHeight,
146+
bottom: 0,
147+
left: 0,
148+
right: 0,
149+
child: IndexedStack(
150+
index: _currentIndex,
151+
children: widget.items.map((item) => item.child).toList(),
152+
),
153+
),
154+
Stack(
155+
children: verticalItems,
156+
),
157+
],
158+
),
159+
);
160+
}
161+
}

‎lib/menu_navigations/header_navigation/main_header_navigation.dart‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_samples/menu_navigations/content_navigation.dart';
3+
import 'package:flutter_samples/menu_navigations/header_navigation/header_navigation.dart';
4+
5+
class MainHeaderNavigation extends StatelessWidget {
6+
@override
7+
Widget build(BuildContext context) {
8+
return SafeArea(
9+
child: Scaffold(
10+
body: HeaderNavigation(
11+
items: [
12+
HeaderNavigationItem(
13+
colorBackground: Colors.purple,
14+
title: "SERVICES",
15+
colorForeground: Colors.white,
16+
icon: Icon(
17+
Icons.room_service,
18+
size: 45,
19+
),
20+
child: ContentNavigation(
21+
color: Colors.purple,
22+
),
23+
),
24+
HeaderNavigationItem(
25+
colorBackground: Colors.red,
26+
title: "AUTO",
27+
colorForeground: Colors.white,
28+
icon: Icon(
29+
Icons.directions_car,
30+
size: 45,
31+
),
32+
child: ContentNavigation(
33+
color: Colors.red,
34+
),
35+
),
36+
HeaderNavigationItem(
37+
colorBackground: Colors.green,
38+
title: "JOB",
39+
colorForeground: Colors.white,
40+
icon: Icon(
41+
Icons.person,
42+
size: 45,
43+
),
44+
child: ContentNavigation(
45+
color: Colors.green,
46+
),
47+
),
48+
HeaderNavigationItem(
49+
colorBackground: Colors.blue,
50+
title: "REALTY",
51+
colorForeground: Colors.white,
52+
icon: Icon(
53+
Icons.home,
54+
size: 45,
55+
),
56+
child: ContentNavigation(
57+
color: Colors.blue,
58+
),
59+
),
60+
],
61+
),
62+
),
63+
);
64+
}
65+
}

0 commit comments

Comments
 (0)