Finished the rest of the app

README.md

@@ -1,16 +1,30 @@
-# flutter_ghana_ui_challenge_week_1
+# Flutter Ghana UI Challenge Week 1 - Social Media App
 
-A new Flutter project.
+A Flutter UI implementation of a Social Media App inspired by <a href="https://dribbble.com/outcrowd">Outcroud's</a> desgin on <a href="https://dribbble.com/shots/6659481-Mobile-app-Social-media-network">Dribble</a>.
+
+
+Star this repo if you like what you see.
+
+## 📸 Screenshots
+
+<img src="screenshots/banner.png"/>
+
+<img src="screenshots/1.png" width="250"/> <img src="screenshots/2.png" width="250"/>
+
+
+## Author(s)
+**Emmanuel Fache**
 
 ## Getting Started
 
-This project is a starting point for a Flutter application.
+**Note**: Make sure your Flutter environment is setup.
+#### Installation
 
-A few resources to get you started if this is your first Flutter project:
+In the command terminal, run the following commands:
 
-- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
+    $ git clone https://github.com/emrade/flutter-ghana-ui-challenge-week-1.git ui_challenge
+    $ cd ui_challenge/
+    $ flutter packages get
+    $ flutter run
 
-For help getting started with Flutter, view our
-[online documentation](https://flutter.dev/docs), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+##### Check out Flutter’s online [documentation](http://flutter.io/) for help getting started with your Flutter project.

lib/models/notification.dart

@@ -0,0 +1,15 @@
+import '../utils/utils.dart';
+
+class AppNotification {
+  String image, notification, time = '2 hours ago';
+  bool isRead;
+
+  AppNotification(this.image, this.notification, this.isRead);
+}
+
+List<AppNotification> notifications = [
+  AppNotification(AvailableImages.bleach, 'Kurosaki Ichigo commented on your post: "Bankai! 🔪" ', false),
+  AppNotification(AvailableImages.naruto, 'Uzumaki Naruto commented on your post: "Nakama 👊"', true),
+  AppNotification(AvailableImages.natsu, 'Natsu Dragonnel commented on your post: "Zeref 👿"', false),
+  AppNotification(AvailableImages.luffy, 'Monkey D. Luffy commented on your post: "Gear 5th 😁"', true),
+];

lib/utils/colors.dart

@@ -12,4 +12,5 @@ class CustomColors {
   static const orange = const Color(0xFFFFAC00);
   static const red = const Color(0xFFEE604E);
   static const blue = const Color(0xFF7D7DE3);
+  static const unselectedCardColor = const Color(0xFFF6F6F6);
 }

lib/utils/utils.dart

@@ -12,13 +12,41 @@ class AppTextStyles {
     color: CustomColors.headerTextColor
   );
 
+  static const subHeaderTextStyle = const TextStyle(
+    fontSize: 20.0,
+    fontWeight: FontWeight.w800,
+  );
+
   static const descriptionTextStyle = const TextStyle(
     fontSize: 18,
     fontWeight: FontWeight.w500,
     color: Colors.grey,
   );
+
+  static const unselectedTabTextStyle = const TextStyle(
+    fontWeight: FontWeight.w600,
+    color: Colors.grey,
+  );
+
+  static const selectedTabTextStyle = const TextStyle(
+    fontWeight: FontWeight.w600,
+    color: CustomColors.primaryColor,
+  );
 }
 
 class AvailableFonts {
   static const primaryFont = "Quicksand";
 }
+
+class AvailableImages {
+  static const hamburger = 'assets/images/hamburger.png';
+  static const assassin = 'assets/images/assassin.jpg';
+  static const bleach = 'assets/images/bleach.jpg';
+  static const luffy = 'assets/images/luffy.jpg';
+  static const mikasa = 'assets/images/mikasa.jpg';
+  static const naruto = 'assets/images/naruto.jpg';
+  static const natsu = 'assets/images/natsu.jpg';
+  static const saitama = 'assets/images/saitama.jpg';
+  static const rom = 'assets/images/rom.jpg';
+  static const rom2 = 'assets/images/rom2.png';
+}

lib/views/home.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_ghana_ui_challenge_week_1/widgets/category_card.dart';
+import '../widgets/video_card.dart';
+import '../router.dart';
+import '../widgets/category_card.dart';
+import '../widgets/photo_card.dart';
 import '../utils/colors.dart';
 import '../utils/utils.dart';
 
@@ -8,12 +11,75 @@ class HomePage extends StatefulWidget {
   _HomePageState createState() => _HomePageState();
 }
 
