comply the page 13 of group 5

lib/const/color_const.dart

@@ -10,8 +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(0xffF2A7B3);
 const GREEN = Color(0xffc7e5b4);
 const RED_LIGHT = Color(0xffFFC3A0);
 const TEXT_BLACK = Color(0xFF353535);
+const TEXT_BLACK_LIGHT = Color(0xFF34323D);

lib/page/feed/FeedPageEleven.dart

@@ -29,9 +29,14 @@ class _FeedState extends State<FeedPageEleven>
     });
   }
 
-  Widget _textBack(content, {size = TEXT_SMALL_2_SIZE, isBold = false}) => Text(
+  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),
       );

lib/page/feed/FeedPageTen.dart

@@ -101,7 +101,7 @@ class _FeedState extends State<FeedPageTen> {
                       "added 127 new photos to the Lorem Ipsum dolr sit amet.")
             ],
             style: TextStyle(
-              color: TEXT_BLACK,
+              color: TEXT_BLACK_LIGHT,
               fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE),
             ),
           ),
@@ -114,7 +114,7 @@ class _FeedState extends State<FeedPageTen> {
         child: Text(
           "1 MINUTE",
           style: TextStyle(
-              color: TEXT_BLACK,
+              color: TEXT_BLACK_LIGHT,
               fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_SIZE)),
         ),
       );
@@ -138,7 +138,7 @@ class _FeedState extends State<FeedPageTen> {
               child: Text(
                 "LOREM IPSUM",
                 style: TextStyle(
-                    color: TEXT_BLACK,
+                    color: TEXT_BLACK_LIGHT,
                     fontSize: SizeUtil.getAxisBoth(TEXT_LARGE_SIZE),
                     fontWeight: FontWeight.w700),
               ),
@@ -152,7 +152,7 @@ class _FeedState extends State<FeedPageTen> {
               child: Text(
                 "Cras quis nulla com, aliquam lectus sed, blandit augue. Duis tincidunt urna non pretium",
                 style: TextStyle(
-                  color: TEXT_BLACK,
+                  color: TEXT_BLACK_LIGHT,
                   fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE),
                 ),
               ),

lib/page/feed/FeedPageThirteen.dart

@@ -4,20 +4,246 @@
 /// Email: [email protected]
 ///
 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<FeedPageThirteen> {
+  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: <Widget>[
+            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: <Widget>[
+                _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: <Widget>[
+          _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: <Widget>[
+          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: <Widget>[
+            _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(
-      appBar: AppBar(
-        title: Text("Feed Thirteen"),
+      body: Container(
+        decoration: BoxDecoration(gradient: GradientUtil.yellowGreen()),
+        child: Column(
+          children: <Widget>[
+            TopTitleBar(
+              rightImage: FeedImage.feed_add,
+            ),
+            Expanded(
+              child: _body(),
+            )
+          ],
+        ),
       ),
-      body: Text("Feed page Thirteen"),
     );
   }
 }

lib/page/feed/FeedPageTwelve.dart

@@ -15,9 +15,14 @@ class FeedPageTwelve extends StatefulWidget {
 }
 
 class _FeedState extends State<FeedPageTwelve> {
-  Widget _textBack(content, {size = TEXT_SMALL_2_SIZE, isBold = false}) => Text(
+  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),
       );
@@ -42,7 +47,7 @@ class _FeedState extends State<FeedPageTwelve> {
           Icon(
             icon,
             size: SizeUtil.getAxisBoth(30.0),
-            color: TEXT_BLACK,
+            color: TEXT_BLACK_LIGHT,
           ),
           SizedBox(height: SizeUtil.getAxisY(26.0)),
           _textBack(value)

lib/page/feed/feed_const.dart

@@ -34,10 +34,21 @@ class FeedImage {
   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";
 }

lib/util/GradientUtil.dart

@@ -0,0 +1,20 @@
+///
+/// Created by NieBin on 2018/12/28
+/// Github: https://github.com/nb312
+/// Email: [email protected]
+///
+import "package:flutter/material.dart";
+import 'package:flutter_ui_nice/const/color_const.dart';
+
+class GradientUtil {
+  static LinearGradient _getLinearGradient(left, right) =>
+      LinearGradient(colors: [left, right]);
+
+  static LinearGradient yellowGreen() => _getLinearGradient(YELLOW, GREEN);
+
+  static LinearGradient red() => _getLinearGradient(RED_LIGHT, RED);
+
+  static LinearGradient yellowBlue() => _getLinearGradient(YELLOW, BLUE);
+
+  static LinearGradient blue() => _getLinearGradient(BLUE_LIGHT, BLUE_DEEP);
+}