jmug/do_more
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Completed the UI for the new task screen

Browse source
This commit is contained in:
Mariano Uvalle 2019-03-31 23:04:06 -06:00
parent 1fdae70358
commit 2c42d3c4a2
4 changed files with 177 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

61
lib/src/screens/new_task_screen.dart
View file

@ -4,6 +4,8 @@ import '../blocs/new_task_bloc.dart';
import '../widgets/custom_app_bar.dart';
import '../widgets/custom_dropdown.dart';
import '../widgets/big_text_input.dart';
import '../widgets/gradient_touchable_container.dart';
import '../widgets/priority_selector.dart';
class NewTaskScreen extends StatefulWidget {
@override
@ -11,6 +13,17 @@ class NewTaskScreen extends StatefulWidget {
}
class _NewTaskScreenState extends State<NewTaskScreen> {
static const kLabelStyle = TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w600,
);
static const kButtonStyle = TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w500,
);
final NewTaskBloc bloc = NewTaskBloc();
Widget build(BuildContext context) {
@ -26,9 +39,41 @@ class _NewTaskScreenState extends State<NewTaskScreen> {
height: 95,
),
SizedBox(
height: 10,
height: 15,
),
buildDropdownSection(),
SizedBox(
height: 15,
),
buildPrioritySelectorSection(),
SizedBox(
height: 20,
),
GradientTouchableContainer(
height: 40,
width: 330,
radius: 8,
child: Text(
'Submit',
style: kButtonStyle,
),
),
],
),
),
);
}
Widget buildDropdownSection() {
return Row(
children: <Widget>[
Text(
'Event',
style: kLabelStyle,
),
Spacer(),
CustomDropdownButton(
width: 230,
hint: Text('Event'),
onChanged: (item) {},
items: ['Math', 'Lenguajes', 'Redes'].map((String name) {
@ -42,8 +87,22 @@ class _NewTaskScreenState extends State<NewTaskScreen> {
}).toList(),
),
],
);
}
Widget buildPrioritySelectorSection() {
return Row(
children: <Widget>[
Text(
'Priority',
style: kLabelStyle,
),
Spacer(),
PrioritySelector(
onChage: (priority) {},
width: 230,
),
],
);
}
}

11
lib/src/utils.dart
View file

@ -1,17 +1,20 @@
import 'package:flutter/material.dart';
import './models/task_model.dart';
// TODO: migrate to enum https://github.com/AYM1607/do_more/issues/4
const kLowPriorityColor = Color(0xFF06AD12);
const kMediumPriorityColor = Color(0xFFF6A93B);
const kHighPriorityColor = Color(0xFFF42850);
Color getColorFromPriority(TaskPriority priority) {
switch (priority) {
case TaskPriority.low:
return Color(0xFF06AD12);
return kLowPriorityColor;
break;
case TaskPriority.medium:
return Color(0xFFF6A93B);
return kMediumPriorityColor;
break;
case TaskPriority.high:
return Color(0xFFF42850);
return kHighPriorityColor;
break;
default:
return Colors.white;

6
lib/src/widgets/custom_dropdown.dart
View file

@ -57,7 +57,7 @@ class _DropdownMenuPainter extends CustomPainter {
// Modified the original recatngle to be flush with the button instead of
// overflowing its original size.
final Rect rect = Rect.fromLTRB(20, top.evaluate(resize) + 10,
final Rect rect = Rect.fromLTRB(16, top.evaluate(resize) + 10,
size.width - 20, bottom.evaluate(resize));
_painter.paint(canvas, rect.topLeft, ImageConfiguration(size: rect.size));
@ -543,6 +543,7 @@ 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 ||
@ -596,6 +597,8 @@ 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.
///
@ -779,6 +782,7 @@ 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,

93
lib/src/widgets/priority_selector.dart Normal file
View file

@ -0,0 +1,93 @@
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import '../models/task_model.dart';
import '../utils.dart';
class PrioritySelector extends StatefulWidget {
final double width;
final Function(TaskPriority) onChage;
PrioritySelector({
this.width = 200,
@required this.onChage,
});
_PrioritySelectorState createState() => _PrioritySelectorState();
}
class _PrioritySelectorState extends State<PrioritySelector> {
TaskPriority selectedPriority = TaskPriority.high;
static const kCheckMark = Center(
child: Icon(
FontAwesomeIcons.checkCircle,
color: Colors.white,
),
);
Widget build(BuildContext context) {
return Container(
height: 35.0,
width: widget.width,
child: Row(
children: <Widget>[
Expanded(
flex: 8,
child: GestureDetector(
onTap: () => setPriority(TaskPriority.high),
child: Container(
decoration: BoxDecoration(
color: kHighPriorityColor,
borderRadius: BorderRadius.circular(8),
),
child:
selectedPriority == TaskPriority.high ? kCheckMark : null,
),
),
),
Spacer(
flex: 2,
),
Expanded(
flex: 8,
child: GestureDetector(
onTap: () => setPriority(TaskPriority.medium),
child: Container(
decoration: BoxDecoration(
color: kMediumPriorityColor,
borderRadius: BorderRadius.circular(8),
),
child:
selectedPriority == TaskPriority.medium ? kCheckMark : null,
),
),
),
Spacer(
flex: 2,
),
Expanded(
child: GestureDetector(
onTap: () => setPriority(TaskPriority.low),
child: Container(
decoration: BoxDecoration(
color: kLowPriorityColor,
borderRadius: BorderRadius.circular(8),
),
child: selectedPriority == TaskPriority.low ? kCheckMark : null,
),
),
flex: 8,
),
],
),
);
}
void setPriority(TaskPriority priority) {
widget.onChage(priority);
setState(() {
selectedPriority = priority;
});
}
}