03 navigation 1

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_ui_nice/page/navigation/navigation1/coordinator.dart';
 import 'package:flutter_ui_nice/page/page_const.dart';
 import 'const/string_const.dart';
 import 'const/color_const.dart';
@@ -38,6 +39,8 @@ class MyApp extends StatelessWidget {
         FEED_PAGES[12]: (context) => FeedPageThirteen(),
         SHOPPING_PAGES[17]: (context) => ShopPageEighteen(),
         SHOPPING_PAGES[18]: (context) => ShopPageNineteen(),
+
+				NAVIGATION_PAGES[0]: (context) => NavigationOneCoordinator(),
         //FIXME there are other pages to jump with 'page_str_const.dart',there should be make by manager
       },
       onUnknownRoute: (setting) =>

lib/page/navigation/common/pages/home_page.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_ui_nice/const/color_const.dart';
+
+class HomePage extends StatelessWidget {
+	HomePage(this.onMenuPressed);
+	final VoidCallback onMenuPressed;
+
+	@override
+  Widget build(BuildContext context) {
+    return Container(
+			decoration: BoxDecoration(
+				borderRadius: BorderRadius.circular(10.0),
+				gradient: LinearGradient(
+					begin: Alignment.topLeft,
+					end: Alignment.bottomRight,
+					colors: [YELLOW, GREEN, BLUE],
+				),
+				boxShadow: <BoxShadow>[
+					BoxShadow(
+						color: Colors.black26,
+						offset: Offset(2.0, 1.0),
+						blurRadius: 10.0,
+					)
+				],
+			),
+			child: Center(
+				child: RaisedButton(onPressed: onMenuPressed, child: Text("Open Menu"),),
+			),
+		);
+  }
+}

lib/page/navigation/common/widgets/background_common.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_ui_nice/const/color_const.dart';
+
+class BackgroundCommon extends StatelessWidget {
+
+	BackgroundCommon({this.child, Key key}) : super(key: key);
+	final Widget child;
+
+	@override
+  Widget build(BuildContext context) => Container(
+      decoration: BoxDecoration(
+					gradient: LinearGradient(
+						begin: Alignment.topLeft,
+						end: Alignment.bottomRight,
+						colors: [YELLOW, GREEN, BLUE],
+					)
+			),
+			child: child
+	);
+}

lib/page/navigation/navigation1/animations/home_page_animator.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/widgets.dart';
+
+class HomePageAnimator {
+	HomePageAnimator(this.controller) :
+			translateLeft = Tween(begin: 0.0, end: -200.0).animate(controller),
+			scaleDown = Tween(begin: 1.0, end: 0.8).animate(controller);
+
+	final AnimationController controller;
+	final Animation<double> translateLeft;
+	final Animation<double> scaleDown;
+}

lib/page/navigation/navigation1/coordinator.dart

@@ -0,0 +1,94 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_ui_nice/page/navigation/navigation1/animations/home_page_animator.dart';
+import 'package:flutter_ui_nice/page/navigation/navigation1/widgets/menu_buttons.dart';
+import 'package:flutter_ui_nice/page/navigation/common/widgets/background_common.dart';
+import 'package:flutter_ui_nice/page/navigation/common/pages/home_page.dart';
+
+class NavigationOneCoordinator extends StatefulWidget {
+	@override
+	_Coordinator createState() => _Coordinator();
+}
+
+class _Coordinator extends State<NavigationOneCoordinator> with TickerProviderStateMixin {
+	AnimationController _controller;
+	HomePageAnimator _animator;
+
+	@override
+  void initState() {
+    super.initState();
+		_controller = AnimationController(vsync: this, duration: Duration(milliseconds: 700));
+		_animator = HomePageAnimator(_controller);
+  }
+
+  _onHomePressed() => _showHome();
+
+	_onChatPressed() {
+		debugPrint("Chat Pressed");
+	}
+
+	_onFeedPressed() {
+		debugPrint("Feed Pressed");
+	}
+
+	_onProfilePressed() {
+		debugPrint("Profile Pressed");
+	}
+
+	_onSettingsPressed() {
+		debugPrint("settings Pressed");
+	}
+
+	@override
+  Widget build(BuildContext context) => Material(
+		child: BackgroundCommon(
+			child: Stack(
+				children: <Widget>[
+					Positioned(
+						bottom: 100.0,
+						right: 50.0,
+						child: MenuButtons(
+							onChatPressed: _onChatPressed,
+							onFeedPressed: _onFeedPressed,
+							onHomePressed: _onHomePressed,
+							onProfilePressed: _onProfilePressed,
+							onSettingsPressed: _onSettingsPressed,
+						),
+					),
+
+					AnimatedBuilder(
+							animation: _controller,
+							builder: (context, widget) => Transform(
+								alignment: Alignment.centerLeft,
+								transform: Matrix4
+										.translationValues(_animator.translateLeft.value, 0.0, 0.0)
+										..scale(_animator.scaleDown.value),
+								child: HomePage(() => _openMenu()),
+							),
+					),
+				],
+			),
+		),
+	);
+
+	Future _openMenu() async {
+		try {
+			await _controller.forward().orCancel;
+		} on TickerCanceled {
+			print("Animation Failed");
+		}
+	}
+
+	Future _showHome() async {
+		try {
+			await _controller.reverse().orCancel;
+		} on TickerCanceled {
+			print("Animation Failed");
+		}
+	}
+
+	@override
+	void dispose() {
+		super.dispose();
+		_controller.dispose();
+	}
+}

