Refactored CustomDropdownMenu, PrioritySelector and GradientTouchableContainer to have the possibility of being ecpanded rather than having a set width, created the FractionallyScreenSizedBox widget

lib/src/screens/new_image_screen.dart

@@ -94,9 +94,7 @@ class _NewImageScreenState extends State<NewImageScreen> {
           style: kBigTextStyle,
         ),
         Spacer(),
-        CustomDropdownButton(
-          width: 200,
-        ),
+        CustomDropdownButton(),
       ],
     );
   }

lib/src/screens/new_task_screen.dart

@@ -6,6 +6,7 @@ import '../models/user_model.dart';
 import '../widgets/custom_app_bar.dart';
 import '../widgets/custom_dropdown.dart';
 import '../widgets/big_text_input.dart';
+import '../widgets/fractionally_screen_sized_box.dart';
 import '../widgets/gradient_touchable_container.dart';
 import '../widgets/priority_selector.dart';
 
@@ -32,36 +33,41 @@ class _NewTaskScreenState extends State<NewTaskScreen> {
             events = snap.data.events;
           }
 
-          return Padding(
-            padding: const EdgeInsets.only(top: 15.0, left: 20.0, right: 20.0),
-            child: Column(
-              children: <Widget>[
-                BigTextInput(
-                  height: 95,
-                  onChanged: bloc.setText,
+          return SingleChildScrollView(
+            child: SafeArea(
+              child: Padding(
+                padding:
+                    const EdgeInsets.only(top: 15.0, left: 20.0, right: 20.0),
+                child: Column(
+                  children: <Widget>[
+                    BigTextInput(
+                      height: 95,
+                      onChanged: bloc.setText,
+                    ),
+                    SizedBox(
+                      height: 15,
+                    ),
+                    buildDropdownSection(events),
+                    SizedBox(
+                      height: 15,
+                    ),
+                    buildPrioritySelectorSection(bloc),
+                    SizedBox(
+                      height: 20,
+                    ),
+                    GradientTouchableContainer(
+                      height: 40,
+                      radius: 8,
+                      isExpanded: true,
+                      onTap: () => onSubmit(context, bloc),
+                      child: Text(
+                        'Submit',
+                        style: kSmallTextStyle,
+                      ),
+                    ),
+                  ],
                 ),
-                SizedBox(
-                  height: 15,
-                ),
-                buildDropdownSection(events),
-                SizedBox(
-                  height: 15,
-                ),
-                buildPrioritySelectorSection(bloc),
-                SizedBox(
-                  height: 20,
-                ),
-                GradientTouchableContainer(
-                  height: 40,
-                  width: 330,
-                  radius: 8,
-                  onTap: () => onSubmit(context, bloc),
-                  child: Text(
-                    'Submit',
-                    style: kSmallTextStyle,
-                  ),
-                ),
-              ],
+              ),
             ),
           );
         },
@@ -77,20 +83,23 @@ class _NewTaskScreenState extends State<NewTaskScreen> {
           style: kBigTextStyle,
         ),
         Spacer(),
-        CustomDropdownButton(
-          value: dropdownValue,
-          onChanged: (String value) => onDropdownChanged(bloc, value),
-          width: 230,
-          hint: Text('Event'),
-          items: events.map((String name) {
-            return CustomDropdownMenuItem(
-              value: name,
-              child: Text(
-                name,
-                style: TextStyle(color: Colors.white),
-              ),
-            );
-          }).toList(),
+        FractionallyScreenSizedBox(
+          widthFactor: 0.6,
+          child: CustomDropdownButton(
+            isExpanded: true,
+            value: dropdownValue,
+            onChanged: (String value) => onDropdownChanged(bloc, value),
+            hint: Text('Event'),
+            items: events.map((String name) {
+              return CustomDropdownMenuItem(
+                value: name,
+                child: Text(
+                  name,
+                  style: TextStyle(color: Colors.white),
+                ),
+              );
+            }).toList(),
+          ),
         ),
       ],
     );
@@ -104,9 +113,11 @@ class _NewTaskScreenState extends State<NewTaskScreen> {
           style: kBigTextStyle,
         ),
         Spacer(),
-        PrioritySelector(
-          onChage: bloc.setPriority,
-          width: 230,
+        FractionallyScreenSizedBox(
+          widthFactor: 0.6,
+          child: PrioritySelector(
+            onChage: bloc.setPriority,
+          ),
         ),
       ],
     );

