From 03315fb0178efc77d5875a4a44fd989f7f6b9c8e Mon Sep 17 00:00:00 2001 From: Waffulz <35786496+Waffulz@users.noreply.github.com> Date: Mon, 31 Dec 2018 22:58:16 -0600 Subject: [PATCH 1/2] pageFour -REMEMBER TO CLEAN AND REFACTOR THE CODE --- lib/main.dart | 2 +- lib/page/feed/FeedPageFour.dart | 145 ++++++++++++++++++++++++++++++++ lib/page/page_const.dart | 1 + 3 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 lib/page/feed/FeedPageFour.dart diff --git a/lib/main.dart b/lib/main.dart index 6539062..46fd4cf 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -26,7 +26,7 @@ class MyApp extends StatelessWidget { FEED_PAGES[0]: (context) => FeedPageOne(), FEED_PAGES[0]: (context) => FeedPageOne(), FEED_PAGES[0]: (context) => FeedPageOne(), - FEED_PAGES[0]: (context) => FeedPageOne(), + FEED_PAGES[3]: (context) => FeedPageFour(), FEED_PAGES[0]: (context) => FeedPageOne(), FEED_PAGES[0]: (context) => FeedPageOne(), FEED_PAGES[9]: (context) => FeedPageTen(), diff --git a/lib/page/feed/FeedPageFour.dart b/lib/page/feed/FeedPageFour.dart new file mode 100644 index 0000000..2da8994 --- /dev/null +++ b/lib/page/feed/FeedPageFour.dart @@ -0,0 +1,145 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_ui_nice/const/color_const.dart'; +import 'package:flutter_ui_nice/page/feed/feed_const.dart'; +import 'package:flutter_ui_nice/page/feed/top_title.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; + +class FeedPageFour extends StatefulWidget { + @override + _FeedPageFourState createState() => _FeedPageFourState(); +} + +class _FeedPageFourState extends State { + Widget _pinkCard() { + return Center( + child: Container( + margin: EdgeInsets.symmetric(vertical: 40.0), + height: 450, + width: deviceWidth * 0.73, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.0), + boxShadow: [ + BoxShadow( + color: Colors.black12, + blurRadius: 20.0, + spreadRadius: 5.0, + offset: Offset( + 10.0, // horizontal, move right 10 + 10.0, // vertical, move down 10 + ), + ) + ], + gradient: LinearGradient(colors: [RED_LIGHT, RED])), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + width: double.infinity, + margin: EdgeInsets.all(22), + child: Text('1 MINUTE', + style: TextStyle( + color: Colors.black38, + fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE)), + textAlign: TextAlign.right), + ), + Container( + margin: EdgeInsets.symmetric(horizontal: 20), + child: Text( + 'Hristo added 127 new photos to Lorem Ipsum dolr sit amet.')), + Expanded(child: Container()), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + _cardAction(favIcon, 123), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 30.0), + child: _cardAction(commentIcon, 67), + ), + _cardAction(shareIcon, 12), + ], + ) + ], + ), + ), + ); + } + + Icon favIcon = Icon(Icons.favorite_border); + Icon commentIcon = Icon(Icons.chat); + Icon shareIcon = Icon(Icons.share); + Widget _cardAction(Icon icon, int number) { + return Container( + margin: EdgeInsets.only(bottom: 20), + child: Row( + children: [ + icon, + SizedBox(width: 5), + Text('$number') + ], + ), + ); + } + + Widget _avatar() { + return (Container( + margin: EdgeInsets.only(top: 18, left: deviceWidth * 0.22), + height: 50.0, + width: 50.0, + decoration: BoxDecoration( + image: DecorationImage(image: AssetImage(FeedImage.feed1_avatar2))), + )); + } + + Widget _feedCardImages() { + return Positioned( + top: 180.0, + left: 26, + child: Container( + height: 230, + width: 350, + decoration: BoxDecoration(boxShadow: [ + BoxShadow( + color: Colors.black12, + blurRadius: 20.0, + spreadRadius: 5.0, + offset: Offset( + 10.0, // horizontal, move right 10 + 10.0, // vertical, move down 10 + ), + ) + ], color: Colors.red, borderRadius: BorderRadius.circular(22.0)), + ), + ); + } + + Widget _feedCard() { + return Container( + width: double.infinity, + child: Stack( + children: [_pinkCard(), _avatar(), _feedCardImages()], + ), + ); + } + + var deviceHeight; + var deviceWidth; + + @override + Widget build(BuildContext context) { + deviceWidth = MediaQuery.of(context).size.width; + deviceHeight = MediaQuery.of(context).size.height; + return Scaffold( + body: Container( + decoration: + BoxDecoration(gradient: LinearGradient(colors: [YELLOW, GREEN])), + child: ListView( + //crossAxisAlignment: CrossAxisAlignment.center, + children: [ + TopTitleBar(), + _feedCard(), + ], + ), + ), + ); + } +} diff --git a/lib/page/page_const.dart b/lib/page/page_const.dart index 84fb949..7decadb 100644 --- a/lib/page/page_const.dart +++ b/lib/page/page_const.dart @@ -8,6 +8,7 @@ export "empty_page.dart"; export 'signup/SignPageOne.dart'; export 'signup/SignPageTwo.dart'; +export 'feed/FeedPageFour.dart'; export 'feed/FeedPageOne.dart'; export 'feed/FeedPageTen.dart'; export 'feed/FeedPageEleven.dart'; From 5c7fb31309e1d572a31258d237da5888fc893acf Mon Sep 17 00:00:00 2001 From: Waffulz <35786496+Waffulz@users.noreply.github.com> Date: Thu, 3 Jan 2019 22:55:18 -0600 Subject: [PATCH 2/2] Page Four -Page Four implemented -Clean Code -Const document for Shadows added *Page Four is not finished yet, still have to add images and make it responsive. --- .../xcshareddata/WorkspaceSettings.xcsettings | 8 + lib/const/shadow_const.dart | 13 + lib/page/feed/FeedPageFour.dart | 259 +++++++++++++----- 3 files changed, 218 insertions(+), 62 deletions(-) create mode 100644 ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings create mode 100644 lib/const/shadow_const.dart diff --git a/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings b/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings new file mode 100644 index 0000000..949b678 --- /dev/null +++ b/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings @@ -0,0 +1,8 @@ + + + + + BuildSystemType + Original + + diff --git a/lib/const/shadow_const.dart b/lib/const/shadow_const.dart new file mode 100644 index 0000000..bc364f2 --- /dev/null +++ b/lib/const/shadow_const.dart @@ -0,0 +1,13 @@ +import 'package:flutter/material.dart'; + +const SHADOW = [ + BoxShadow( + color: Colors.black12, + blurRadius: 20.0, + spreadRadius: 5.0, + offset: Offset( + 10.0, // horizontal, move right 10 + 10.0, // vertical, move down 10 + ), + ) +]; diff --git a/lib/page/feed/FeedPageFour.dart b/lib/page/feed/FeedPageFour.dart index 2da8994..526e630 100644 --- a/lib/page/feed/FeedPageFour.dart +++ b/lib/page/feed/FeedPageFour.dart @@ -1,72 +1,56 @@ import 'package:flutter/material.dart'; import 'package:flutter_ui_nice/const/color_const.dart'; +import 'package:flutter_ui_nice/const/shadow_const.dart'; import 'package:flutter_ui_nice/page/feed/feed_const.dart'; import 'package:flutter_ui_nice/page/feed/top_title.dart'; import 'package:flutter_ui_nice/util/SizeUtil.dart'; +const cardConsts = [ + { + "author": "Hristo", + "action": "added 127 new photos to Lorem ipsum dolr sit amet.", + "time": "1 MINUTE", + "like": "123", + "chat": "67", + "share": "12", + "images_number": "+126", + "avatar_image": FeedImage.feed1_avatar2, + "images": [ + FeedImage.feed13_pic1, + FeedImage.feed13_pic2, + FeedImage.feed13_pic3, + ] + }, + { + "author": "Mila", + "action": "added 3 new photos to Lorem ipsum dolr sit amet.", + "time": "12 HOURS", + "like": "123", + "chat": "67", + "share": "12", + "images_number": '0', + "avatar_image": FeedImage.feed1_avatar1, + "images": [ + FeedImage.feed13_pic1, + FeedImage.feed13_pic2, + FeedImage.feed13_pic3, + ] + }, +]; + class FeedPageFour extends StatefulWidget { @override _FeedPageFourState createState() => _FeedPageFourState(); } +var deviceHeight; +var deviceWidth; +Icon favIcon = Icon(Icons.favorite_border); +Icon chatIcon = Icon(Icons.chat); +Icon shareIcon = Icon(Icons.share); + class _FeedPageFourState extends State { - Widget _pinkCard() { - return Center( - child: Container( - margin: EdgeInsets.symmetric(vertical: 40.0), - height: 450, - width: deviceWidth * 0.73, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(22.0), - boxShadow: [ - BoxShadow( - color: Colors.black12, - blurRadius: 20.0, - spreadRadius: 5.0, - offset: Offset( - 10.0, // horizontal, move right 10 - 10.0, // vertical, move down 10 - ), - ) - ], - gradient: LinearGradient(colors: [RED_LIGHT, RED])), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - width: double.infinity, - margin: EdgeInsets.all(22), - child: Text('1 MINUTE', - style: TextStyle( - color: Colors.black38, - fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE)), - textAlign: TextAlign.right), - ), - Container( - margin: EdgeInsets.symmetric(horizontal: 20), - child: Text( - 'Hristo added 127 new photos to Lorem Ipsum dolr sit amet.')), - Expanded(child: Container()), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - _cardAction(favIcon, 123), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 30.0), - child: _cardAction(commentIcon, 67), - ), - _cardAction(shareIcon, 12), - ], - ) - ], - ), - ), - ); - } - Icon favIcon = Icon(Icons.favorite_border); - Icon commentIcon = Icon(Icons.chat); - Icon shareIcon = Icon(Icons.share); Widget _cardAction(Icon icon, int number) { return Container( margin: EdgeInsets.only(bottom: 20), @@ -74,7 +58,12 @@ class _FeedPageFourState extends State { children: [ icon, SizedBox(width: 5), - Text('$number') + Text( + '$number', + style: TextStyle( + color: Colors.black38, + fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE)), + ) ], ), ); @@ -121,9 +110,6 @@ class _FeedPageFourState extends State { ); } - var deviceHeight; - var deviceWidth; - @override Widget build(BuildContext context) { deviceWidth = MediaQuery.of(context).size.width; @@ -132,14 +118,163 @@ class _FeedPageFourState extends State { body: Container( decoration: BoxDecoration(gradient: LinearGradient(colors: [YELLOW, GREEN])), - child: ListView( + child: Stack( //crossAxisAlignment: CrossAxisAlignment.center, children: [ + _cardClipper(), TopTitleBar(), - _feedCard(), ], ), ), ); } + + + Widget timeText () => Container( + width: double.infinity, + margin: EdgeInsets.all(20), + child: Text( + cardConsts[0]['time'], + textAlign: TextAlign.right, + style: TextStyle( + color: Colors.black38, + fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE) + ), + ), + ); + + Widget descriptionText () => Container( + margin: EdgeInsets.symmetric(horizontal: 20), + child: RichText( + text: TextSpan( + text: '${cardConsts[0]['author']} ', + style: TextStyle( + fontSize: SizeUtil.getAxisBoth(TEXT_NORMAL_SIZE), + fontWeight: FontWeight.bold, + color: TEXT_BLACK + ), + children: [ + TextSpan( + text: cardConsts[0]['action'], + style: TextStyle( + fontWeight: FontWeight.normal, + color: TEXT_BLACK_LIGHT + ) + ) + ] + ), + ), + ); + + Widget _socialAction (Icon icon, String number) => Container( + child: Row( + children: [ + icon, + SizedBox(width: 7), + Text( + '$number', + style: TextStyle( + color: Colors.black45, + fontSize: SizeUtil.getAxisBoth(TEXT_SMALL_2_SIZE) + ), + ) + ], + ), + ); + + Widget _socialActionRow() { + return Container( + margin: EdgeInsets.symmetric(vertical: 20), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + _socialAction(favIcon, cardConsts[0]['like']), + _socialAction(chatIcon, cardConsts[0]['chat']), + _socialAction(shareIcon, cardConsts[0]['share']) + ], + ), + ); + } + + Widget _cardDetails() { + return Column( + children: [ + timeText(), + Expanded( + child: descriptionText() + ), + _socialActionRow() + ], + ); + } + + Widget _pinkCard() { + return Center( + child: Container( + margin: EdgeInsets.only(top: 50), + height: deviceHeight * 0.6, + width: deviceWidth * 0.75, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(22.0), + boxShadow: SHADOW, + gradient: LinearGradient(colors: [RED_LIGHT, RED])), + child: _cardDetails(), + ), + ); + } + + Widget _avatarCard() { + return Positioned( + top: deviceHeight * 0.027, + left: deviceWidth * 0.2, + child: Container( + height: 60, + width: 60, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(7), + image: DecorationImage( + image: AssetImage(cardConsts[0]['avatar_image']) + ), + boxShadow: SHADOW, + ), + ) + ); + } + + Widget _imagesCard() { + return Positioned( + top: deviceHeight * 0.25, + left: deviceWidth * 0.05, + child: Container( + height: 250, + width: 370, + decoration: BoxDecoration( + color: Colors.red, + borderRadius: BorderRadius.circular(22), + boxShadow: SHADOW, + ), + ), + ); + } + + Widget _stackClipperCard() { + return Stack( + children: [ + _pinkCard(), + _avatarCard(), + _imagesCard() + ], + ); + } + + Widget _cardClipper() { + return ListView( + children: [ + SizedBox( + height: 100, + ), + _stackClipperCard(), + ], + ); + } }