diff --git a/assets/images/feed/feed_pic3_01.jpg b/assets/images/feed/feed_pic3_01.jpg new file mode 100644 index 0000000..2aa5157 Binary files /dev/null and b/assets/images/feed/feed_pic3_01.jpg differ diff --git a/assets/images/feed/feed_pic3_02.jpg b/assets/images/feed/feed_pic3_02.jpg new file mode 100644 index 0000000..040adc3 Binary files /dev/null and b/assets/images/feed/feed_pic3_02.jpg differ diff --git a/assets/images/feed/feed_pic3_03.jpg b/assets/images/feed/feed_pic3_03.jpg new file mode 100644 index 0000000..77a652a Binary files /dev/null and b/assets/images/feed/feed_pic3_03.jpg differ diff --git a/assets/images/feed/feed_pic3_header_01.jpg b/assets/images/feed/feed_pic3_header_01.jpg new file mode 100644 index 0000000..12c8905 Binary files /dev/null and b/assets/images/feed/feed_pic3_header_01.jpg differ diff --git a/assets/images/feed/feed_pic3_header_02.jpg b/assets/images/feed/feed_pic3_header_02.jpg new file mode 100644 index 0000000..54886d0 Binary files /dev/null and b/assets/images/feed/feed_pic3_header_02.jpg differ diff --git a/assets/images/feed/feed_pic3_header_03.jpg b/assets/images/feed/feed_pic3_header_03.jpg new file mode 100644 index 0000000..529b449 Binary files /dev/null and b/assets/images/feed/feed_pic3_header_03.jpg differ diff --git a/assets/images/feed/feed_pic3_left.jpg b/assets/images/feed/feed_pic3_left.jpg new file mode 100644 index 0000000..acdba92 Binary files /dev/null and b/assets/images/feed/feed_pic3_left.jpg differ diff --git a/lib/main.dart b/lib/main.dart index df9b877..94dd94f 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -44,6 +44,7 @@ class MyApp extends StatelessWidget { ///FEED group page FEED_PAGES[0]: (context) => FeedPageOne(), FEED_PAGES[1]: (context) => FeedPageTwo(), + FEED_PAGES[2]: (context) => FeedThreePage(), FEED_PAGES[3]: (context) => FeedPageFour(), FEED_PAGES[4]: (context) => FeedFivePage(), FEED_PAGES[9]: (context) => FeedPageTen(), diff --git a/lib/page/feed/feed_const.dart b/lib/page/feed/feed_const.dart index e20cc00..ff2f001 100644 --- a/lib/page/feed/feed_const.dart +++ b/lib/page/feed/feed_const.dart @@ -48,6 +48,15 @@ class FeedImage { static const feed2_image2 = "$IMAGE_PATH/feed2_image2.png"; static const heart = "$IMAGE_PATH/heart.png"; +//feed 3 + static const FEED_3_PIC_01 = "$IMAGE_PATH/feed_pic3_01.jpg"; + static const FEED_3_PIC_02 = "$IMAGE_PATH/feed_pic3_02.jpg"; + static const FEED_3_PIC_03 = "$IMAGE_PATH/feed_pic3_03.jpg"; + static const FEED_3_PIC_HEADER_01 = "$IMAGE_PATH/feed_pic3_header_01.jpg"; + static const FEED_3_PIC_HEADER_02 = "$IMAGE_PATH/feed_pic3_header_02.jpg"; + static const FEED_3_PIC_HEADER_03 = "$IMAGE_PATH/feed_pic3_header_03.jpg"; + static const FEED_3_PIC_LEFT = "$IMAGE_PATH/feed_pic3_left.jpg"; + //Image for feed 5; static const feed5_pic_01 = "$IMAGE_PATH/feed_pic5_01.jpg"; diff --git a/lib/page/feed/feed_three_page.dart b/lib/page/feed/feed_three_page.dart new file mode 100644 index 0000000..1e1dad7 --- /dev/null +++ b/lib/page/feed/feed_three_page.dart @@ -0,0 +1,379 @@ +/// +/// Created by NieBin on 2019/2/17 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import 'feed_const.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; +import 'package:flutter_ui_nice/const/_const.dart'; +import 'package:flutter_ui_nice/util/GradientUtil.dart'; + +const contents = [ + { + "time": "2019-02-17", + "contents": [ + { + "type": 0, + "header": FeedImage.FEED_3_PIC_HEADER_01, + "des": "Hristo added 127 new photos.", + "pic": FeedImage.FEED_3_PIC_01, + "contents": "", + "time": "10m" + }, + { + "type": 1, + "header": FeedImage.FEED_3_PIC_HEADER_02, + "des": "Samanta lorem ipsum dolor sit amet.", + "pic": FeedImage.FEED_3_PIC_02, + "contents": "", + "time": "2h" + }, + { + "type": 2, + "header": FeedImage.FEED_3_PIC_HEADER_03, + "des": "Mila Valentino loem ipsum dolsit amet.", + "pic": FeedImage.FEED_3_PIC_03, + "contents": + "Excepteur sint occaecat cupitat non proident, sunt in culpa qui officia deserunt mollit anim", + "time": "6h" + }, + ] + }, + { + "time": "2019-02-17", + "contents": [ + { + "type": 0, + "header": FeedImage.FEED_3_PIC_HEADER_03, + "des": "Hristo added 127 new photos.", + "pic": FeedImage.FEED_3_PIC_03, + "contents": "", + "time": "10m" + }, + { + "type": 1, + "header": FeedImage.FEED_3_PIC_HEADER_01, + "des": "Samanta lorem ipsum dolor sit amet.", + "pic": FeedImage.FEED_3_PIC_01, + "contents": "", + "time": "2h" + }, + { + "type": 2, + "header": FeedImage.FEED_3_PIC_HEADER_02, + "des": "Mila Valentino loem ipsum dolsit amet.", + "pic": FeedImage.FEED_3_PIC_02, + "contents": + "Excepteur sint occaecat cupitat non proident, sunt in culpa qui officia deserunt mollit anim", + "time": "6h" + }, + ] + }, + { + "time": "2019-02-17", + "contents": [ + { + "type": 0, + "header": FeedImage.FEED_3_PIC_HEADER_01, + "des": "Hristo added 127 new photos.", + "pic": FeedImage.FEED_3_PIC_01, + "contents": "", + "time": "10m" + }, + { + "type": 1, + "header": FeedImage.FEED_3_PIC_HEADER_02, + "des": "Samanta lorem ipsum dolor sit amet.", + "pic": FeedImage.FEED_3_PIC_02, + "contents": "", + "time": "2h" + }, + { + "type": 2, + "header": FeedImage.FEED_3_PIC_HEADER_03, + "des": "Mila Valentino loem ipsum dolsit amet.", + "pic": FeedImage.FEED_3_PIC_03, + "contents": + "Excepteur sint occaecat cupitat non proident, sunt in culpa qui officia deserunt mollit anim", + "time": "6h" + }, + ] + }, +]; + +class FeedThreePage extends StatefulWidget { + @override + _FeedThreeState createState() => _FeedThreeState(); +} + +class _FeedThreeState extends State { + Widget _left() => Container( + margin: EdgeInsets.only( + top: SizeUtil.getAxisY(67), + left: SizeUtil.getAxisX(22), + ), + height: SizeUtil.getAxisBoth(100), + width: SizeUtil.getAxisBoth(100), + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage( + FeedImage.FEED_3_PIC_LEFT, + ), + fit: BoxFit.cover), + shape: BoxShape.circle, + ), + ); + + Widget _contentsFirst(json) => Stack( + children: [ + Container( + margin: EdgeInsets.only(left: SizeUtil.getAxisX(302)), + alignment: Alignment.center, + height: SizeUtil.getAxisY(340), + child: Text( + "+126", + textAlign: TextAlign.center, + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.w700, + fontSize: SizeUtil.getAxisBoth(40)), + ), + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(10), + bottomLeft: Radius.circular(10), + ), + image: DecorationImage( + fit: BoxFit.cover, + alignment: Alignment.topRight, + image: AssetImage( + json["pic"], + ), + ), + ), + ), + Positioned( + top: SizeUtil.getAxisY(174), + child: Container( +// color: BLUE_LIGHT, + height: SizeUtil.getAxisY(100), + width: SizeUtil.getAxisX(100), + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage(json["header"]), fit: BoxFit.cover), + borderRadius: BorderRadius.circular(10)), + ), + ), + Positioned( + top: SizeUtil.getAxisY(310), + child: Container( + width: SizeUtil.getAxisX(230), + child: Text( + json["des"], + style: TextStyle( + fontSize: SizeUtil.getAxisBoth(26), color: TEXT_BLACK), + ), + ), + ), + Container( + color: TEXT_BLACK, + margin: EdgeInsets.only( + top: SizeUtil.getAxisY(430), + ), + width: SizeUtil.getAxisX(470), + height: SizeUtil.getAxisY(3), + ), + ], + ); + + Widget _contentsSecond(json) => Container( + alignment: Alignment.topLeft, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + margin: EdgeInsets.only(top: SizeUtil.getAxisY(46)), + alignment: Alignment.topLeft, + height: SizeUtil.getAxisY(100), + width: SizeUtil.getAxisX(100), + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage(json["header"]), fit: BoxFit.cover), + borderRadius: BorderRadius.circular(10)), + ), + Container( + padding: EdgeInsets.symmetric(vertical: SizeUtil.getAxisY(44)), + child: Text( + json["des"], + style: TextStyle( + fontSize: SizeUtil.getAxisBoth(26), color: TEXT_BLACK), + ), + ), + Container( + color: TEXT_BLACK, + width: SizeUtil.getAxisX(470), + height: SizeUtil.getAxisY(3), + ), + ], + ), + ); + + Widget _contentsThree(json) => Stack( + children: [ + Positioned( + top: SizeUtil.getAxisY(60), + child: Container( +// color: BLUE_LIGHT, + height: SizeUtil.getAxisY(100), + width: SizeUtil.getAxisX(100), + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage(json["header"]), fit: BoxFit.cover), + borderRadius: BorderRadius.circular(10)), + ), + ), + Container( + margin: EdgeInsets.only( + left: SizeUtil.getAxisX(302), top: SizeUtil.getAxisY(34)), + alignment: Alignment.center, + height: SizeUtil.getAxisY(260), + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(10), + bottomLeft: Radius.circular(10), + ), + image: DecorationImage( + fit: BoxFit.cover, + alignment: Alignment.topRight, + image: AssetImage( + json["pic"], + ), + ), + ), + ), + Positioned( + top: SizeUtil.getAxisY(194), + child: Container( + width: SizeUtil.getAxisX(270), + child: Text( + json["des"], + style: TextStyle( + fontSize: SizeUtil.getAxisBoth(26), color: TEXT_BLACK), + ), + ), + ), + Positioned( + top: SizeUtil.getAxisY(344), + child: Container( + width: SizeUtil.getAxisX(438), + child: Text( + json["contents"], + style: TextStyle( + fontSize: SizeUtil.getAxisBoth(26), color: TEXT_BLACK), + ), + ), + ), + ], + ); + + Widget _listContent(days) => Container( + padding: EdgeInsets.only(left: SizeUtil.getAxisX(48)), + child: Column( + children: [ + _contentsFirst(days[0]), + _contentsSecond(days[1]), + Expanded( + child: _contentsThree(days[2]), + ) + ], + ), + ); + + Widget _listDays(days) => Container( + child: Stack( + children: [ + Positioned( + left: SizeUtil.getAxisX(32), + top: SizeUtil.getAxisY(320), + child: Text(days[0]["time"]), + ), + Positioned( + left: SizeUtil.getAxisX(32), + top: SizeUtil.getAxisY(620), + child: Text(days[1]["time"]), + ), + Positioned( + left: SizeUtil.getAxisX(32), + top: SizeUtil.getAxisY(900), + child: Text(days[2]["time"]), + ), + Container( + height: SizeUtil.getAxisY(1140), + margin: EdgeInsets.only( + top: SizeUtil.getAxisY(52), left: SizeUtil.getAxisY(134)), + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(10), + bottomLeft: Radius.circular(10), + ), + gradient: GradientUtil.red()), + ), + Container( + height: SizeUtil.getAxisY(1192), + margin: EdgeInsets.only(left: SizeUtil.getAxisY(134)), + child: _listContent(days), + ), + ], + ), + ); + + Widget _list() => Container( + child: ListView.builder( + itemBuilder: (context, index) => Container( + child: Stack( + children: [ + Container( + padding: EdgeInsets.symmetric( + horizontal: SizeUtil.getAxisX(134), + vertical: SizeUtil.getAxisY(54)), + child: Text( + contents[index]["time"], + style: TextStyle( + fontSize: SizeUtil.getAxisBoth(26), + fontWeight: FontWeight.w700), + ), + ), + Container( + padding: EdgeInsets.only( + top: SizeUtil.getAxisY(70), + ), + child: Container( + height: SizeUtil.getAxisY(1207), + child: _listDays(contents[index]["contents"]), + ), + ) + ], + ), + ), + itemCount: contents.length, + shrinkWrap: true, + ), + ); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + constraints: BoxConstraints.expand(), + decoration: BoxDecoration(gradient: GradientUtil.yellowBlue()), + child: Stack( + children: [ + _left(), + _list(), + ], + ), + ), + ); + } +} diff --git a/lib/page/page_const.dart b/lib/page/page_const.dart index 455a251..cbca4db 100644 --- a/lib/page/page_const.dart +++ b/lib/page/page_const.dart @@ -31,6 +31,7 @@ export 'feed/FeedPageTen.dart'; export 'feed/FeedPageEleven.dart'; export 'feed/FeedPageTwelve.dart'; export 'feed/FeedPageThirteen.dart'; +export 'feed/feed_three_page.dart'; export 'shopping/ShopPageEighteen.dart'; export 'shopping/ShopPageNineteen.dart';