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/lib/const/color_const.dart b/lib/const/color_const.dart index 6471abd..ac45f05 100644 --- a/lib/const/color_const.dart +++ b/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); diff --git a/lib/page/feed/FeedPageEleven.dart b/lib/page/feed/FeedPageEleven.dart index 753208d..5e26947 100644 --- a/lib/page/feed/FeedPageEleven.dart +++ b/lib/page/feed/FeedPageEleven.dart @@ -29,9 +29,14 @@ class _FeedState extends State }); } - 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), ); diff --git a/lib/page/feed/FeedPageTen.dart b/lib/page/feed/FeedPageTen.dart index 76f8656..db24d56 100644 --- a/lib/page/feed/FeedPageTen.dart +++ b/lib/page/feed/FeedPageTen.dart @@ -101,7 +101,7 @@ class _FeedState extends State { "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 { 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 { 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 { 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), ), ), diff --git a/lib/page/feed/FeedPageThirteen.dart b/lib/page/feed/FeedPageThirteen.dart index 131f30b..1cf9977 100644 --- a/lib/page/feed/FeedPageThirteen.dart +++ b/lib/page/feed/FeedPageThirteen.dart @@ -4,6 +4,74 @@ /// 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 @@ -11,13 +79,171 @@ class FeedPageThirteen extends StatefulWidget { } 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( - appBar: AppBar( - title: Text("Feed Thirteen"), + body: Container( + decoration: BoxDecoration(gradient: GradientUtil.yellowGreen()), + child: Column( + children: [ + TopTitleBar( + rightImage: FeedImage.feed_add, + ), + Expanded( + child: _body(), + ) + ], + ), ), - body: Text("Feed page Thirteen"), ); } } diff --git a/lib/page/feed/FeedPageTwelve.dart b/lib/page/feed/FeedPageTwelve.dart index 9c10239..43ff04e 100644 --- a/lib/page/feed/FeedPageTwelve.dart +++ b/lib/page/feed/FeedPageTwelve.dart @@ -15,9 +15,14 @@ class FeedPageTwelve extends StatefulWidget { } class _FeedState extends State { - 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 { Icon( icon, size: SizeUtil.getAxisBoth(30.0), - color: TEXT_BLACK, + color: TEXT_BLACK_LIGHT, ), SizedBox(height: SizeUtil.getAxisY(26.0)), _textBack(value) diff --git a/lib/page/feed/feed_const.dart b/lib/page/feed/feed_const.dart index 2a797bc..508e630 100644 --- a/lib/page/feed/feed_const.dart +++ b/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"; } diff --git a/lib/util/GradientUtil.dart b/lib/util/GradientUtil.dart new file mode 100644 index 0000000..da5f009 --- /dev/null +++ b/lib/util/GradientUtil.dart @@ -0,0 +1,20 @@ +/// +/// 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(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); +}