abobkerElmaki · abobkerElmaki · Dec 30, 2018 · Dec 26, 2018 · Dec 26, 2018 · Dec 27, 2018
diff --git 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)
 
-<img src="doc/01-signup.jpg" height="100"/>
+<img src="doc/01-signup-no.jpg"/>
 
-<img src="doc/02-walk_through.jpg" height="120"/>
+<img src="doc/02-walk_through-no.jpg"/>
 
-<img src="doc/03-navigation.jpg" height="140"/>
+<img src="doc/03-navigation-no.jpg" />
 
-<img src="doc/04-profile.jpg" height="160"/>
+<img src="doc/04-profile-no.jpg"/>
 
-<img src="doc/05-feed.jpg" height="160"/>
+<img src="doc/05-feed-no.jpg"/>
 
-<img src="doc/06-chat.jpg" height="120"/>
+<img src="doc/06-chat-no.jpg" />
 
-<img src="doc/07-shopping.jpg" height="120"/>
+<img src="doc/07-shopping-no.jpg" />
 
-<img src="doc/08-statistics.jpg" height="120"/>
+<img src="doc/08-statistics-no.jpg"/>
 
-<img src="doc/09-media.jpg" height="120"/>
+<img src="doc/09-media-no.jpg"/>
 
-<img src="doc/10-camera.jpg" height="120"/>
+<img src="doc/10-camera-no.jpg"/>
+
+# 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
diff --git a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
diff --git a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
diff --git a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
diff --git a/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
diff --git a/doc/01-signup-no.jpg b/doc/01-signup-no.jpg
diff --git a/doc/02-walk_through-no.jpg b/doc/02-walk_through-no.jpg
diff --git a/doc/03-navigation-no.jpg b/doc/03-navigation-no.jpg
diff --git a/doc/04-profile-no.jpg b/doc/04-profile-no.jpg
diff --git a/doc/05-feed-no.jpg b/doc/05-feed-no.jpg
diff --git a/doc/06-chat-no.jpg b/doc/06-chat-no.jpg
diff --git a/doc/07-shopping-no.jpg b/doc/07-shopping-no.jpg
diff --git a/doc/08-statistics-no.jpg b/doc/08-statistics-no.jpg
diff --git a/doc/09-media-no.jpg b/doc/09-media-no.jpg
diff --git a/doc/10-camera-no.jpg b/doc/10-camera-no.jpg
diff --git a/images/camera/ic_launcher.png b/images/camera/ic_launcher.png
diff --git a/images/chat/ic_launcher.png b/images/chat/ic_launcher.png
diff --git a/images/feed/city.png b/images/feed/city.png
diff --git a/images/feed/feed11-city1.png b/images/feed/feed11-city1.png
diff --git a/images/feed/feed11-city2.png b/images/feed/feed11-city2.png
diff --git a/images/feed/feed11-header.png b/images/feed/feed11-header.png
diff --git a/images/feed/feed12_header.png b/images/feed/feed12_header.png
diff --git a/images/feed/feed12_pic1.png b/images/feed/feed12_pic1.png
diff --git a/images/feed/feed12_pic2.png b/images/feed/feed12_pic2.png
diff --git a/images/feed/feed12_plus.png b/images/feed/feed12_plus.png
diff --git a/images/feed/feed13_header1.png b/images/feed/feed13_header1.png
diff --git a/images/feed/feed13_header2.png b/images/feed/feed13_header2.png
diff --git a/images/feed/feed13_header3.png b/images/feed/feed13_header3.png
diff --git a/images/feed/feed13_pic1.png b/images/feed/feed13_pic1.png
diff --git a/images/feed/feed13_pic2.png b/images/feed/feed13_pic2.png
diff --git a/images/feed/feed13_pic3.png b/images/feed/feed13_pic3.png
diff --git a/images/feed/feed13_pic4.png b/images/feed/feed13_pic4.png
diff --git a/images/feed/feed1_avatar1.png b/images/feed/feed1_avatar1.png
diff --git a/images/feed/feed1_avatar2.png b/images/feed/feed1_avatar2.png
diff --git a/images/feed/feed_add.png b/images/feed/feed_add.png
diff --git a/images/feed/feed_more.png b/images/feed/feed_more.png
diff --git a/images/feed/feed_search.png b/images/feed/feed_search.png
diff --git a/images/feed/ic_launcher.png b/images/feed/ic_launcher.png
diff --git a/images/feed/landscape.png b/images/feed/landscape.png
diff --git a/images/feed/menonglass.png b/images/feed/menonglass.png
diff --git a/images/feed/night.png b/images/feed/night.png
diff --git a/images/feed/shop_river.png b/images/feed/shop_river.png
diff --git a/images/feed/white_background.png b/images/feed/white_background.png
diff --git a/images/main/ic_launcher.png b/images/main/ic_launcher.png
diff --git a/images/main/pic01.png b/images/main/pic01.png
diff --git a/images/main/pic02.png b/images/main/pic02.png
diff --git a/images/main/pic03.png b/images/main/pic03.png
diff --git a/images/main/pic04.png b/images/main/pic04.png
diff --git a/images/main/pic05.png b/images/main/pic05.png
diff --git a/images/main/pic06.png b/images/main/pic06.png
diff --git a/images/main/pic07.png b/images/main/pic07.png
diff --git a/images/main/pic08.png b/images/main/pic08.png
diff --git a/images/main/pic09.png b/images/main/pic09.png
diff --git a/images/main/pic10.png b/images/main/pic10.png
diff --git a/images/main/pic11.png b/images/main/pic11.png
diff --git a/images/media/ic_launcher.png b/images/media/ic_launcher.png
diff --git a/images/navigation/ic_launcher.png b/images/navigation/ic_launcher.png
diff --git a/images/profile/ic_launcher.png b/images/profile/ic_launcher.png
diff --git a/images/shopping/ic_launcher.png b/images/shopping/ic_launcher.png
diff --git a/images/signup/ic_launcher.png b/images/signup/ic_launcher.png
diff --git a/images/statistics/ic_launcher.png b/images/statistics/ic_launcher.png
diff --git a/images/walkthrough/ic_launcher.png b/images/walkthrough/ic_launcher.png
diff --git 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
@@ -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
@@ -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
@@ -4,23 +4,36 @@ 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());
 
 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
@@ -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<FeedPageEleven>
+    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: <Widget>[
+              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: <Widget>[
+                      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: <Widget>[
+            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: <Widget>[
+            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: <Widget>[
+            TopTitleBar(),
+            SizedBox(
+              height: SizeUtil.getAxisY(43.0),
+            ),
+            Expanded(
+              child: _tabView(context),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    tabController.dispose();
+    super.dispose();
+  }
+}