diff --git a/images/profile/profile_arrow_left.png b/images/profile/profile_arrow_left.png new file mode 100644 index 0000000..43d547f Binary files /dev/null and b/images/profile/profile_arrow_left.png differ diff --git a/images/profile/profile_avatar.png b/images/profile/profile_avatar.png new file mode 100644 index 0000000..5f55957 Binary files /dev/null and b/images/profile/profile_avatar.png differ diff --git a/images/profile/profile_follow.png b/images/profile/profile_follow.png new file mode 100644 index 0000000..391c3c1 Binary files /dev/null and b/images/profile/profile_follow.png differ diff --git a/images/profile/profile_photos_01.png b/images/profile/profile_photos_01.png new file mode 100644 index 0000000..0cb9883 Binary files /dev/null and b/images/profile/profile_photos_01.png differ diff --git a/images/profile/profile_photos_02.png b/images/profile/profile_photos_02.png new file mode 100644 index 0000000..1f217ee Binary files /dev/null and b/images/profile/profile_photos_02.png differ diff --git a/images/profile/profile_photos_03.png b/images/profile/profile_photos_03.png new file mode 100644 index 0000000..010b49d Binary files /dev/null and b/images/profile/profile_photos_03.png differ diff --git a/lib/main.dart b/lib/main.dart index 46fd4cf..19da321 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -22,6 +22,9 @@ class MyApp extends StatelessWidget { SIGN_UP_PAGES[0]: (context) => SignPageOne(), SIGN_UP_PAGES[1]: (context) => SignPageTwo(), + //PROFILE pages + PROFILE_PAGES[0]: (context) => ProfilePageOne(), + ///FEED group page FEED_PAGES[0]: (context) => FeedPageOne(), FEED_PAGES[0]: (context) => FeedPageOne(), diff --git a/lib/page/page_const.dart b/lib/page/page_const.dart index 7decadb..eb45009 100644 --- a/lib/page/page_const.dart +++ b/lib/page/page_const.dart @@ -8,6 +8,9 @@ export "empty_page.dart"; export 'signup/SignPageOne.dart'; export 'signup/SignPageTwo.dart'; +//PROFILE pages +export 'profile/ProfilePageOne.dart'; + export 'feed/FeedPageFour.dart'; export 'feed/FeedPageOne.dart'; export 'feed/FeedPageTen.dart'; diff --git a/lib/page/profile/ProfilePageOne.dart b/lib/page/profile/ProfilePageOne.dart index 9a8a858..676338e 100644 --- a/lib/page/profile/ProfilePageOne.dart +++ b/lib/page/profile/ProfilePageOne.dart @@ -1,9 +1,26 @@ /// -/// Created by NieBin on 2018/12/25 -/// Github: https://github.com/nb312 -/// Email: niebin312@gmail.com +/// Created by Terrance Duong on 2019/01/03 +/// Github: https://github.com/dndoanh +/// Email: dndoanh@gmail.com /// import "package:flutter/material.dart"; +import 'package:flutter_ui_nice/const/color_const.dart'; +import 'package:flutter_ui_nice/page/profile/profile_const.dart'; +import 'package:flutter_ui_nice/page/profile/top_bar.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; + +const photos = [ + ProfileImages.photos_01, + ProfileImages.photos_02, + ProfileImages.photos_03, +]; + +class Photo { + Photo({this.path, this.isImage}); + + final String path; + final bool isImage; +} class ProfilePageOne extends StatefulWidget { @override @@ -13,11 +30,296 @@ class ProfilePageOne extends StatefulWidget { class _ProfileState extends State { @override Widget build(BuildContext context) { + Widget _itemPhoto(String img) { + return Container( + margin: EdgeInsets.only( + left: SizeUtil.getAxisX(10.0), + right: SizeUtil.getAxisX(10.0), + ), + child: ClipRRect( + borderRadius: new BorderRadius.circular(22.0), + child: Image.asset( + img, + width: SizeUtil.getAxisBoth(PHOTO_BUTTON_HEIGHT), + height: SizeUtil.getAxisBoth(PHOTO_BUTTON_HEIGHT), + ), + ), + ); + } + + Widget _itemText(String txt) { + return Container( + margin: EdgeInsets.only( + left: SizeUtil.getAxisX(10.0), + right: SizeUtil.getAxisX(10.0), + ), + constraints: BoxConstraints.expand( + height: SizeUtil.getAxisY(PHOTO_BUTTON_HEIGHT), + width: SizeUtil.getAxisX(PHOTO_BUTTON_HEIGHT), + ), + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + colors: [Colors.redAccent, Colors.pinkAccent]), + borderRadius: BorderRadius.circular(22.0), + ), + child: Center( + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + txt, + style: TextStyle( + color: ProfileColors.COLOR_WHITE, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_XL), + ), + ), + Text( + ProfileStrings.STRING_PHOTOS, + style: TextStyle( + color: ProfileColors.COLOR_WHITE, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S), + ), + ) + ], + ), + ), + ); + } + + Widget _buildPhotos() { + return Container( + constraints: BoxConstraints.expand( + height: SizeUtil.getAxisY(PHOTO_BUTTON_HEIGHT)), + child: ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: photos.length > 2 ? photos.length + 1 : photos.length, + itemBuilder: (context, idx) { + if (idx < 2) { + return _itemPhoto(photos[idx]); + } else if (idx == 2) { + if (photos.length > 2) { + return _itemText("+" + photos.length.toString()); + } else { + return _itemPhoto(photos[idx]); + } + } else { + return _itemPhoto(photos[idx - 1]); + } + }, + ), + ); + } + + Widget _bottomBar() { + return Container( + constraints: + BoxConstraints.expand(height: SizeUtil.getAxisY(BOTTOM_BAR_HEIGHT)), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Container( + width: SizeUtil.getAxisX(PHOTO_BUTTON_HEIGHT), + height: SizeUtil.getAxisY(PHOTO_BUTTON_HEIGHT), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [Color(0x44FFFFFF), Color(0x44FFFFFF)], + begin: Alignment.topLeft, + end: Alignment.bottomRight), + borderRadius: BorderRadius.circular( + SizeUtil.getAxisX(22.0), + ), + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + '17,589', + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S), + fontWeight: FontWeight.w700, + ), + ), + Text( + 'followers', + style: TextStyle( + color: ProfileColors.COLOR_DARK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S), + ), + ) + ], + ), + ), + Container( + width: SizeUtil.getAxisX(PHOTO_BUTTON_HEIGHT), + height: SizeUtil.getAxisY(PHOTO_BUTTON_HEIGHT), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + '9,854', + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S), + fontWeight: FontWeight.w700, + ), + ), + Text( + 'following', + style: TextStyle( + color: ProfileColors.COLOR_DARK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S), + ), + ) + ], + ), + ) + ], + ), + ); + } + return Scaffold( - appBar: AppBar( - title: Text("Profile one"), + body: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [YELLOW, GREEN], + begin: Alignment.topLeft, + end: Alignment.centerLeft, + ), + ), + child: Column( + children: [ + TopBar( + leftIcon: ProfileImages.arrow_left, + onLeftIconPressed: () => Navigator.pop(context), + ), + Expanded( + child: ListView( + children: [ + Container( + padding: EdgeInsets.only( + left: 100, + top: 30, + right: 15, + bottom: 30, + ), + child: Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Image.asset( + ProfileImages.avatar, + width: SizeUtil.getAxisY(SQUARE_BUTTON_HEIGHT), + height: SizeUtil.getAxisY(SQUARE_BUTTON_HEIGHT), + ), + Container( + width: SizeUtil.getAxisY(REC_BUTTON_WIDTH), + height: SizeUtil.getAxisY(REC_BUTTON_HEIGHT), + decoration: new BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + colors: [ + ProfileColors.COLOR_BLACK, + ProfileColors.COLOR_GREY, + ], + ), + borderRadius: new BorderRadius.circular(100.0), + ), + child: Material( + color: Colors.transparent, + shape: RoundedRectangleBorder( + borderRadius: + new BorderRadius.circular(100.0), + ), + child: InkWell( + onTap: () => debugPrint('Follow pressed'), + splashColor: ProfileColors.COLOR_GREY, + highlightColor: ProfileColors.COLOR_GREY, + borderRadius: + new BorderRadius.circular(100.0), + child: new Center( + child: new Text( + ProfileStrings.STRING_FOLLOW, + style: new TextStyle( + fontSize: + SizeUtil.getAxisBoth(TEXT_SIZE_M), + color: ProfileColors.COLOR_YELLOW, + ), + ), + ), + ), + ), + ) + ], + ), + SizedBox(height: 20.0), + Row( + children: [ + Text( + 'Hristo Hristov', + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_XXL), + fontWeight: FontWeight.w300, + ), + ) + ], + ), + Row( + children: [ + Text( + 'Frankfurt am main', + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_M), + fontWeight: FontWeight.w300, + ), + ), + Container( + width: 1.0, + height: 12, + color: TEXT_BLACK, + margin: EdgeInsets.only(left: 10, right: 10), + ), + Text( + 'Germany', + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_M), + fontWeight: FontWeight.w300, + ), + ) + ], + ), + ], + ), + ), + _buildPhotos(), + Container( + padding: EdgeInsets.only( + left: 100, top: 30, right: 15, bottom: 30), + child: Text( + 'Excepteur sint occacupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occacupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', + softWrap: true, + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_S), + height: 1.5), + ), + ), + ], + ), + ), + _bottomBar() + ], + ), ), - body: Text("Profile page one"), ); } } diff --git a/lib/page/profile/profile_const.dart b/lib/page/profile/profile_const.dart new file mode 100644 index 0000000..5e8dbcb --- /dev/null +++ b/lib/page/profile/profile_const.dart @@ -0,0 +1,44 @@ +/// +/// Created by Terrance Duong on 2019/01/03 +/// Github: https://github.com/dndoanh +/// Email: dndoanh@gmail.com +/// +import "package:flutter/material.dart"; +class ProfileStrings { + static const STRING_NAME = "PROFILE"; + static const STRING_FOLLOW = "FOLLOW"; + static const STRING_PHOTOS = "photos"; +} + +class ProfileColors { + static const COLOR_BLACK = Color(0xFF010101); + static const COLOR_GREY = Color(0xFF424242); + static const COLOR_WHITE = Color(0xFFF7FFE3); + static const COLOR_DARK = Color(0xFF34323D); + static const COLOR_YELLOW = Color(0xFFF1EA94); +} + +const CIRCLE_BUTTON_HEIGHT = 87.0; +const SQUARE_BUTTON_HEIGHT = 127.0; +const PHOTO_BUTTON_HEIGHT = 200.0; +const REC_BUTTON_WIDTH = 255.0; +const REC_BUTTON_HEIGHT = 96.0; +const TOP_BAR_HEIGHT = 152.0; +const TOP_BAR_GRADIENT_HEIGHT = 133.0; +const BOTTOM_BAR_HEIGHT = 200.0; + +const TEXT_SIZE_XXL = 50.0; +const TEXT_SIZE_XL = 40.0; +const TEXT_SIZE_L = 28.0; +const TEXT_SIZE_M = 26.0; +const TEXT_SIZE_S = 24.0; + +class ProfileImages { + static const IMAGE_PATH = "images/profile"; + static const arrow_left = "$IMAGE_PATH/profile_arrow_left.png"; + static const avatar = "$IMAGE_PATH/profile_avatar.png"; + static const follow = "$IMAGE_PATH/profile_follow.png"; + static const photos_01 = "$IMAGE_PATH/profile_photos_01.png"; + static const photos_02 = "$IMAGE_PATH/profile_photos_02.png"; + static const photos_03 = "$IMAGE_PATH/profile_photos_03.png"; +} diff --git a/lib/page/profile/top_bar.dart b/lib/page/profile/top_bar.dart new file mode 100644 index 0000000..c4ce8e6 --- /dev/null +++ b/lib/page/profile/top_bar.dart @@ -0,0 +1,77 @@ +/// +/// Created by Terrance Duong on 2019/01/03 +/// Github: https://github.com/dndoanh +/// Email: dndoanh@gmail.com +/// +import "package:flutter/material.dart"; +import 'profile_const.dart'; +import 'package:flutter_ui_nice/const/color_const.dart'; +import 'package:flutter_ui_nice/util/SizeUtil.dart'; + +class TopBar extends StatelessWidget { + TopBar( + {this.leftIcon, + this.rightIcon, + this.onLeftIconPressed, + this.onRightIconPressed}); + + final String leftIcon; + final String rightIcon; + final Function() onLeftIconPressed; + final Function() onRightIconPressed; + + @override + Widget build(BuildContext context) { + final icons = []; + if (leftIcon != null) { + icons.add(InkWell( + onTap: onLeftIconPressed, + child: Image.asset(leftIcon, + width: SizeUtil.getAxisY(CIRCLE_BUTTON_HEIGHT), + height: SizeUtil.getAxisY(CIRCLE_BUTTON_HEIGHT)), + )); + } + if (rightIcon != null) { + icons.add(InkWell( + onTap: onRightIconPressed, + child: Image.asset(rightIcon, + width: SizeUtil.getAxisY(CIRCLE_BUTTON_HEIGHT), + height: SizeUtil.getAxisY(CIRCLE_BUTTON_HEIGHT)), + )); + } + + return Container( + constraints: + BoxConstraints.expand(height: SizeUtil.getAxisY(TOP_BAR_HEIGHT)), + child: Stack( + children: [ + Container( + constraints: BoxConstraints.expand( + height: SizeUtil.getAxisY(TOP_BAR_GRADIENT_HEIGHT)), + decoration: + BoxDecoration(gradient: LinearGradient(colors: [YELLOW, BLUE])), + ), + Center( + child: Padding( + padding: EdgeInsets.only(top: SizeUtil.getAxisY(30.0)), + child: Text( + ProfileStrings.STRING_NAME, + style: TextStyle( + color: TEXT_BLACK, + fontSize: SizeUtil.getAxisBoth(TEXT_SIZE_L), + fontWeight: FontWeight.w700), + ), + ), + ), + Container( + padding: EdgeInsets.symmetric(horizontal: SizeUtil.getAxisX(24.0)), + alignment: AlignmentDirectional.bottomStart, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: icons), + ) + ], + ), + ); + } +}