-class _HomePageState extends State<HomePage> {
+class _HomePageState extends State<HomePage>
+    with SingleTickerProviderStateMixin {
+  TabController tabController;
+  int selectedTabIndex = 0;
+  final List<String> _tabs = [
+    "CHAT",
+    "FEATURED",
+    "POPULAR",
+    "FOLLOWERS",
+    "LIKES"
+  ];
+
+  final List<String> _photos = [
+    "",
+    AvailableImages.bleach,
+    AvailableImages.saitama,
+    AvailableImages.luffy,
+    AvailableImages.naruto,
+    AvailableImages.natsu,
+    AvailableImages.mikasa,
+  ];
+
+  final List<String> _videos = [
+    AvailableImages.rom,
+    AvailableImages.rom2,
+  ];
+
+  @override
+  void initState() {
+    super.initState();
+    tabController = TabController(vsync: this, length: _tabs.length);
+  }
+
   int selectedCardIndex = 0;
 
   @override
   Widget build(BuildContext context) {
-    final _appBar = AppBar();
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    final _userImage = GestureDetector(
+      onTap: () => Navigator.pushNamed(context, notificationsViewRoute),
+      child: Container(
+        margin: EdgeInsets.only(right: 20.0, top: 20.0),
+        height: 40.0,
+        width: 37.0,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(15.0),
+          image: DecorationImage(
+            image: AssetImage(AvailableImages.assassin),
+            fit: BoxFit.cover,
+          ),
+        ),
+      ),
+    );
+
+    final _appBar = AppBar(
+      leading: Padding(
+        padding: EdgeInsets.only(left: 10.0),
+        child: GestureDetector(
+          onTap: () => Navigator.pushNamed(context, notificationsViewRoute),
+          child: Image.asset(
+            AvailableImages.hamburger,
+            width: 2.0,
+            fit: BoxFit.contain,
+          ),
+        ),
+      ),
+      actions: <Widget>[_userImage],
+    );
 
     final _headerText = Container(
       child: Text(
@@ -44,6 +110,87 @@ class _HomePageState extends State<HomePage> {
       ),
     );
 
+    final _tabSection = Container(
+      padding: EdgeInsets.only(top: 30.0),
+      child: TabBar(
+        onTap: (index) {
+          setState(() {
+            selectedTabIndex = index;
+          });
+        },
+        controller: tabController,
+        unselectedLabelColor: Colors.grey.withOpacity(0.6),
+        isScrollable: true,
+        indicator: BoxDecoration(
+          color: CustomColors.primaryColor.withOpacity(0.3),
+          borderRadius: BorderRadius.circular(12.0),
+        ),
+        tabs: _tabs.map((tab) {
+          var index = _tabs.indexOf(tab);
+          return Tab(
+            child: Text(
+              tab,
+              style: switchColor(index),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+
+    final _photosSection = Container(
+      padding: EdgeInsets.only(top: 30.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          Text(
+            "My photos",
+            style: AppTextStyles.subHeaderTextStyle,
+          ),
+          SizedBox(height: 10.0),
+          Container(
+            height: screenWidth * 0.32,
+            child: ListView.builder(
+              itemCount: _photos.length,
+              scrollDirection: Axis.horizontal,
+              itemBuilder: (BuildContext context, int index) {
+                var photo = _photos[index];
+                return PhotoCard(
+                  photo: photo,
+                );
+              },
+            ),
+          )
+        ],
+      ),
+    );
+
+    final _videosSection = Container(
+      padding: EdgeInsets.only(top: 30.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          Text(
+            "My videos",
+            style: AppTextStyles.subHeaderTextStyle,
+          ),
+          SizedBox(height: 10.0),
+          Container(
+            height: screenWidth * 0.32,
+            child: ListView.builder(
+              itemCount: _videos.length,
+              scrollDirection: Axis.horizontal,
+              itemBuilder: (BuildContext context, int index) {
+                var video = _videos[index];
+                return VideoCard(
+                  video: video,
+                );
+              },
+            ),
+          )
+        ],
+      ),
+    );
+
     return Scaffold(
       appBar: _appBar,
       body: SafeArea(
@@ -56,7 +203,10 @@ class _HomePageState extends State<HomePage> {
               children: <Widget>[
                 _headerText,
                 _descriptionText,
-                _categorySection
+                _categorySection,
+                _tabSection,
+                _photosSection,
+                _videosSection
               ],
             ),
           ),
@@ -78,12 +228,16 @@ class _HomePageState extends State<HomePage> {
       color: color,
       top: top,
       bottom: bottom,
-      onPressed: () {
-        selectCategory(index);
-      },
+      onPressed: () => selectCategory(index),
     );
   }
 
+  TextStyle switchColor(index) {
+    return selectedTabIndex == index
+        ? AppTextStyles.selectedTabTextStyle
+        : AppTextStyles.unselectedTabTextStyle;
+  }
+
   void selectCategory(int index) {
     setState(() {
       selectedCardIndex = index;