Extracted search box to its own separate widget, finidhes the new item dialog UI

lib/src/screens/home_screen.dart

@@ -9,7 +9,7 @@ import '../widgets/home_app_bar.dart';
 import '../widgets/new-item-dialog-route.dart';
 import '../widgets/task_list_tile.dart';
 import '../widgets/loading_indicator.dart';
-import '../widgets/gradient_touchable_container.dart';
+import '../widgets/search-box.dart';
 
 class HomeScreen extends StatefulWidget {
   createState() => _HomeScreenState();
@@ -69,7 +69,9 @@ class _HomeScreenState extends State<HomeScreen> {
                 width: double.infinity,
                 color: Theme.of(context).cardColor,
               ),
-              _buildSearchBox(),
+              SearchBox(
+                height: 50.0,
+              ),
             ],
           );
         },
@@ -78,17 +80,7 @@ class _HomeScreenState extends State<HomeScreen> {
   }
 
   void _showDialog(BuildContext context) {
-    Navigator.of(context).push(NewItemDialogRoute(
+    Navigator.of(context).push(NewItemDialogRoute());
-      builder: (BuildContext context) {
-        return Center(
-          child: Container(
-            width: 100,
-            height: 100,
-            color: Colors.white,
-          ),
-        );
-      },
-    ));
   }
 
   Widget _buildTasksList(List<TaskModel> tasks) {
@@ -107,60 +99,6 @@ class _HomeScreenState extends State<HomeScreen> {
     );
   }
 
-  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/new-item-dialog-button.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+
+class NewItemDialogButton extends StatelessWidget {
+  final VoidCallback onTap;
+  final String label;
+
+  NewItemDialogButton({
+    this.onTap,
+    this.label = '',
+  });
+
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.only(
+        top: 30,
+        bottom: 30,
+      ),
+      decoration: BoxDecoration(
+        color: Theme.of(context).cardColor,
+        borderRadius: BorderRadius.circular(8),
+      ),
+      height: 170,
+      width: 120,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: <Widget>[
+          Text(
+            label,
+            style: TextStyle(
+              color: Colors.white,
+              fontSize: 24,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+          FloatingActionButton(
+            child: Icon(FontAwesomeIcons.plus),
+            backgroundColor: Color(0xFF707070),
+            onPressed: () {},
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/src/widgets/new-item-dialog-route.dart

@@ -1,10 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
 
-class NewItemDialogRoute extends PopupRoute {
+import './new-item-dialog-button.dart';
-  final WidgetBuilder builder;
 
-  NewItemDialogRoute({@required this.builder});
+class NewItemDialogRoute extends PopupRoute {
   @override
   // TODO: implement barrierColor
   Color get barrierColor => Color.fromRGBO(255, 255, 255, 0.5);
@@ -20,10 +19,34 @@ class NewItemDialogRoute extends PopupRoute {
   @override
   Widget buildPage(BuildContext context, Animation<double> animation,
       Animation<double> secondaryAnimation) {
-    final result = builder(context);
+    final result = _builder(context);
     return result;
   }
 
+  Widget _builder(BuildContext context) {
+    // Needs to be wrapped in a material widget so all the widgets have a
+    // [Theme] widget as a parent.
+    return Center(
+      child: Material(
+        type: MaterialType.transparency,
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            NewItemDialogButton(
+              label: 'Task',
+            ),
+            SizedBox(
+              width: 20,
+            ),
+            NewItemDialogButton(
+              label: 'Media',
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
   @override
   // TODO: implement transitionDuration
   Duration get transitionDuration => Duration(milliseconds: 300);

lib/src/widgets/search-box.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
+
+import './gradient_touchable_container.dart';
+
+class SearchBox extends StatelessWidget {
+  final double height;
+
+  SearchBox({@required this.height}) : assert(height >= 50);
+
+  Widget build(BuildContext context) {
+    return Row(
+      children: <Widget>[
+        Spacer(flex: 1),
+        Expanded(
+          flex: 8,
+          child: GradientTouchableContainer(
+            radius: height / 2,
+            height: height,
+            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),
+      ],
+    );
+  }
+}