lib/page/navigation/navigation1/widgets/button.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_ui_nice/const/color_const.dart';
+
+class Button {
+
+	static Widget home(VoidCallback onPressed) => _buildButton(onPressed, "HOME", Icons.home);
+
+	static Widget chat(VoidCallback onPressed, {int notification})  => _buildButton(onPressed, "CHAT", Icons.chat, notification:
+	notification);
+
+	static Widget feed(VoidCallback onPressed) => _buildButton(onPressed, "FEED", Icons.rss_feed);
+
+	static Widget profile(VoidCallback onPressed) => _buildButton(onPressed, "PROFILE", Icons.person);
+
+	static Widget settings(VoidCallback onPressed) => _buildButton(onPressed, "SETTINGS", Icons.settings);
+
+	static Widget _buildButton(VoidCallback onPressed, String title, IconData icon, {int notification}) {
+		if (notification != null) {
+			return Container(
+				child: Stack(
+					children: <Widget>[
+						_button(onPressed, title, icon),
+						Positioned(
+							top: 0.0,
+						  right: 0.0,
+						  child: Container(
+						  	decoration: BoxDecoration(
+						  		shape: BoxShape.circle,
+						  		color: Colors.redAccent
+						  	),
+						  	child: Padding(
+						  	  padding: const EdgeInsets.all(6.0),
+						  	  child: Text("$notification", style: TextStyle(color: Colors.white),),
+						  	),
+						  ),
+						),
+					],
+				),
+			);
+		} else {
+			return _button(onPressed, title, icon);
+		}
+	}
+
+	static Widget _button(VoidCallback onPressed, String title, IconData icon) => RaisedButton(
+		color: GREEN,
+		shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
+		onPressed: onPressed,
+		child: Padding(
+		  padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 10.0),
+		  child: Row(
+		  	mainAxisAlignment: MainAxisAlignment.spaceBetween,
+		  	children: <Widget>[
+		  		Text(
+		  			title,
+		  			style: TextStyle(
+		  				fontSize: 18.0,
+		  				color: TEXT_BLACK,
+		  			),
+		  		),
+		  		SizedBox(width: 5.0,),
+		  		Icon(icon)
+		  	],
+		  ),
+		),
+	);
+
+}

lib/page/navigation/navigation1/widgets/menu_buttons.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_ui_nice/page/navigation/navigation1/widgets/button.dart';
+
+class MenuButtons extends StatelessWidget {
+	MenuButtons({this.onHomePressed, this.onChatPressed, this.onFeedPressed, this.onProfilePressed, this
+			.onSettingsPressed});
+	final VoidCallback onHomePressed;
+	final VoidCallback onChatPressed;
+	final VoidCallback onFeedPressed;
+	final VoidCallback onProfilePressed;
+	final VoidCallback onSettingsPressed;
+
+	List<Widget> _allButtons({int notifications}) => [
+		Padding(
+		  padding: const EdgeInsets.only(left: 10.0, right: 30.0, bottom: 20.0),
+		  child: Button.home(onHomePressed),
+		),
+		Padding(
+		  padding: const EdgeInsets.only(left: 50.0, bottom: 20.0),
+		  child: Button.chat(onChatPressed, notification: notifications),
+		),
+		Padding(
+		  padding: const EdgeInsets.only(left: 8.0, bottom: 20.0),
+		  child: Button.feed(onFeedPressed),
+		),
+		Padding(
+		  padding: const EdgeInsets.only(left: 50.0, bottom: 20.0),
+		  child: Button.profile(onProfilePressed),
+		),
+		Button.settings(onSettingsPressed)
+	];
+
+	@override
+  Widget build(BuildContext context) {
+    return Container(
+			child: Column(
+				children: _allButtons(notifications: 5),
+			),
+		);
+  }
+}