Finished search box

lib/src/screens/home_screen.dart

@@ -1,18 +1,22 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.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';
+import '../widgets/gradient_touchable_container.dart';
 
 class HomeScreen extends StatefulWidget {
   createState() => _HomeScreenState();
 }
 
 class _HomeScreenState extends State<HomeScreen> {
+  static const _searchBoxHeight = 50.0;
+
   final HomeBloc bloc = HomeBloc();
   String avatarUrl;
   String userDisplayName;
@@ -47,23 +51,88 @@ class _HomeScreenState extends State<HomeScreen> {
               child: LoadingIndicator(),
             );
           }
-          return ListView(
-            padding: EdgeInsets.zero,
-            children: snap.data
-                .map((task) => Container(
-                      child: TaskListTile(
-                        task: task,
-                        onDone: () => bloc.markTaskAsDone(task),
-                      ),
-                      padding: EdgeInsets.only(bottom: 12),
-                    ))
-                .toList(),
+          return Stack(
+            overflow: Overflow.visible,
+            children: <Widget>[
+              ListView(
+                padding: EdgeInsets.only(top: _searchBoxHeight + 15),
+                children: snap.data
+                    .map((task) => Container(
+                          child: TaskListTile(
+                            task: task,
+                            onDone: () => bloc.markTaskAsDone(task),
+                          ),
+                          padding: EdgeInsets.only(bottom: 12),
+                        ))
+                    .toList(),
+              ),
+              Container(
+                height: _searchBoxHeight / 2,
+                width: double.infinity,
+                color: Theme.of(context).cardColor,
+              ),
+              buildSearchBox(),
+            ],
           );
         },
       ),
     );
   }
 
+  Widget buildSearchBox() {
+    return Row(
+      children: <Widget>[
+        Spacer(flex: 1),
+        Expanded(
+          flex: 8,
+          child: GradientTouchableContainer(
+            radius: _searchBoxHeight / 2,
+            height: _searchBoxHeight,
+            shadow: BoxShadow(
+              color: Color(0x20FFFFFF),
+              offset: Offset(0, 3),
+              blurRadius: 6,
+              spreadRadius: 1,
+            ),
+            child: Row(
+              children: <Widget>[
+                SizedBox(
+                  width: 10,
+                ),
+                Icon(
+                  FontAwesomeIcons.sistrix,
+                  color: Colors.white,
+                ),
+                SizedBox(
+                  width: 8,
+                ),
+                Expanded(
+                  child: TextField(
+                    decoration: InputDecoration(
+                      border: InputBorder.none,
+                      hintText: 'Search...',
+                      hintStyle: TextStyle(
+                        fontSize: 16,
+                        color: Colors.white,
+                      ),
+                    ),
+                    cursorColor: Colors.white,
+                    scrollPadding: EdgeInsets.zero,
+                    style: TextStyle(
+                      fontSize: 16,
+                      color: Colors.white,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        Spacer(flex: 1),
+      ],
+    );
+  }
+
   @override
   void dispose() {
     bloc.dispose();

lib/src/widgets/gradient_touchable_container.dart

@@ -16,12 +16,15 @@ class GradientTouchableContainer extends StatelessWidget {
   /// Function to be called when the button is pressed.
   final VoidCallback onTap;
 
+  final BoxShadow shadow;
+
   GradientTouchableContainer({
     this.radius = 4,
     @required this.child,
     this.height,
     this.width,
     this.onTap,
+    this.shadow,
   });
 
   Widget build(BuildContext context) {
@@ -39,6 +42,7 @@ class GradientTouchableContainer extends StatelessWidget {
             child: child,
           ),
           decoration: BoxDecoration(
+            boxShadow: shadow == null ? null : [shadow],
             borderRadius: BorderRadius.circular(radius),
             gradient: LinearGradient(
                 begin: Alignment.topLeft,

lib/src/widgets/home_app_bar.dart

@@ -93,5 +93,5 @@ class HomeAppBar extends StatelessWidget implements PreferredSizeWidget {
   }
 
   @override
-  final preferredSize = Size.fromHeight(240.0);
+  final preferredSize = Size.fromHeight(220.0);
 }

lib/src/widgets/task_list_tile.dart

@@ -37,7 +37,7 @@ class TaskListTile extends StatelessWidget {
   Widget build(BuildContext context) {
     return FractionallySizedBox(
       alignment: Alignment.centerLeft,
-      widthFactor: .9,
+      widthFactor: .95,
       child: Container(
         height: 116,
         child: Stack(