diff --git a/lib/src/screens/new_image_screen.dart b/lib/src/screens/new_image_screen.dart index 71fd5bc..c57bf3c 100644 --- a/lib/src/screens/new_image_screen.dart +++ b/lib/src/screens/new_image_screen.dart @@ -94,9 +94,7 @@ class _NewImageScreenState extends State { style: kBigTextStyle, ), Spacer(), - CustomDropdownButton( - width: 200, - ), + CustomDropdownButton(), ], ); } diff --git a/lib/src/screens/new_task_screen.dart b/lib/src/screens/new_task_screen.dart index 63c42ab..c7f0279 100644 --- a/lib/src/screens/new_task_screen.dart +++ b/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 { events = snap.data.events; } - return Padding( - padding: const EdgeInsets.only(top: 15.0, left: 20.0, right: 20.0), - child: Column( - children: [ - 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: [ + 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 { 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 { style: kBigTextStyle, ), Spacer(), - PrioritySelector( - onChage: bloc.setPriority, - width: 230, + FractionallyScreenSizedBox( + widthFactor: 0.6, + child: PrioritySelector( + onChage: bloc.setPriority, + ), ), ], ); diff --git a/lib/src/widgets/custom_dropdown.dart b/lib/src/widgets/custom_dropdown.dart index b283249..c0cbb44 100644 --- a/lib/src/widgets/custom_dropdown.dart +++ b/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 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 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 extends State> ), 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 extends State> SizedBox( width: 15, ), - Expanded(child: innerItemsWidget), + widget.isExpanded + ? Expanded(child: innerItemsWidget) + : innerItemsWidget, Icon( FontAwesomeIcons.chevronCircleDown, size: 16.0, diff --git a/lib/src/widgets/fractionally_screen_sized_box.dart b/lib/src/widgets/fractionally_screen_sized_box.dart new file mode 100644 index 0000000..f14eeb9 --- /dev/null +++ b/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, + ); + } +} diff --git a/lib/src/widgets/gradient_touchable_container.dart b/lib/src/widgets/gradient_touchable_container.dart index cf64e7d..a895f59 100644 --- a/lib/src/widgets/gradient_touchable_container.dart +++ b/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: [ + Expanded( + child: resultChild, + ) + ], + ) + : resultChild, decoration: BoxDecoration( boxShadow: shadow == null ? null : [shadow], borderRadius: BorderRadius.circular(radius), diff --git a/lib/src/widgets/priority_selector.dart b/lib/src/widgets/priority_selector.dart index 85f0372..4899f9e 100644 --- a/lib/src/widgets/priority_selector.dart +++ b/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, });