lib/src/widgets/custom_dropdown.dart

@@ -17,8 +17,6 @@ const EdgeInsets _kAlignedMenuMargin = EdgeInsets.zero;
 const EdgeInsetsGeometry _kUnalignedMenuMargin =
     EdgeInsetsDirectional.only(start: 16.0, end: 24.0);
 
-//TODO: Refactor to allow expansion if no width is provided.
-
 class _DropdownMenuPainter extends CustomPainter {
   _DropdownMenuPainter({
     this.color,
@@ -545,7 +543,6 @@ class CustomDropdownButton<T> extends StatefulWidget {
     this.iconSize = 24.0,
     this.isDense = false,
     this.isExpanded = false,
-    this.width = 200,
   })  : assert(items == null ||
             items.isEmpty ||
             value == null ||
@@ -599,8 +596,6 @@ class CustomDropdownButton<T> extends StatefulWidget {
 
   final bool isElevated;
 
-  final double width;
-
   /// The text style to use for text in the dropdown button and the dropdown
   /// menu that appears when you tap the button.
   ///
@@ -784,7 +779,6 @@ class _DropdownButtonState<T> extends State<CustomDropdownButton<T>>
           ),
           padding: padding.resolve(Directionality.of(context)),
           height: 35.0,
-          width: widget.width,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             mainAxisSize: MainAxisSize.min,
@@ -792,7 +786,9 @@ class _DropdownButtonState<T> extends State<CustomDropdownButton<T>>
               SizedBox(
                 width: 15,
               ),
-              Expanded(child: innerItemsWidget),
+              widget.isExpanded
+                  ? Expanded(child: innerItemsWidget)
+                  : innerItemsWidget,
               Icon(
                 FontAwesomeIcons.chevronCircleDown,
                 size: 16.0,

lib/src/widgets/fractionally_screen_sized_box.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+/// A widget that sizes its child to a fraction of the size of the screen
+class FractionallyScreenSizedBox extends StatelessWidget {
+  FractionallyScreenSizedBox({
+    this.child,
+    this.widthFactor,
+    this.heightFactor,
+  });
+
+  final Widget child;
+  final double widthFactor;
+  final double heightFactor;
+
+  Widget build(BuildContext context) {
+    final size = MediaQuery.of(context).size;
+    return Container(
+      width: widthFactor != null ? widthFactor * size.width : null,
+      height: heightFactor != null ? heightFactor * size.height : null,
+      child: child,
+    );
+  }
+}

lib/src/widgets/gradient_touchable_container.dart

@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
 
-//TODO: Refactor to allow expansion if no width is provided.
-
 class GradientTouchableContainer extends StatelessWidget {
   /// The border radius of the button.
   final double radius;
@@ -20,6 +18,8 @@ class GradientTouchableContainer extends StatelessWidget {
 
   final BoxShadow shadow;
 
+  final bool isExpanded;
+
   GradientTouchableContainer({
     this.radius = 4,
     @required this.child,
@@ -27,22 +27,33 @@ class GradientTouchableContainer extends StatelessWidget {
     this.width,
     this.onTap,
     this.shadow,
+    this.isExpanded = false,
   });
 
   Widget build(BuildContext context) {
+    final resultChild = Center(
+      widthFactor: 1.0,
+      heightFactor: 1.0,
+      child: child,
+    );
+
     return ConstrainedBox(
       constraints: const BoxConstraints(minWidth: 88.0, minHeight: 36.0),
       child: GestureDetector(
         onTap: onTap,
         child: Container(
           width: width,
-          height: height,
+          height: isExpanded ? null : height,
           padding: EdgeInsets.all(5),
-          child: Center(
-            widthFactor: 1.0,
-            heightFactor: 1.0,
-            child: child,
-          ),
+          child: isExpanded
+              ? Row(
+                  children: <Widget>[
+                    Expanded(
+                      child: resultChild,
+                    )
+                  ],
+                )
+              : resultChild,
           decoration: BoxDecoration(
             boxShadow: shadow == null ? null : [shadow],
             borderRadius: BorderRadius.circular(radius),

lib/src/widgets/priority_selector.dart

@@ -9,7 +9,7 @@ class PrioritySelector extends StatefulWidget {
   final Function(TaskPriority) onChage;
 
   PrioritySelector({
-    this.width = 200,
+    this.width,
     @required this.onChage,
   });