diff --git a/assets/images/post_banner.jpg b/assets/images/post_banner.jpg new file mode 100644 index 0000000..1cb4cec Binary files /dev/null and b/assets/images/post_banner.jpg differ diff --git a/lib/_routing/router.dart b/lib/_routing/router.dart index da0c95c..3061d5c 100644 --- a/lib/_routing/router.dart +++ b/lib/_routing/router.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_social/_routing/routes.dart'; import 'package:flutter_social/views/chat_details.dart'; import 'package:flutter_social/views/chats.dart'; -import 'package:flutter_social/views/feed.dart'; +import 'package:flutter_social/views/feeds.dart'; import 'package:flutter_social/views/home.dart'; import 'package:flutter_social/views/login.dart'; import 'package:flutter_social/views/notifications.dart'; diff --git a/lib/models/feed.dart b/lib/models/feed.dart new file mode 100644 index 0000000..3ab7d95 --- /dev/null +++ b/lib/models/feed.dart @@ -0,0 +1,20 @@ +import 'package:flutter_social/models/user.dart'; +import 'package:flutter_social/utils/utils.dart'; + +class Feed { + int id, userId; + String createdAt; + String description = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id neque libero. Donec finibus sem viverra.'; + String bannerImg = AvailableImages.postBanner['assetPath']; + String userName, userImage; + + Feed(this.id, this.createdAt, this.userId, this.userName, this.userImage); +} + +final List feeds = [ + Feed(1, '19 Aug', users[0].id, users[0].name, users[0].photo), + Feed(2, '20 Aug', users[1].id, users[1].name, users[1].photo), + Feed(3, '22 Aug', users[2].id, users[2].name, users[2].photo), + Feed(4, '1 Sept', users[3].id,users[3].name, users[3].photo), +]; diff --git a/lib/models/user.dart b/lib/models/user.dart new file mode 100644 index 0000000..8ee080c --- /dev/null +++ b/lib/models/user.dart @@ -0,0 +1,24 @@ +import 'package:flutter_social/utils/utils.dart'; + +class User { + int id; + String name; + String photo; + + User(this.id, this.name, this.photo); +} + + +// Names generated at http://random-name-generator.info/ +final List users = [ + User(1, 'Matt Maxwell', AvailableImages.man1['assetPath']), + User(2, 'Maria Perez', AvailableImages.woman1['assetPath']), + User(3, 'Craig Jordan', AvailableImages.man2['assetPath']), + User(4, 'Charlotte Mckenzie', AvailableImages.woman2['assetPath']), + User(5, 'Rita Pena', AvailableImages.woman3['assetPath']), + User(6, 'Robin Mcguire', AvailableImages.man3['assetPath']), + User(7, 'Angelina Love', AvailableImages.woman4['assetPath']), + User(8, 'Louis Diaz', AvailableImages.man4['assetPath']), + User(9, 'Kyle Poole', AvailableImages.man5['assetPath']), + User(10, 'Brenda Watkins', AvailableImages.woman5['assetPath']), +]; diff --git a/lib/utils/utils.dart b/lib/utils/utils.dart index b97fa2e..aa689dd 100644 --- a/lib/utils/utils.dart +++ b/lib/utils/utils.dart @@ -10,18 +10,62 @@ class AvailableFonts { } class AvailableImages { - static const man1 = const AssetImage('assets/images/man1.jpg'); - static const man2 = const AssetImage('assets/images/man2.jpg'); - static const man3 = const AssetImage('assets/images/man3.jpg'); - static const man4 = const AssetImage('assets/images/man4.jpg'); - static const man5 = const AssetImage('assets/images/man5.jpg'); - - static const woman1 = const AssetImage('assets/images/woman1.jpg'); - static const woman2 = const AssetImage('assets/images/woman2.jpg'); - static const woman3 = const AssetImage('assets/images/woman3.jpg'); - static const woman4 = const AssetImage('assets/images/woman4.jpg'); - static const woman5 = const AssetImage('assets/images/woman5.jpg'); + static const man1 = { + 'assetImage' : AssetImage('assets/images/man1.jpg'), + 'assetPath' : 'assets/images/man1.jpg', + }; + + static const man2 = { + 'assetImage' : AssetImage('assets/images/man2.jpg'), + 'assetPath' : 'assets/images/man2.jpg', + }; + + static const man3 = { + 'assetImage' : AssetImage('assets/images/man3.jpg'), + 'assetPath' : 'assets/images/man3.jpg', + }; + + static const man4 = { + 'assetImage' : AssetImage('assets/images/man4.jpg'), + 'assetPath' : 'assets/images/man4.jpg', + }; + + static const man5 = { + 'assetImage' : AssetImage('assets/images/man5.jpg'), + 'assetPath' : 'assets/images/man5.jpg', + }; + + + static const woman1 = { + 'assetImage' : AssetImage('assets/images/woman1.jpg'), + 'assetPath' : 'assets/images/woman1.jpg', + }; + + static const woman2 = { + 'assetImage' : AssetImage('assets/images/woman2.jpg'), + 'assetPath' : 'assets/images/woman2.jpg', + }; + + static const woman3 = { + 'assetImage' : AssetImage('assets/images/woman3.jpg'), + 'assetPath' : 'assets/images/woman3.jpg', + }; + + static const woman4 = { + 'assetImage' : AssetImage('assets/images/woman4.jpg'), + 'assetPath' : 'assets/images/woman4.jpg', + }; + + static const woman5 = { + 'assetImage' : AssetImage('assets/images/woman5.jpg'), + 'assetPath' : 'assets/images/woman5.jpg', + }; + + static const postBanner = { + 'assetImage' : AssetImage('assets/images/post_banner.jpg'), + 'assetPath' : 'assets/images/post_banner.jpg', + }; static const homePage = const AssetImage('assets/images/home_page.png'); static const appLogo = const AssetImage('assets/images/logo.png'); diff --git a/lib/views/feed.dart b/lib/views/feed.dart deleted file mode 100644 index 25d71f3..0000000 --- a/lib/views/feed.dart +++ /dev/null @@ -1,10 +0,0 @@ -import 'package:flutter/material.dart'; - -class FeedsPage extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Scaffold( - - ); - } -} \ No newline at end of file diff --git a/lib/views/feeds.dart b/lib/views/feeds.dart new file mode 100644 index 0000000..9e42fd4 --- /dev/null +++ b/lib/views/feeds.dart @@ -0,0 +1,63 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_social/models/feed.dart'; +import 'package:flutter_social/widgets/feed_card1.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), + child: Text( + "Feed", + style: TextStyle( + fontWeight: FontWeight.bold, + color: Colors.black, + fontSize: 40.0, + ), + ), + ); + + return Scaffold( + body: SingleChildScrollView( + child: Container( + color: Colors.grey.withOpacity(0.1), + padding: EdgeInsets.only(top: 40.0), + height: MediaQuery.of(context).size.height, + width: MediaQuery.of(context).size.width, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + appBar, + Container( + padding: EdgeInsets.only(left: 30.0, right: 30.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + pageTitle, + FeedCard1(feed: feeds[0]) + ], + ), + ) + ], + ), + ), + ), + ); + } +} diff --git a/lib/widgets/feed_card1.dart b/lib/widgets/feed_card1.dart new file mode 100644 index 0000000..edcee64 --- /dev/null +++ b/lib/widgets/feed_card1.dart @@ -0,0 +1,155 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_social/models/feed.dart'; +import 'package:line_icons/line_icons.dart'; + +class FeedCard1 extends StatelessWidget { + final Feed feed; + + const FeedCard1({Key key, this.feed}) : super(key: key); + @override + Widget build(BuildContext context) { + final userimage = Container( + margin: EdgeInsets.only(right: 10.0), + height: 40.0, + width: 40.0, + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage(feed.userImage), fit: BoxFit.cover), + borderRadius: BorderRadius.circular(7.0), + ), + ); + + final headerDesc = Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + feed.userName, + style: TextStyle( + color: Colors.black, + fontWeight: FontWeight.bold, + ), + ), + Text( + feed.createdAt, + style: TextStyle( + color: Colors.grey.withOpacity(0.6), + fontWeight: FontWeight.bold, + ), + ) + ], + ); + + final header = Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [userimage, headerDesc], + ); + + final descriptionText = Container( + height: 80.0, + child: Text( + feed.description, + style: TextStyle( + color: Colors.grey, + fontWeight: FontWeight.w600, + fontSize: 16.0, + ), + ), + ); + + final divider = Divider( + color: Colors.grey.withOpacity(0.6), + ); + + final footer = Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Icon(Icons.share), + Row( + children: [ + Text('256'), + SizedBox( + width: 3.0, + ), + Icon(LineIcons.comments), + SizedBox( + width: 30.0, + ), + Text('4k'), + SizedBox( + width: 3.0, + ), + Icon(LineIcons.heart_o), + ], + ), + ], + ); + + return Container( + height: 300.0, + child: Stack( + children: [ + Container( + height: 150.0, + width: MediaQuery.of(context).size.width, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(14.0), + image: DecorationImage( + image: AssetImage(feed.bannerImg), + fit: BoxFit.cover, + ), + boxShadow: [ + BoxShadow( + blurRadius: 3.0, + color: Colors.grey.withOpacity(0.6), + spreadRadius: 3.0, + ) + ], + ), + ), + Positioned( + top: 90.0, + left: 0.0, + right: 0.0, + child: Padding( + padding: EdgeInsets.only(left: 10.0, right: 10.0), + child: Container( + height: 200.0, + width: 20.0, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(14.0), + boxShadow: [ + BoxShadow( + blurRadius: 0.0, + color: Colors.white, + spreadRadius: 0.0, + ) + ], + ), + child: Padding( + padding: EdgeInsets.only( + top: 20.0, + bottom: 00.0, + left: 20.0, + right: 20.0, + ), + child: Column( + children: [ + header, + SizedBox( + height: 10.0, + ), + descriptionText, + divider, + footer + ], + ), + ), + ), + ), + ) + ], + ), + ); + } +} diff --git a/lib/widgets/feed_card2.dart b/lib/widgets/feed_card2.dart new file mode 100644 index 0000000..e69de29 diff --git a/lib/widgets/feed_card3.dart b/lib/widgets/feed_card3.dart new file mode 100644 index 0000000..e69de29 diff --git a/pubspec.yaml b/pubspec.yaml index b8b8a55..fb479f9 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -43,8 +43,19 @@ flutter: # To add assets to your application, add an assets section, like this: assets: + - assets/images/man1.jpg + - assets/images/man2.jpg + - assets/images/man3.jpg + - assets/images/man4.jpg + - assets/images/man5.jpg + - assets/images/woman1.jpg + - assets/images/woman2.jpg + - assets/images/woman3.jpg + - assets/images/woman4.jpg + - assets/images/woman5.jpg - assets/images/home_page.png - assets/images/logo.png + - assets/images/post_banner.jpg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware.