diff --git a/README.md b/README.md index 0de6f66..a2d73df 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,35 @@ -# flutter_ui_shopping +# flutter-ui-nice ### :heart: Star :heart: the repo to support the project or :smile:[Follow Me](https://github.com/nb312).Thanks! -The project is developing,please wait. +**The project is developing,do not complete** please wait. This project will comply with many people. If you interest in this project please let me know.[My Facebook](https://www.facebook.com/profile.php?id=100018259667795) - + - + - + - + - + - + - + - + - + - + + +# License +The MIT License (MIT) +Copyright © 2018 NieBin + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png index 5dfd699..ac986b0 100644 Binary files a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png differ diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png index 5dfd699..ac986b0 100644 Binary files a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png differ diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png index 5dfd699..ac986b0 100644 Binary files a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png differ diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png index 5dfd699..ac986b0 100644 Binary files a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png differ diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png index 5dfd699..ac986b0 100644 Binary files a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png and b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png differ diff --git a/doc/01-signup-no.jpg b/doc/01-signup-no.jpg new file mode 100644 index 0000000..c964e78 Binary files /dev/null and b/doc/01-signup-no.jpg differ diff --git a/doc/02-walk_through-no.jpg b/doc/02-walk_through-no.jpg new file mode 100644 index 0000000..7c23077 Binary files /dev/null and b/doc/02-walk_through-no.jpg differ diff --git a/doc/03-navigation-no.jpg b/doc/03-navigation-no.jpg new file mode 100644 index 0000000..17c3b02 Binary files /dev/null and b/doc/03-navigation-no.jpg differ diff --git a/doc/04-profile-no.jpg b/doc/04-profile-no.jpg new file mode 100644 index 0000000..ade46b2 Binary files /dev/null and b/doc/04-profile-no.jpg differ diff --git a/doc/05-feed-no.jpg b/doc/05-feed-no.jpg new file mode 100644 index 0000000..aa8b05e Binary files /dev/null and b/doc/05-feed-no.jpg differ diff --git a/doc/06-chat-no.jpg b/doc/06-chat-no.jpg new file mode 100644 index 0000000..876ec70 Binary files /dev/null and b/doc/06-chat-no.jpg differ diff --git a/doc/07-shopping-no.jpg b/doc/07-shopping-no.jpg new file mode 100644 index 0000000..7374475 Binary files /dev/null and b/doc/07-shopping-no.jpg differ diff --git a/doc/08-statistics-no.jpg b/doc/08-statistics-no.jpg new file mode 100644 index 0000000..f0c4a83 Binary files /dev/null and b/doc/08-statistics-no.jpg differ diff --git a/doc/09-media-no.jpg b/doc/09-media-no.jpg new file mode 100644 index 0000000..961e909 Binary files /dev/null and b/doc/09-media-no.jpg differ diff --git a/doc/10-camera-no.jpg b/doc/10-camera-no.jpg new file mode 100644 index 0000000..553bc1f Binary files /dev/null and b/doc/10-camera-no.jpg differ diff --git a/images/camera/ic_launcher.png b/images/camera/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/camera/ic_launcher.png differ diff --git a/images/chat/ic_launcher.png b/images/chat/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/chat/ic_launcher.png differ diff --git a/images/feed/city.png b/images/feed/city.png new file mode 100644 index 0000000..4a23e8d Binary files /dev/null and b/images/feed/city.png differ diff --git a/images/feed/feed11-city1.png b/images/feed/feed11-city1.png new file mode 100644 index 0000000..9589922 Binary files /dev/null and b/images/feed/feed11-city1.png differ diff --git a/images/feed/feed11-city2.png b/images/feed/feed11-city2.png new file mode 100644 index 0000000..67ff32c Binary files /dev/null and b/images/feed/feed11-city2.png differ diff --git a/images/feed/feed11-header.png b/images/feed/feed11-header.png new file mode 100644 index 0000000..55fefc6 Binary files /dev/null and b/images/feed/feed11-header.png differ diff --git a/images/feed/feed12_header.png b/images/feed/feed12_header.png new file mode 100644 index 0000000..8733dd2 Binary files /dev/null and b/images/feed/feed12_header.png differ diff --git a/images/feed/feed12_pic1.png b/images/feed/feed12_pic1.png new file mode 100644 index 0000000..38297fd Binary files /dev/null and b/images/feed/feed12_pic1.png differ diff --git a/images/feed/feed12_pic2.png b/images/feed/feed12_pic2.png new file mode 100644 index 0000000..445829e Binary files /dev/null and b/images/feed/feed12_pic2.png differ diff --git a/images/feed/feed12_plus.png b/images/feed/feed12_plus.png new file mode 100644 index 0000000..ea1c981 Binary files /dev/null and b/images/feed/feed12_plus.png differ diff --git a/images/feed/feed13_header1.png b/images/feed/feed13_header1.png new file mode 100644 index 0000000..8f4902f Binary files /dev/null and b/images/feed/feed13_header1.png differ diff --git a/images/feed/feed13_header2.png b/images/feed/feed13_header2.png new file mode 100644 index 0000000..654d064 Binary files /dev/null and b/images/feed/feed13_header2.png differ diff --git a/images/feed/feed13_header3.png b/images/feed/feed13_header3.png new file mode 100644 index 0000000..86194c9 Binary files /dev/null and b/images/feed/feed13_header3.png differ diff --git a/images/feed/feed13_pic1.png b/images/feed/feed13_pic1.png new file mode 100644 index 0000000..eb5dc35 Binary files /dev/null and b/images/feed/feed13_pic1.png differ diff --git a/images/feed/feed13_pic2.png b/images/feed/feed13_pic2.png new file mode 100644 index 0000000..3205dfa Binary files /dev/null and b/images/feed/feed13_pic2.png differ diff --git a/images/feed/feed13_pic3.png b/images/feed/feed13_pic3.png new file mode 100644 index 0000000..e6cd13e Binary files /dev/null and b/images/feed/feed13_pic3.png differ diff --git a/images/feed/feed13_pic4.png b/images/feed/feed13_pic4.png new file mode 100644 index 0000000..7251cc3 Binary files /dev/null and b/images/feed/feed13_pic4.png differ diff --git a/images/feed/feed1_avatar1.png b/images/feed/feed1_avatar1.png new file mode 100644 index 0000000..e67c74e Binary files /dev/null and b/images/feed/feed1_avatar1.png differ diff --git a/images/feed/feed1_avatar2.png b/images/feed/feed1_avatar2.png new file mode 100644 index 0000000..04edbcc Binary files /dev/null and b/images/feed/feed1_avatar2.png differ diff --git a/images/feed/feed_add.png b/images/feed/feed_add.png new file mode 100644 index 0000000..dcb02e1 Binary files /dev/null and b/images/feed/feed_add.png differ diff --git a/images/feed/feed_more.png b/images/feed/feed_more.png new file mode 100644 index 0000000..c512e50 Binary files /dev/null and b/images/feed/feed_more.png differ diff --git a/images/feed/feed_search.png b/images/feed/feed_search.png new file mode 100644 index 0000000..07e62c7 Binary files /dev/null and b/images/feed/feed_search.png differ diff --git a/images/feed/ic_launcher.png b/images/feed/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/feed/ic_launcher.png differ diff --git a/images/feed/landscape.png b/images/feed/landscape.png new file mode 100644 index 0000000..b5e31b9 Binary files /dev/null and b/images/feed/landscape.png differ diff --git a/images/feed/menonglass.png b/images/feed/menonglass.png new file mode 100644 index 0000000..45f263f Binary files /dev/null and b/images/feed/menonglass.png differ diff --git a/images/feed/night.png b/images/feed/night.png new file mode 100644 index 0000000..3cadd0b Binary files /dev/null and b/images/feed/night.png differ diff --git a/images/feed/shop_river.png b/images/feed/shop_river.png new file mode 100644 index 0000000..eade1d9 Binary files /dev/null and b/images/feed/shop_river.png differ diff --git a/images/feed/white_background.png b/images/feed/white_background.png new file mode 100644 index 0000000..e981d79 Binary files /dev/null and b/images/feed/white_background.png differ diff --git a/images/main/ic_launcher.png b/images/main/ic_launcher.png index 5dfd699..ac986b0 100644 Binary files a/images/main/ic_launcher.png and b/images/main/ic_launcher.png differ diff --git a/images/main/pic01.png b/images/main/pic01.png new file mode 100644 index 0000000..a39f0f3 Binary files /dev/null and b/images/main/pic01.png differ diff --git a/images/main/pic02.png b/images/main/pic02.png new file mode 100644 index 0000000..adbcdcb Binary files /dev/null and b/images/main/pic02.png differ diff --git a/images/main/pic03.png b/images/main/pic03.png new file mode 100644 index 0000000..9092acb Binary files /dev/null and b/images/main/pic03.png differ diff --git a/images/main/pic04.png b/images/main/pic04.png new file mode 100644 index 0000000..8153fdc Binary files /dev/null and b/images/main/pic04.png differ diff --git a/images/main/pic05.png b/images/main/pic05.png new file mode 100644 index 0000000..d363e76 Binary files /dev/null and b/images/main/pic05.png differ diff --git a/images/main/pic06.png b/images/main/pic06.png new file mode 100644 index 0000000..ad9e173 Binary files /dev/null and b/images/main/pic06.png differ diff --git a/images/main/pic07.png b/images/main/pic07.png new file mode 100644 index 0000000..a51fe49 Binary files /dev/null and b/images/main/pic07.png differ diff --git a/images/main/pic08.png b/images/main/pic08.png new file mode 100644 index 0000000..f0a9e14 Binary files /dev/null and b/images/main/pic08.png differ diff --git a/images/main/pic09.png b/images/main/pic09.png new file mode 100644 index 0000000..84b7283 Binary files /dev/null and b/images/main/pic09.png differ diff --git a/images/main/pic10.png b/images/main/pic10.png new file mode 100644 index 0000000..39bc16d Binary files /dev/null and b/images/main/pic10.png differ diff --git a/images/main/pic11.png b/images/main/pic11.png new file mode 100644 index 0000000..9de8574 Binary files /dev/null and b/images/main/pic11.png differ diff --git a/images/media/ic_launcher.png b/images/media/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/media/ic_launcher.png differ diff --git a/images/navigation/ic_launcher.png b/images/navigation/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/navigation/ic_launcher.png differ diff --git a/images/profile/ic_launcher.png b/images/profile/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/profile/ic_launcher.png differ diff --git a/images/shopping/ic_launcher.png b/images/shopping/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/shopping/ic_launcher.png differ diff --git a/images/signup/ic_launcher.png b/images/signup/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/signup/ic_launcher.png differ diff --git a/images/statistics/ic_launcher.png b/images/statistics/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/statistics/ic_launcher.png differ diff --git a/images/walkthrough/ic_launcher.png b/images/walkthrough/ic_launcher.png new file mode 100644 index 0000000..5dfd699 Binary files /dev/null and b/images/walkthrough/ic_launcher.png differ diff --git a/lib/const/color_const.dart b/lib/const/color_const.dart index 6f754ef..ac45f05 100644 --- a/lib/const/color_const.dart +++ b/lib/const/color_const.dart @@ -10,5 +10,11 @@ const DARK_COLOR = Color(0xFFBDBDBD); const BOTTOM_COLORS = [MAIN_COLOR, DARK_COLOR]; const YELLOW = Color(0xfffbed96); const BLUE = Color(0xffabecd6); +const BLUE_DEEP = Color(0xffA8CBFD); +const BLUE_LIGHT = Color(0xffAED3EA); const PURPLE = Color(0xffccc3fc); -const RED = Color(0xffffb6b3); +const RED = Color(0xffF2A7B3); +const GREEN = Color(0xffc7e5b4); +const RED_LIGHT = Color(0xffFFC3A0); +const TEXT_BLACK = Color(0xFF353535); +const TEXT_BLACK_LIGHT = Color(0xFF34323D); diff --git a/lib/const/images_const.dart b/lib/const/images_const.dart index 7b672e1..5e73bf6 100644 --- a/lib/const/images_const.dart +++ b/lib/const/images_const.dart @@ -23,15 +23,15 @@ class ImagePath { class MainImagePath { static const String image_path = "images/main"; static const String image_app = "$image_path/ic_launcher.png"; - static const String image_header= "$image_path/main_background.png"; - static const String image_sign_up = "$image_path/main_background.png"; - static const String image_walk_through = "$image_path/main_background.png"; - static const String image_navigation = "$image_path/main_background.png"; - static const String image_profile = "$image_path/main_background.png"; - static const String image_feed = "$image_path/main_background.png"; - static const String image_chat = "$image_path/main_background.png"; - static const String image_shopping = "$image_path/main_background.png"; - static const String image_statistic = "$image_path/main_background.png"; - static const String image_media = "$image_path/main_background.png"; - static const String image_camera = "$image_path/main_background.png"; + static const String image_header = "$image_path/pic04.png"; + static const String image_sign_up = "$image_path/pic03.png"; + static const String image_walk_through = "$image_path/pic01.png"; + static const String image_navigation = "$image_path/pic05.png"; + static const String image_profile = "$image_path/pic06.png"; + static const String image_feed = "$image_path/pic02.png"; + static const String image_chat = "$image_path/pic08.png"; + static const String image_shopping = "$image_path/pic09.png"; + static const String image_statistic = "$image_path/pic10.png"; + static const String image_media = "$image_path/pic11.png"; + static const String image_camera = "$image_path/pic01.png"; } diff --git a/lib/const/page_str_const.dart b/lib/const/page_str_const.dart index e184104..1c2577e 100644 --- a/lib/const/page_str_const.dart +++ b/lib/const/page_str_const.dart @@ -42,6 +42,16 @@ const FEED_PAGES = [ "Feed page 01", "Feed page 02", "Feed page 03", + "Feed page 04", + "Feed page 05", + "Feed page 06", + "Feed page 07", + "Feed page 08", + "Feed page 09", + "Feed page 10", + "Feed page 11", + "Feed page 12", + "Feed page 13", /// fixme you could add by your group one name fit one page. ]; diff --git a/lib/main.dart b/lib/main.dart index 2be33ff..6539062 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -4,6 +4,7 @@ import 'const/string_const.dart'; import 'const/color_const.dart'; import 'const/page_str_const.dart'; import "page/page_const.dart"; +import 'package:flutter/services.dart'; void main() => runApp(MyApp()); @@ -11,16 +12,28 @@ class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { + SystemChrome.setEnabledSystemUIOverlays([]); return MaterialApp( title: StringConst.APP_NAME, debugShowCheckedModeBanner: false, - theme: ThemeData(primaryColor: MAIN_COLOR, accentColor: MAIN_COLOR), + theme: ThemeData(primaryColor: BLUE, accentColor: TEXT_BLACK_LIGHT), home: HomePage(), routes: { SIGN_UP_PAGES[0]: (context) => SignPageOne(), SIGN_UP_PAGES[1]: (context) => SignPageTwo(), - //FIXME there are other pages to jump with 'page_str_const.dart',there should be make by manager + ///FEED group page + FEED_PAGES[0]: (context) => FeedPageOne(), + FEED_PAGES[0]: (context) => FeedPageOne(), + FEED_PAGES[0]: (context) => FeedPageOne(), + FEED_PAGES[0]: (context) => FeedPageOne(), + FEED_PAGES[0]: (context) => FeedPageOne(), + FEED_PAGES[0]: (context) => FeedPageOne(), + FEED_PAGES[9]: (context) => FeedPageTen(), + FEED_PAGES[10]: (context) => FeedPageEleven(), + FEED_PAGES[11]: (context) => FeedPageTwelve(), + FEED_PAGES[12]: (context) => FeedPageThirteen(), + //FIXME there are other pages to jump with 'page_str_const.dart',there should be make by manager }, onUnknownRoute: (setting) => MaterialPageRoute(builder: (context) => EmptyPage()), diff --git a/lib/page/feed/FeedPageEleven.dart b/lib/page/feed/FeedPageEleven.dart new file mode 100644 index 0000000..5e26947 --- /dev/null +++ b/lib/page/feed/FeedPageEleven.dart @@ -0,0 +1,239 @@ +/// +/// Created by NieBin on 2018/12/26 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'top_title.dart'; +import "package:flutter_ui_nice/util/SizeUtil.dart"; +import 'package:flutter_ui_nice/const/color_const.dart'; +import 'feed_const.dart'; + +class FeedPageEleven extends StatefulWidget { + @override + _FeedState createState() => _FeedState(); +} + +class _FeedState extends State + with SingleTickerProviderStateMixin { + TabController tabController; + var curTab = 0; + + void initState() { + super.initState(); + tabController = TabController(length: 3, vsync: this); + tabController.addListener(() { + setState(() { + curTab = tabController.index; + }); + }); + } + + Widget _textBack(content, + {color = TEXT_BLACK_LIGHT, + size = TEXT_SMALL_2_SIZE, + isBold = false}) => + Text( + content, + style: TextStyle( + color: color, + fontSize: SizeUtil.getAxisBoth(size), + fontWeight: isBold ? FontWeight.w700 : null), + ); + + Widget _listItemContent() => Positioned( + bottom: 0.1, + left: SizeUtil.getAxisX(136.0), + child: Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular( + SizeUtil.getAxisBoth(22.0), + ), + gradient: LinearGradient(colors: [RED_LIGHT, RED]), + ), + height: SizeUtil.getAxisY(182.0), + width: SizeUtil.getAxisY(528.0), + child: Stack( + children: [ + Positioned( + top: SizeUtil.getAxisY(27.0), + left: SizeUtil.getAxisX(87.0), + child: _textBack("Blanche Garcia", + size: TEXT_SMALL_3_SIZE, isBold: true), + ), + Positioned( + top: SizeUtil.getAxisY(66.0), + left: SizeUtil.getAxisX(87.0), + child: + _textBack("Netherlands Antilles", size: TEXT_NORMAL_SIZE), + ), + Positioned( + top: SizeUtil.getAxisY(27.0), + right: SizeUtil.getAxisX(33.0), + child: _textBack("31 Dec"), + ), + Positioned( + bottom: SizeUtil.getAxisY(30.0), + left: SizeUtil.getAxisX(90.0), + child: Container( + alignment: AlignmentDirectional.centerStart, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon( + Icons.favorite_border, + color: TEXT_BLACK, + size: SizeUtil.getAxisBoth(30.0), + ), + SizedBox( + width: SizeUtil.getAxisX(16.0), + ), + _textBack("72"), + SizedBox( + width: SizeUtil.getAxisX(45.0), + ), + Icon( + Icons.chat, + color: TEXT_BLACK, + size: SizeUtil.getAxisBoth(30.0), + ), + SizedBox( + width: SizeUtil.getAxisX(16.0), + ), + _textBack("44"), + ], + ), + ), + ), + ], + ), + ), + ); + + Widget _listItem(index) => Container( + alignment: AlignmentDirectional.topStart, + constraints: BoxConstraints.expand(height: SizeUtil.getAxisY(850.0)), + child: Stack( + children: [ + Container( + alignment: AlignmentDirectional.topStart, + margin: EdgeInsets.only( + top: SizeUtil.getAxisY(45.0), + bottom: SizeUtil.getAxisY(84.0), + left: SizeUtil.getAxisX(30.0), + right: SizeUtil.getAxisX(30.0), + ), + child: Image.asset( + index % 2 == 0 + ? FeedImage.feed11_city1 + : FeedImage.feed11_city2, + fit: BoxFit.cover, + ), + ), + _listItemContent(), + Positioned( + width: SizeUtil.getAxisBoth(100.0), + height: SizeUtil.getAxisBoth(100.0), + bottom: SizeUtil.getAxisY(41.0), + left: SizeUtil.getAxisX(81.0), + child: Image.asset(FeedImage.feed11_header), + ), + ], + ), + ); + + Widget _listContainer() => Container( + child: ListView.builder( + itemBuilder: (context, index) { + return _listItem(index); + }, + itemCount: 4, + padding: EdgeInsets.only(top: 0.1), + ), + ); + + Widget _tabTitleItem(title, isCurrent) => Container( + width: SizeUtil.getAxisX(220.0), + height: SizeUtil.getAxisY(154.0), + alignment: AlignmentDirectional.center, + decoration: BoxDecoration( + gradient: LinearGradient( + colors: isCurrent + ? [RED_LIGHT, RED] + : [Color(0x44FFFFFF), Color(0x44FFFFFF)]), + borderRadius: BorderRadius.circular( + SizeUtil.getAxisX(22.0), + ), + boxShadow: isCurrent + ? [BoxShadow(color: DARK_COLOR, offset: Offset(0.0, 2.0))] + : null), + child: Text( + title, + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE), + ), + ), + ); + + Widget _tabView(context) { + return DefaultTabController( + length: 3, + child: Column( + children: [ + Container( + constraints: + BoxConstraints.expand(height: SizeUtil.getAxisY(154.0)), + child: TabBar( + controller: tabController, + tabs: [ + _tabTitleItem("Products", curTab == 0), + _tabTitleItem("Recent", curTab == 1), + _tabTitleItem("News", curTab == 2), + ], + isScrollable: false, + indicatorWeight: 0.0001, + ), + ), + Expanded( + child: TabBarView( + children: [ + _listContainer(), + _listContainer(), + _listContainer(), + ], + controller: tabController, + ), + ) + ], + )); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + decoration: + BoxDecoration(gradient: LinearGradient(colors: [YELLOW, GREEN])), + child: Column( + children: [ + TopTitleBar(), + SizedBox( + height: SizeUtil.getAxisY(43.0), + ), + Expanded( + child: _tabView(context), + ), + ], + ), + ), + ); + } + + @override + void dispose() { + tabController.dispose(); + super.dispose(); + } +} diff --git a/lib/page/feed/FeedPageTen.dart b/lib/page/feed/FeedPageTen.dart new file mode 100644 index 0000000..db24d56 --- /dev/null +++ b/lib/page/feed/FeedPageTen.dart @@ -0,0 +1,190 @@ +/// +/// Created by NieBin on 2018/12/26 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'top_title.dart'; +import 'package:flutter_ui_nice/const/color_const.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; +import 'feed_const.dart'; + +class FeedPageTen extends StatefulWidget { + @override + _FeedState createState() => _FeedState(); +} + +class _FeedState extends State { + Widget _redBackground() => Container( + alignment: AlignmentDirectional.topStart, + constraints: BoxConstraints.expand( + height: SizeUtil.getAxisY(1043.0), width: SizeUtil.getAxisX(630.0)), + margin: EdgeInsets.only( + top: SizeUtil.getAxisY(82.0), + ), + decoration: BoxDecoration( + gradient: LinearGradient(colors: [RED_LIGHT, RED]), + borderRadius: BorderRadius.only( + topRight: Radius.circular(SizeUtil.getAxisBoth(22.0)), + bottomLeft: Radius.circular(SizeUtil.getAxisBoth(22.0)), + bottomRight: Radius.circular(SizeUtil.getAxisBoth(22.0)), + ), + ), + ); + + Widget _imageGroup() => Container( + constraints: BoxConstraints.expand( + height: SizeUtil.getAxisY(495.0), width: SizeUtil.getAxisX(685.0)), + margin: EdgeInsets.only(top: SizeUtil.getAxisY(43.0)), + child: Row( + children: [ + Container( + constraints: + BoxConstraints.expand(width: SizeUtil.getAxisX(442.0)), + child: Image.asset( + FeedImage.shop_river, + fit: BoxFit.fill, + ), + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + flex: 1, + child: Image.asset( + FeedImage.white_back, + fit: BoxFit.cover, + ), + ), + Expanded( + flex: 1, + child: Image.asset( + FeedImage.city, + fit: BoxFit.cover, + ), + ), + ], + ), + ) + ], + ), + ); + + Widget _header() => Padding( + padding: EdgeInsets.only(left: SizeUtil.getAxisX(26.0)), + child: Container( + width: SizeUtil.getAxisBoth(CIRCLE_BUTTON_HEIGHT), + height: SizeUtil.getAxisBoth(CIRCLE_BUTTON_HEIGHT), + decoration: BoxDecoration( + image: DecorationImage(image: AssetImage(FeedImage.white_back)), + borderRadius: BorderRadius.circular( + SizeUtil.getAxisBoth(22.0), + ), + ), + ), + ); + + Widget _postDesc() => Container( + padding: EdgeInsets.only( + left: SizeUtil.getAxisX(60.0), + right: SizeUtil.getAxisX(152.0), + top: SizeUtil.getAxisY(51.0)), + child: RichText( + text: TextSpan( + children: [ + TextSpan( + text: "Hristo ", + style: TextStyle(fontWeight: FontWeight.w700)), + TextSpan( + text: + "added 127 new photos to the Lorem Ipsum dolr sit amet.") + ], + style: TextStyle( + color: TEXT_BLACK_LIGHT, + fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE), + ), + ), + ), + ); + + Widget _timeDesc() => Container( + padding: EdgeInsets.only(right: SizeUtil.getAxisX(159.0)), + alignment: AlignmentDirectional.centerEnd, + child: Text( + "1 MINUTE", + style: TextStyle( + color: TEXT_BLACK_LIGHT, + fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_SIZE)), + ), + ); + + Widget _contentView() => Container( + padding: EdgeInsets.only(top: SizeUtil.getAxisY(41.0)), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + _header(), + _timeDesc(), + _postDesc(), + _imageGroup(), + Container( + alignment: AlignmentDirectional.topStart, + margin: EdgeInsets.only( + top: SizeUtil.getAxisY(81.0), + left: SizeUtil.getAxisX(60.0), + right: SizeUtil.getAxisX(200.0)), + child: Text( + "LOREM IPSUM", + style: TextStyle( + color: TEXT_BLACK_LIGHT, + fontSize: SizeUtil.getAxisBoth(TEXT_LARGE_SIZE), + fontWeight: FontWeight.w700), + ), + ), + Container( + alignment: AlignmentDirectional.topStart, + margin: EdgeInsets.only( + top: SizeUtil.getAxisY(29.0), + left: SizeUtil.getAxisX(60.0), + right: SizeUtil.getAxisX(200.0)), + child: Text( + "Cras quis nulla com, aliquam lectus sed, blandit augue. Duis tincidunt urna non pretium", + style: TextStyle( + color: TEXT_BLACK_LIGHT, + fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE), + ), + ), + ) + ], + ), + ); + + Widget _body() => Stack( + children: [ + _redBackground(), + _contentView(), + ], + ); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + constraints: BoxConstraints.expand(), + decoration: BoxDecoration( + gradient: LinearGradient(colors: [YELLOW, GREEN]), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TopTitleBar(), + _body(), + ], + ), + ), + ); + } +} diff --git a/lib/page/feed/FeedPageThirteen.dart b/lib/page/feed/FeedPageThirteen.dart new file mode 100644 index 0000000..1cf9977 --- /dev/null +++ b/lib/page/feed/FeedPageThirteen.dart @@ -0,0 +1,249 @@ +/// +/// Created by NieBin on 2018/12/26 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'top_title.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; +import 'package:flutter_ui_nice/util/GradientUtil.dart'; +import 'feed_const.dart'; +import 'package:flutter_ui_nice/const/color_const.dart'; + +const posts = [ + { + "header": FeedImage.feed13_header1, + "name": "Katherine Farmer", + "time": "1 hour ago", + "desc": "Decorate For Less With Art Posters", + "like": "123", + "chat": "67", + "share": "12", + "images": [ + FeedImage.feed13_pic1, + FeedImage.feed13_pic2, + FeedImage.feed13_pic3, + FeedImage.feed13_pic4, + ] + }, + { + "header": FeedImage.feed13_header2, + "name": "Tyler Guerrero", + "time": "2 hour ago", + "desc": "", + "like": "123", + "chat": "67", + "share": "12", + "images": [ + FeedImage.feed13_pic1, + FeedImage.feed13_pic2, + FeedImage.feed13_pic3, + FeedImage.feed13_pic4, + ] + }, + { + "header": FeedImage.feed13_header3, + "name": "Hettie Nguyen", + "time": "3 hour ago", + "desc": "Decorate For Less With Art Posters", + "like": "123", + "chat": "67", + "share": "12", + "images": [ + FeedImage.feed13_pic1, + FeedImage.feed13_pic2, + FeedImage.feed13_pic3, + FeedImage.feed13_pic4, + ] + }, + { + "header": FeedImage.feed13_header1, + "name": "Katherine Farmer", + "time": "4 hour ago", + "desc": "", + "like": "123", + "chat": "67", + "share": "12", + "images": [ + FeedImage.feed13_pic1, + FeedImage.feed13_pic2, + FeedImage.feed13_pic3, + FeedImage.feed13_pic4, + ] + } +]; + +class FeedPageThirteen extends StatefulWidget { + @override + _FeedState createState() => _FeedState(); +} + +class _FeedState extends State { + Widget _textBack(content, + {color = TEXT_BLACK_LIGHT, + size = TEXT_SMALL_2_SIZE, + isBold = false}) => + Text( + content, + style: TextStyle( + color: color, + fontSize: SizeUtil.getAxisBoth(size), + fontWeight: isBold ? FontWeight.w700 : null), + ); + + Widget _itemHeader(item) => Container( + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Image.asset( + item["header"], + height: SizeUtil.getAxisBoth(84.0), + width: SizeUtil.getAxisBoth(84.0), + ), + SizedBox( + width: SizeUtil.getAxisX(51.0), + ), + Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + _textBack(item["name"], size: TEXT_SMALL_3_SIZE, isBold: true), + SizedBox( + height: SizeUtil.getAxisY(13.0), + ), + _textBack(item["time"], size: TEXT_NORMAL_SIZE), + ], + ) + ], + ), + ); + +// + Widget _itemAction(item) => Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + _actionChild(Icons.favorite_border, item["like"]), + SizedBox(width: SizeUtil.getAxisX(75.0)), + _actionChild(Icons.chat, item["chat"]), + SizedBox(width: SizeUtil.getAxisX(75.0)), + _actionChild(Icons.share, item["share"]), + ], + ); + + Widget _actionChild(icon, value) => Row( + children: [ + Icon( + icon, + color: TEXT_BLACK_LIGHT, + size: SizeUtil.getAxisBoth(30.0), + ), + SizedBox(width: SizeUtil.getAxisX(20.0)), + _textBack(value), + ], + ); + + Widget _backCard(isEmpty) => Container( + decoration: BoxDecoration( + gradient: !isEmpty ? GradientUtil.red() : GradientUtil.blue(), + borderRadius: BorderRadius.circular( + SizeUtil.getAxisBoth(22.0), + ), + boxShadow: [ + BoxShadow(color: Color(0x11000000), offset: Offset(0.1, 4.0)) + ]), + margin: EdgeInsets.only( + left: SizeUtil.getAxisX(80.0), right: SizeUtil.getAxisX(40.0)), + ); + + Widget _itemText(item) => Container( + child: _textBack(item["desc"], size: TEXT_SMALL_3_SIZE), + ); + + Widget _itemImages(item) => Container( + alignment: AlignmentDirectional.center, + constraints: BoxConstraints.expand(height: SizeUtil.getAxisY(170.0)), + child: ListView.builder( + itemBuilder: (context, index) { + var img = item["images"][index]; + return Container( + margin: EdgeInsets.only( + left: SizeUtil.getAxisX(20.0), + right: SizeUtil.getAxisX(20.0), + ), + child: Image.asset( + img, + width: SizeUtil.getAxisBoth(170.0), + height: SizeUtil.getAxisBoth(170.0), + ), + ); + }, + itemCount: item["images"].length, + scrollDirection: Axis.horizontal, + ), + ); + + Widget _listItem(item) => Container( + constraints: BoxConstraints.expand( + height: SizeUtil.getAxisY( + item["desc"].toString().isNotEmpty ? 350.0 : 469.0), + ), + margin: EdgeInsets.only(top: SizeUtil.getAxisY(40.0)), + child: Stack( + children: [ + _backCard(item["desc"].toString().isEmpty), + Positioned( + left: SizeUtil.getAxisX(25.0), + top: SizeUtil.getAxisY(46.0), + child: _itemHeader(item), + ), + Positioned( + left: SizeUtil.getAxisX(162.0), + bottom: SizeUtil.getAxisY(45.0), + child: _itemAction(item), + ), + item["desc"].toString().isEmpty + ? Container( + margin: EdgeInsets.only(top: SizeUtil.getAxisY(20.0)), + alignment: AlignmentDirectional.center, + child: _itemImages(item), + ) + : Positioned( + top: SizeUtil.getAxisY(156.0), + left: SizeUtil.getAxisX(160.0), + height: SizeUtil.getAxisY(70.0), + child: _itemText(item), + ), + ], + ), + ); + + Widget _body() => ListView.builder( + itemBuilder: (context, index) { + var item = posts[index % posts.length]; + return _listItem(item); + }, + itemCount: posts.length, + padding: EdgeInsets.only(top: 0.1), + ); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + decoration: BoxDecoration(gradient: GradientUtil.yellowGreen()), + child: Column( + children: [ + TopTitleBar( + rightImage: FeedImage.feed_add, + ), + Expanded( + child: _body(), + ) + ], + ), + ), + ); + } +} diff --git a/lib/page/feed/FeedPageTwelve.dart b/lib/page/feed/FeedPageTwelve.dart new file mode 100644 index 0000000..43ff04e --- /dev/null +++ b/lib/page/feed/FeedPageTwelve.dart @@ -0,0 +1,167 @@ +/// +/// Created by NieBin on 2018/12/26 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'feed_const.dart'; +import 'top_title.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; +import 'package:flutter_ui_nice/const/color_const.dart'; + +class FeedPageTwelve extends StatefulWidget { + @override + _FeedState createState() => _FeedState(); +} + +class _FeedState extends State { + Widget _textBack(content, + {color = TEXT_BLACK_LIGHT, + size = TEXT_SMALL_2_SIZE, + isBold = false}) => + Text( + content, + style: TextStyle( + color: color, + fontSize: SizeUtil.getAxisBoth(size), + fontWeight: isBold ? FontWeight.w700 : null), + ); + + Widget _listItemName() => Container( + alignment: AlignmentDirectional.bottomStart, + child: Column( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + _textBack("Hristo Hristov", size: TEXT_SMALL_3_SIZE, isBold: true), + SizedBox(height: SizeUtil.getAxisY(13.0)), + _textBack("4 hours ago", size: TEXT_NORMAL_SIZE), + ], + ), + ); + + Widget _action(icon, value) => Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Icon( + icon, + size: SizeUtil.getAxisBoth(30.0), + color: TEXT_BLACK_LIGHT, + ), + SizedBox(height: SizeUtil.getAxisY(26.0)), + _textBack(value) + ], + ); + + Widget _listItemAction() => Container( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + _action(Icons.favorite_border, "233"), + SizedBox(height: SizeUtil.getAxisY(56.0)), + _action(Icons.chat, "35"), + SizedBox(height: SizeUtil.getAxisY(56.0)), + _action(Icons.share, "12"), + SizedBox(height: SizeUtil.getAxisY(56.0)), + _action(Icons.more_vert, ""), + ]), + ); + + Widget _listItem(index) => Container( + height: SizeUtil.getAxisY(740.0), + decoration: BoxDecoration( + gradient: index % 2 == 1 + ? LinearGradient( + colors: [Color(0x55FFFFFF), Colors.transparent]) + : null), + padding: EdgeInsets.only( + top: SizeUtil.getAxisY(40.0), bottom: SizeUtil.getAxisY(20.0)), + child: Container( + child: Stack( + children: [ + Container( + height: SizeUtil.getAxisY(550.0), + width: SizeUtil.getAxisX(613.0), + child: Image.asset( + index % 2 == 0 ? FeedImage.feed12_pic1 : FeedImage.feed12_pic2, + fit: BoxFit.cover, + height: SizeUtil.getAxisY(550.0), + width: SizeUtil.getAxisX(613.0), + ), + ), + Positioned( + width: SizeUtil.getAxisBoth(CIRCLE_BUTTON_HEIGHT), + height: SizeUtil.getAxisBoth(CIRCLE_BUTTON_HEIGHT), + left: SizeUtil.getAxisX(24.0), + bottom: SizeUtil.getAxisY(89.0), + child: Image.asset( + FeedImage.feed12_header, + fit: BoxFit.cover, + ), + ), + Positioned( + left: SizeUtil.getAxisX(160.0), + bottom: SizeUtil.getAxisY(10.0), + child: _listItemName(), + ), + Positioned( + right: SizeUtil.getAxisX(40.0), + top: SizeUtil.getAxisY(40.0), + child: _listItemAction(), + ) + ], + )), + ); + + Widget _body() => ListView.builder( + itemBuilder: (context, index) { + return _listItem(index); + }, + itemCount: 4, + padding: EdgeInsets.only(top: 0.1), + ); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [YELLOW, GREEN], + begin: Alignment.topLeft, + end: Alignment.centerLeft)), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TopTitleBar(), + Expanded( + child: Stack( + children: [ + _body(), + Positioned( + width: SizeUtil.width, + bottom: SizeUtil.getAxisY(41.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + FloatingActionButton( + onPressed: () { + print("you have pressed the button"); + }, + child: Image.asset(FeedImage.feed12_plus), + ) + ], + ), + ) + ], + ), + ), + ], + ), + )); + } +} diff --git a/lib/page/feed/feed_const.dart b/lib/page/feed/feed_const.dart new file mode 100644 index 0000000..508e630 --- /dev/null +++ b/lib/page/feed/feed_const.dart @@ -0,0 +1,54 @@ +/// +/// Created by NieBin on 2018/12/26 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +import "package:flutter/material.dart"; + +class FeedStringConst { + static const FEED_NAME = "FEED"; +} + +const CIRCLE_BUTTON_HEIGHT = 87.0; +const TOP_BAR_HEIGHT = 152.0; +const TOP_BAR_GRADIENT_HEIGHT = 133.0; + +const TEXT_LARGE_SIZE = 40.0; +const TEXT_NORMAL_2_SIZE = 28.0; +const TEXT_NORMAL_SIZE = 26.0; +const TEXT_SMALL_SIZE = 20.0; +const TEXT_SMALL_2_SIZE = 22.0; +const TEXT_SMALL_3_SIZE = 24.0; + +class FeedImage { + static const IMAGE_PATH = "images/feed"; + static const more_circle = "$IMAGE_PATH/feed_more.png"; + static const search_circle = "$IMAGE_PATH/feed_search.png"; + static const white_back = "$IMAGE_PATH/white_background.png"; + static const feed_add = "$IMAGE_PATH/feed_add.png"; + static const city = "$IMAGE_PATH/city.png"; + static const shop_river = "$IMAGE_PATH/shop_river.png"; + static const feed11_city1 = "$IMAGE_PATH/feed11-city1.png"; + static const feed11_city2 = "$IMAGE_PATH/feed11-city2.png"; + static const feed11_header = "$IMAGE_PATH/feed11-header.png"; + static const feed12_pic1 = "$IMAGE_PATH/feed12_pic1.png"; + static const feed12_pic2 = "$IMAGE_PATH/feed12_pic2.png"; + static const feed12_header = "$IMAGE_PATH/feed12_header.png"; + static const feed12_plus = "$IMAGE_PATH/feed12_plus.png"; + + //Images for Feed1 + static const feed1_avatar1 = "$IMAGE_PATH/feed1_avatar1.png"; + static const feed1_avatar2 = "$IMAGE_PATH/feed1_avatar2.png"; + static const landscape = "$IMAGE_PATH/landscape.png"; + static const menonglass = "$IMAGE_PATH/menonglass.png"; + static const night = "$IMAGE_PATH/night.png"; + + //feed 13 + static const feed13_header1 = "$IMAGE_PATH/feed13_header1.png"; + static const feed13_header2 = "$IMAGE_PATH/feed13_header2.png"; + static const feed13_header3 = "$IMAGE_PATH/feed13_header3.png"; + + static const feed13_pic1 = "$IMAGE_PATH/feed13_pic1.png"; + static const feed13_pic2 = "$IMAGE_PATH/feed13_pic2.png"; + static const feed13_pic3 = "$IMAGE_PATH/feed13_pic3.png"; + static const feed13_pic4 = "$IMAGE_PATH/feed13_pic4.png"; +} diff --git a/lib/page/feed/top_title.dart b/lib/page/feed/top_title.dart new file mode 100644 index 0000000..4063862 --- /dev/null +++ b/lib/page/feed/top_title.dart @@ -0,0 +1,62 @@ +/// +/// Created by NieBin on 2018/12/26 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'feed_const.dart'; +import 'package:flutter_ui_nice/const/color_const.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; + +class TopTitleBar extends StatelessWidget { + TopTitleBar( + {this.leftImage = FeedImage.more_circle, + this.rightImage = FeedImage.search_circle}); + + final String leftImage; + final String rightImage; + + @override + Widget build(BuildContext context) { + return Container( + constraints: + BoxConstraints.expand(height: SizeUtil.getAxisY(TOP_BAR_HEIGHT)), + child: Stack( + children: [ + Container( + constraints: BoxConstraints.expand( + height: SizeUtil.getAxisY(TOP_BAR_GRADIENT_HEIGHT)), + decoration: + BoxDecoration(gradient: LinearGradient(colors: [YELLOW, BLUE])), + ), + Center( + child: Padding( + padding: EdgeInsets.only(top: SizeUtil.getAxisY(30.0)), + child: Text( + FeedStringConst.FEED_NAME, + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_2_SIZE), + fontWeight: FontWeight.w700), + ), + ), + ), + Container( + padding: EdgeInsets.symmetric(horizontal: SizeUtil.getAxisX(24.0)), + alignment: AlignmentDirectional.bottomStart, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Image.asset(leftImage, + width: SizeUtil.getAxisY(CIRCLE_BUTTON_HEIGHT), + height: SizeUtil.getAxisY(CIRCLE_BUTTON_HEIGHT)), + Image.asset(rightImage, + width: SizeUtil.getAxisY(CIRCLE_BUTTON_HEIGHT), + height: SizeUtil.getAxisY(CIRCLE_BUTTON_HEIGHT)) + ]), + ) + ], + ), + ); + } +} diff --git a/lib/page/home_page.dart b/lib/page/home_page.dart index 2fff6ee..2bf7a57 100644 --- a/lib/page/home_page.dart +++ b/lib/page/home_page.dart @@ -11,6 +11,8 @@ import 'package:flutter_ui_nice/view/AboutMeTitle.dart'; import 'package:flutter_ui_nice/const/size_const.dart'; import 'package:flutter_ui_nice/const/images_const.dart'; import 'package:flutter_ui_nice/const/color_const.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; +import 'package:flutter_ui_nice/util/GradientUtil.dart'; class HomePage extends StatelessWidget { final _scaffoldState = GlobalKey(); @@ -18,6 +20,7 @@ class HomePage extends StatelessWidget { Widget _topBar() => SliverAppBar( elevation: 1.0, pinned: true, + backgroundColor: BLUE, expandedHeight: 150.0, flexibleSpace: FlexibleSpaceBar( title: Padding( @@ -32,10 +35,10 @@ class HomePage extends StatelessWidget { SizedBox( width: 6.0, ), - Text( - StringConst.APP_NAME, - style: TextStyle(color: Colors.white), - ) + Text(StringConst.APP_NAME, + style: TextStyle( + color: TEXT_BLACK_LIGHT, + )) ], ), ), @@ -55,12 +58,8 @@ class HomePage extends StatelessWidget { return InkWell( child: Container( padding: EdgeInsets.symmetric(horizontal: 20.0), - decoration: BoxDecoration(boxShadow: [ - BoxShadow( - color: Colors.grey[800], - offset: Offset(0.0, 2.0), - ) - ]), + margin: EdgeInsets.only(bottom: 1.0), + decoration: BoxDecoration(gradient: GradientUtil.greenPurple()), constraints: BoxConstraints.expand(height: 60.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, @@ -69,7 +68,7 @@ class HomePage extends StatelessWidget { Text( item, style: TextStyle( - color: Colors.white, + color: TEXT_BLACK_LIGHT, fontSize: TEXT_NORMAL_SIZE, fontWeight: FontWeight.w700), ), @@ -82,7 +81,7 @@ class HomePage extends StatelessWidget { ), ), onTap: () { - Navigator.pop(context); +// Navigator.pop(context); Navigator.pushNamed(context, "$item"); }, ); @@ -102,10 +101,7 @@ class HomePage extends StatelessWidget { child: Container( padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 4.0), decoration: BoxDecoration( - gradient: LinearGradient(colors: [ - PURPLE, - Colors.grey[900], - ]), + gradient: GradientUtil.yellowGreen(), ), constraints: BoxConstraints.expand(height: 80.0), child: Center( @@ -120,8 +116,8 @@ class HomePage extends StatelessWidget { ), Text( StringConst.CREATE_BY, - style: - TextStyle(color: Colors.white, fontSize: TEXT_NORMAL_SIZE), + style: TextStyle( + color: TEXT_BLACK_LIGHT, fontSize: TEXT_NORMAL_SIZE), ), ], ), @@ -134,18 +130,22 @@ class HomePage extends StatelessWidget { showModalBottomSheet( context: context, builder: (context) => Material( - color: Colors.white, + color: GREEN, clipBehavior: Clip.antiAliasWithSaveLayer, shape: RoundedRectangleBorder( - borderRadius: BorderRadius.only( - topLeft: Radius.circular(20.0), - topRight: Radius.circular(20.0))), + borderRadius: BorderRadius.only( + topLeft: Radius.circular(20.0), + topRight: Radius.circular(20.0), + ), + ), child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ _header(), Expanded( - child: _menuList(menu), + child: Container( + child: _menuList(menu), + ), ), AboutMeTitle(), ], @@ -154,7 +154,41 @@ class HomePage extends StatelessWidget { ); } - Widget _gridItem(context, Menu menu) => InkWell( + LinearGradient _itemGradient(index) { + var gradient = GradientUtil.red( + begin: AlignmentDirectional.topStart, + end: AlignmentDirectional.bottomEnd, + opacity: 0.7); + switch (index % 4) { + case 0: + gradient = GradientUtil.red( + begin: AlignmentDirectional.topStart, + end: AlignmentDirectional.bottomEnd, + opacity: 0.7); + break; + case 1: + gradient = GradientUtil.greenPurple( + begin: AlignmentDirectional.topStart, + end: AlignmentDirectional.bottomEnd, + opacity: 0.7); + break; + case 2: + gradient = GradientUtil.greenRed( + begin: AlignmentDirectional.topStart, + end: AlignmentDirectional.bottomEnd, + opacity: 0.7); + break; + case 3: + gradient = GradientUtil.yellowBlue( + begin: AlignmentDirectional.topStart, + end: AlignmentDirectional.bottomEnd, + opacity: 0.7); + break; + } + return gradient; + } + + Widget _gridItem(context, Menu menu, index) => InkWell( onTap: () { _clickMenu(context, menu); }, @@ -167,11 +201,7 @@ class HomePage extends StatelessWidget { ), Container( constraints: BoxConstraints.expand(), - decoration: BoxDecoration( - gradient: RadialGradient( - colors: [PURPLE, Colors.grey[850].withOpacity(0.9)], - radius: 0.3), - ), + decoration: BoxDecoration(gradient: _itemGradient(index)), ), Container( constraints: BoxConstraints.expand(), @@ -182,7 +212,8 @@ class HomePage extends StatelessWidget { children: [ Icon( menu.icon, - color: Colors.white, + color: TEXT_BLACK_LIGHT, + size: 40.0, ), SizedBox( height: 4.0, @@ -190,7 +221,9 @@ class HomePage extends StatelessWidget { Text( menu.title, style: TextStyle( - color: Colors.white, fontWeight: FontWeight.w700), + color: TEXT_BLACK_LIGHT, + fontWeight: FontWeight.w700, + fontSize: 16.0), ) ], ), @@ -204,11 +237,11 @@ class HomePage extends StatelessWidget { gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( mainAxisSpacing: 4.0, crossAxisSpacing: 4.0, - childAspectRatio: 1.0, + childAspectRatio: 0.8, crossAxisCount: 2), delegate: SliverChildBuilderDelegate((context, index) { var menu = list[index]; - return _gridItem(context, menu); + return _gridItem(context, menu, index); }, childCount: list.length), ); @@ -240,6 +273,7 @@ class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { + SizeUtil.size = MediaQuery.of(context).size; return _showAndroid(context); } } diff --git a/lib/page/page_const.dart b/lib/page/page_const.dart index 1cde4cd..84fb949 100644 --- a/lib/page/page_const.dart +++ b/lib/page/page_const.dart @@ -7,3 +7,9 @@ export "home_page.dart"; export "empty_page.dart"; export 'signup/SignPageOne.dart'; export 'signup/SignPageTwo.dart'; + +export 'feed/FeedPageOne.dart'; +export 'feed/FeedPageTen.dart'; +export 'feed/FeedPageEleven.dart'; +export 'feed/FeedPageTwelve.dart'; +export 'feed/FeedPageThirteen.dart'; \ No newline at end of file diff --git a/lib/util/GradientUtil.dart b/lib/util/GradientUtil.dart new file mode 100644 index 0000000..8d9b684 --- /dev/null +++ b/lib/util/GradientUtil.dart @@ -0,0 +1,63 @@ +/// +/// Created by NieBin on 2018/12/28 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'package:flutter_ui_nice/const/color_const.dart'; + +class GradientUtil { + static LinearGradient _getLinearGradient(Color left, Color right, + {begin = AlignmentDirectional.centerStart, + end = AlignmentDirectional.centerEnd, + opacity = 1.0}) => + LinearGradient( + colors: [ + left.withOpacity(opacity), + right.withOpacity(opacity), + ], + begin: begin, + end: end, + ); + + static LinearGradient yellowGreen( + {begin = AlignmentDirectional.centerStart, + end = AlignmentDirectional.centerEnd, + opacity = 1.0}) => + _getLinearGradient(YELLOW, GREEN, + begin: begin, end: end, opacity: opacity); + + static LinearGradient red( + {begin = AlignmentDirectional.centerStart, + end = AlignmentDirectional.centerEnd, + opacity = 1.0}) => + _getLinearGradient(RED_LIGHT, RED, + begin: begin, end: end, opacity: opacity); + + static LinearGradient yellowBlue( + {begin = AlignmentDirectional.centerStart, + end = AlignmentDirectional.centerEnd, + opacity = 1.0}) => + _getLinearGradient(YELLOW, BLUE, + begin: begin, end: end, opacity: opacity); + + static LinearGradient blue( + {begin = AlignmentDirectional.centerStart, + end = AlignmentDirectional.centerEnd, + opacity = 1.0}) => + _getLinearGradient(BLUE_LIGHT, BLUE_DEEP, + begin: begin, end: end, opacity: opacity); + + static LinearGradient greenRed( + {begin = AlignmentDirectional.centerStart, + end = AlignmentDirectional.centerEnd, + opacity = 1.0}) => + _getLinearGradient(GREEN, RED, begin: begin, end: end, opacity: opacity); + + static LinearGradient greenPurple( + {begin = AlignmentDirectional.centerStart, + end = AlignmentDirectional.centerEnd, + opacity = 1.0}) => + _getLinearGradient(GREEN, PURPLE, + begin: begin, end: end, opacity: opacity); +} diff --git a/lib/util/SizeUtil.dart b/lib/util/SizeUtil.dart new file mode 100644 index 0000000..f55ec20 --- /dev/null +++ b/lib/util/SizeUtil.dart @@ -0,0 +1,46 @@ +/// +/// Created by NieBin on 2018/12/26 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import 'package:flutter/material.dart'; +import 'dart:math'; + +class SizeUtil { + static const _DESIGN_WIDTH = 750; + static const _DESIGN_HEIGHT = 1334; + + //logic size in device + static Size _logicSize; + + //device pixel radio. + + static get width { + return _logicSize.width; + } + + static get height { + return _logicSize.height; + } + + static set size(size) { + _logicSize = size; + } + + //@param w is the design w; + static double getAxisX(double w) { + return (w * width) / _DESIGN_WIDTH; + } + +// the y direction + static double getAxisY(double h) { + return (h * height) / _DESIGN_HEIGHT; + } + + // diagonal direction value with design size s. + static double getAxisBoth(double s) { + return s * + sqrt((width * width + height * height) / + (_DESIGN_WIDTH * _DESIGN_WIDTH + _DESIGN_HEIGHT * _DESIGN_HEIGHT)); + } +} diff --git a/lib/view/AboutMeTitle.dart b/lib/view/AboutMeTitle.dart index 4dc2f03..fdd65ac 100644 --- a/lib/view/AboutMeTitle.dart +++ b/lib/view/AboutMeTitle.dart @@ -6,23 +6,25 @@ import "package:flutter/material.dart"; import 'package:flutter_ui_nice/const/string_const.dart'; import 'package:flutter_ui_nice/const/color_const.dart'; +import 'package:flutter_ui_nice/const/images_const.dart'; class AboutMeTitle extends AboutListTile { AboutMeTitle() : super( - icon: FlutterLogo( - colors: Colors.deepPurple, - textColor: Colors.grey[900], + icon: Image.asset( + MainImagePath.image_app, + width: 40.0, + height: 40.0, ), applicationName: StringConst.APP_NAME, - applicationVersion: "1.0.1", - applicationLegalese: "Apache License 2.0", + applicationVersion: "1.0", + applicationLegalese: "MIT License 2.0", aboutBoxChildren: [ Padding( padding: EdgeInsets.symmetric(horizontal: 24.0, vertical: 4.0), child: Text( StringConst.CREATE_BY, - style: TextStyle(color: BLUE), + style: TextStyle(color: TEXT_BLACK_LIGHT), ), ) ]);