diff --git a/lib/main.dart b/lib/main.dart index cfad4a9..29face3 100644 --- a/lib/main.dart +++ b/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) => diff --git a/lib/page/navigation/NavigationPageOne.dart b/lib/page/navigation/NavigationPageOne.dart deleted file mode 100644 index 4cacf75..0000000 --- a/lib/page/navigation/NavigationPageOne.dart +++ /dev/null @@ -1,23 +0,0 @@ -/// -/// Created by NieBin on 2018/12/25 -/// Github: https://github.com/nb312 -/// Email: niebin312@gmail.com -/// -import "package:flutter/material.dart"; - -class NavigationPageOne extends StatefulWidget { - @override - _NavigationState createState() => _NavigationState(); -} - -class _NavigationState extends State { - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text("Navigation one"), - ), - body: Text("Navigation page one"), - ); - } -} diff --git a/lib/page/navigation/common/pages/home_page.dart b/lib/page/navigation/common/pages/home_page.dart new file mode 100644 index 0000000..00ae207 --- /dev/null +++ b/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( + color: Colors.black26, + offset: Offset(2.0, 1.0), + blurRadius: 10.0, + ) + ], + ), + child: Center( + child: RaisedButton(onPressed: onMenuPressed, child: Text("Open Menu"),), + ), + ); + } +} \ No newline at end of file diff --git a/lib/page/navigation/common/widgets/background_common.dart b/lib/page/navigation/common/widgets/background_common.dart new file mode 100644 index 0000000..fbd2d98 --- /dev/null +++ b/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 + ); +} diff --git a/lib/page/navigation/navigation1/animations/home_page_animator.dart b/lib/page/navigation/navigation1/animations/home_page_animator.dart new file mode 100644 index 0000000..308eb8b --- /dev/null +++ b/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 translateLeft; + final Animation scaleDown; +} \ No newline at end of file diff --git a/lib/page/navigation/navigation1/coordinator.dart b/lib/page/navigation/navigation1/coordinator.dart new file mode 100644 index 0000000..21354c3 --- /dev/null +++ b/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 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: [ + 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(); + } +} \ No newline at end of file diff --git a/lib/page/navigation/navigation1/widgets/button.dart b/lib/page/navigation/navigation1/widgets/button.dart new file mode 100644 index 0000000..27eea91 --- /dev/null +++ b/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: [ + _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: [ + Text( + title, + style: TextStyle( + fontSize: 18.0, + color: TEXT_BLACK, + ), + ), + SizedBox(width: 5.0,), + Icon(icon) + ], + ), + ), + ); + +} \ No newline at end of file diff --git a/lib/page/navigation/navigation1/widgets/menu_buttons.dart b/lib/page/navigation/navigation1/widgets/menu_buttons.dart new file mode 100644 index 0000000..bcc6650 --- /dev/null +++ b/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 _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), + ), + ); + } +} \ No newline at end of file