From d4bb1c631abfadb86fa69aebe080bec7613cb06a Mon Sep 17 00:00:00 2001
From: AYM1607 <u.g.a.mariano@gmail.com>
Date: Wed, 20 Mar 2019 22:57:44 -0600
Subject: [PATCH] Finished app bar for the home screen

---
 lib/src/blocs/home_bloc.dart      |  5 ++
 lib/src/screens/home_screen.dart  | 20 ++++++-
 lib/src/widgets/home_app_bar.dart | 97 +++++++++++++++++++++++++++++++
 3 files changed, 120 insertions(+), 2 deletions(-)

diff --git a/lib/src/blocs/home_bloc.dart b/lib/src/blocs/home_bloc.dart
index 3925990..2b118ae 100644
--- a/lib/src/blocs/home_bloc.dart
+++ b/lib/src/blocs/home_bloc.dart
@@ -33,6 +33,11 @@ class HomeBloc {
     return user.photoUrl;
   }
 
+  Future<String> getUserDisplayName() async {
+    final user = await _auth.currentUser;
+    return user.displayName;
+  }
+
   void markTaskAsDone(TaskModel task) async {
     _firestore.updateTask(
       task.id,
diff --git a/lib/src/screens/home_screen.dart b/lib/src/screens/home_screen.dart
index 84ad525..f791f44 100644
--- a/lib/src/screens/home_screen.dart
+++ b/lib/src/screens/home_screen.dart
@@ -1,7 +1,10 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
 
 import '../models/task_model.dart';
 import '../blocs/home_bloc.dart';
+import '../widgets/home_app_bar.dart';
 import '../widgets/task_list_tile.dart';
 import '../widgets/loading_indicator.dart';
 
@@ -11,17 +14,30 @@ class HomeScreen extends StatefulWidget {
 
 class _HomeScreenState extends State<HomeScreen> {
   final HomeBloc bloc = HomeBloc();
+  String avatarUrl;
+  String userDisplayName;
 
   @override
   initState() {
     super.initState();
     bloc.fetchTasks();
+    setUserAttributes();
+  }
+
+  Future<void> setUserAttributes() async {
+    final url = await bloc.getUserAvatarUrl();
+    final name = await bloc.getUserDisplayName();
+    setState(() {
+      avatarUrl = url;
+      userDisplayName = name;
+    });
   }
 
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        title: Text('Main Screen'),
+      appBar: HomeAppBar(
+        avatarUrl: avatarUrl,
+        subtitle: 'Hello $userDisplayName!',
       ),
       body: StreamBuilder(
         stream: bloc.userTasks,
diff --git a/lib/src/widgets/home_app_bar.dart b/lib/src/widgets/home_app_bar.dart
index e69de29..e51c34d 100644
--- a/lib/src/widgets/home_app_bar.dart
+++ b/lib/src/widgets/home_app_bar.dart
@@ -0,0 +1,97 @@
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+
+import './logo.dart';
+
+class HomeAppBar extends StatelessWidget implements PreferredSizeWidget {
+  final String avatarUrl;
+  final String subtitle;
+
+  HomeAppBar({
+    this.avatarUrl,
+    this.subtitle = '',
+  });
+
+  Widget build(BuildContext context) {
+    return Container(
+      color: Theme.of(context).cardColor,
+      child: SafeArea(
+        top: true,
+        child: Container(
+          height: preferredSize.height,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: <Widget>[
+              buildTopSection(),
+              SizedBox(
+                height: 20,
+              ),
+              Padding(
+                padding: EdgeInsets.only(left: 30),
+                child: Logo(),
+              ),
+              Padding(
+                padding: EdgeInsets.only(left: 30),
+                child: Text(
+                  subtitle,
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontSize: 20,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget buildTopSection() {
+    return Row(
+      children: <Widget>[
+        SizedBox(
+          width: 20,
+        ),
+        Icon(
+          FontAwesomeIcons.bars,
+          color: Colors.white,
+          size: 24,
+        ),
+        Spacer(),
+        maybeBuildAvatar(),
+        SizedBox(
+          width: 20,
+        )
+      ],
+    );
+  }
+
+  Widget maybeBuildAvatar() {
+    return avatarUrl == null
+        ? Container(
+            height: 60,
+            width: 60,
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(30),
+            ),
+            child: Center(
+              child: Icon(
+                FontAwesomeIcons.question,
+              ),
+            ),
+          )
+        : ClipOval(
+            child: Image.network(
+              avatarUrl,
+              height: 60,
+              width: 60,
+            ),
+          );
+  }
+
+  @override
+  final preferredSize = Size.fromHeight(240.0);
+}