From c2f82f729089dce576b6fc4e4a4a015134d782df Mon Sep 17 00:00:00 2001 From: Emmanuel Date: Tue, 6 Aug 2019 20:40:08 +0000 Subject: [PATCH] Profile Page DOne --- lib/models/user.dart | 1 + lib/views/tabs/feeds.dart | 18 +-- lib/views/tabs/profile.dart | 219 +++++++++++++++++++++++++++++++++++- 3 files changed, 219 insertions(+), 19 deletions(-) diff --git a/lib/models/user.dart b/lib/models/user.dart index 8ee080c..c5e4f94 100644 --- a/lib/models/user.dart +++ b/lib/models/user.dart @@ -4,6 +4,7 @@ class User { int id; String name; String photo; + String location = 'Seattle, USA.'; User(this.id, this.name, this.photo); } diff --git a/lib/views/tabs/feeds.dart b/lib/views/tabs/feeds.dart index ee0f7d3..c30b3ad 100644 --- a/lib/views/tabs/feeds.dart +++ b/lib/views/tabs/feeds.dart @@ -7,21 +7,6 @@ import 'package:flutter_social/widgets/feed_card3.dart'; class FeedsPage extends StatelessWidget { @override Widget build(BuildContext context) { - final appBar = Padding( - padding: EdgeInsets.only(right: 15.0, left: 15.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - IconButton( - onPressed: () => Navigator.pop(context), - icon: Icon( - Icons.arrow_back, - color: Colors.black, - ), - ) - ], - ), - ); final pageTitle = Padding( padding: EdgeInsets.only(top: 1.0, bottom: 30.0), @@ -44,9 +29,8 @@ class FeedsPage extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - appBar, Container( - padding: EdgeInsets.only(left: 30.0, right: 30.0), + padding: EdgeInsets.only(top: 30.0, left: 30.0, right: 30.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ diff --git a/lib/views/tabs/profile.dart b/lib/views/tabs/profile.dart index 07f33d5..56aa27d 100644 --- a/lib/views/tabs/profile.dart +++ b/lib/views/tabs/profile.dart @@ -1,10 +1,225 @@ +import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_social/models/user.dart'; +import 'package:flutter_social/utils/colors.dart'; +import 'package:line_icons/line_icons.dart'; class ProfilePage extends StatelessWidget { + final User user = users[0]; + @override Widget build(BuildContext context) { + final hr = Divider(); + final userStats = Positioned( + bottom: 10.0, + left: 40.0, + right: 40.0, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + _buildUserStats('VISITORS', '2305'), + _buildUserStats('LIKED', '276'), + _buildUserStats('MATCHED', '51'), + ], + ), + ); + + final userImage = Container( + height: 100.0, + width: 100.0, + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage(user.photo), + fit: BoxFit.cover, + ), + shape: BoxShape.circle, + ), + ); + + final userNameLocation = Container( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + user.name, + style: TextStyle( + fontSize: 24.0, + fontWeight: FontWeight.w900, + ), + ), + Text( + user.location, + style: TextStyle( + color: Colors.grey.withOpacity(0.6), + fontSize: 20.0, + fontWeight: FontWeight.w600, + ), + ), + ], + ), + ); + + final userInfo = Stack( + children: [ + Padding( + padding: const EdgeInsets.only(left: 20.0, right: 20.0), + child: Material( + elevation: 5.0, + borderRadius: BorderRadius.circular(8.0), + shadowColor: Colors.white, + child: Container( + height: 220.0, + width: MediaQuery.of(context).size.width, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8.0), + border: Border.all( + color: Colors.grey.withOpacity(0.2), + ), + color: Colors.white, + ), + child: Padding( + padding: const EdgeInsets.only(left: 20.0, bottom: 20.0), + child: Row( + children: [ + userImage, + SizedBox(width: 10.0), + userNameLocation + ], + ), + ), + ), + ), + ), + userStats + ], + ); + + final secondCard = Padding( + padding: EdgeInsets.only(right: 20.0, left: 20.0, bottom: 30.0), + child: Material( + elevation: 5.0, + borderRadius: BorderRadius.circular(8.0), + shadowColor: Colors.white, + child: Container( + height: 200.0, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(8.0), + ), + child: Column( + children: [ + _buildIconTile(Icons.favorite, Colors.red, 'Likes'), + hr, + _buildIconTile(LineIcons.eye, Colors.green, 'Visitors'), + hr, + _buildIconTile(LineIcons.users, Colors.purpleAccent, 'Groups'), + ], + ), + ), + ), + ); + + final thirdCard = Padding( + padding: EdgeInsets.only(right: 20.0, left: 20.0, bottom: 30.0), + child: Material( + elevation: 5.0, + borderRadius: BorderRadius.circular(8.0), + shadowColor: Colors.white, + child: Container( + height: 350.0, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(8.0), + ), + child: Column( + children: [ + _buildIconTile(LineIcons.money, Colors.red, 'My Wallet'), + hr, + _buildIconTile(LineIcons.diamond, Colors.blue, 'VIP Center'), + hr, + _buildIconTile(LineIcons.user_plus, Colors.orangeAccent, 'Find Friends'), + hr, + _buildIconTile(LineIcons.user_times, Colors.black, 'Blacklist'), + hr, + _buildIconTile(LineIcons.cogs, Colors.grey.withOpacity(0.6), 'Settings'), + ], + ), + ), + ), + ); + return Scaffold( - + body: SingleChildScrollView( + child: Column( + children: [ + Container( + width: MediaQuery.of(context).size.width, + child: Column( + children: [ + Stack( + children: [ + Container( + height: 350.0, + ), + Container( + height: 250.0, + decoration: BoxDecoration(gradient: primaryGradient), + ), + Positioned(top: 100, right: 0, left: 0, child: userInfo) + ], + ), + secondCard, thirdCard + ], + ), + ), + ], + ), + ), + ); + } + + Widget _buildUserStats(String name, String value) { + return Column( + children: [ + Text( + name, + style: TextStyle( + color: Colors.grey.withOpacity(0.6), + fontWeight: FontWeight.w600, + fontSize: 16.0, + ), + ), + Text( + value, + style: TextStyle( + color: Colors.black87, + fontWeight: FontWeight.w900, + fontSize: 20.0, + ), + ), + ], + ); + } + + Widget _buildIconTile(IconData icon, Color color, String title) { + return ListTile( + title: Text(title, style: TextStyle(fontWeight: FontWeight.bold),), + leading: Container( + height: 30.0, + width: 30.0, + decoration: BoxDecoration( + color: color, + borderRadius: BorderRadius.circular(10.0), + ), + child: Center( + child: Icon( + icon, + color: Colors.white, + ), + ), + ), + trailing: Icon(LineIcons.chevron_circle_right), ); } -} \ No newline at end of file +}