Create the EditTask component
In this task, you will create an EditTask component which allows you to modify and update a task.
Last updated
In this task, you will create an EditTask component which allows you to modify and update a task.
Last updated
The same way you did for the CreateTask, you are going to create a New Component.
Create an New Component named "EditTask".
Add the same pattern as the CreateTask component : Container>SafeArea>SingleChildScrollView>Form>Card>Column.
Add a Row composed of 2 Button, add a Text in each Button.
Add a Row composed of an Icon and a TextField in a Flexible.
Add a Row composed of an Icon and a TextField in a Flexible.
Add a Row composed of an Icon and a DateTimePicker in a Flexible.
Add a Row composed of an Icon and a ChoiceChip in a Flexible.
Add a Divider.
Add a Column composed of a Text.
Add a Row composed of a TextField in a Flexible and an IconButton.
You should have the same result as shown below.
With a completed layout, you now have to add the theme and settings.
Set the Color of the Card with desired one (#FFFFFFFF in the example).
In the Column set a Padding of 10 on the Left and Right, 20 on the Bottom. Set the CrossAxisAlignment to Start.
Select the first Row and set the MainAxisAlignment to Space Between.
In this Row select the first Button, name it "cancelButton" and set the Style Type to Outlined Button, enable Style, enable Side and set Color with Error. Select the Text inside, set the Text as "Cancel", enable TextStyle and add the same color as above in TextColor.
Select the second Button, name it "saveButton" and repeat the step above with the color #FF33AA23 and the Text "Save".
Select the ChoiceChip and name it "priority".
Select the Icon in the second Row, enable Icon and search for "circle outlined", set its Color to a Conditional Value that have 3 conditions that evaluates if the WidgetState priority value is Equal To 1, 2, or 3 and set a Default Value to Outline. (see capture below). Select the TextField inside the Flexible, name it "title" and enable Decoration, set Is Dense to True, enable Border and set it to Outline, enable Border Side and set the Width to 0 and the Style to None, enable Validation Builder and set Required to True.
Select the Icon in the third Row, enable Icon and search for "text", set the Color to Outline. Select the TextField inside the Flexible, name it "description" and repeat the Decoration step from the TextField "title" without the Validation Builder part and with an Hint Text of "Description" in addition.
Select the Icon in the fourth Row, enable Icon and search for "today", set the same Conditional Value in Color as the Icon in 6. Select the DateTimePicker inside the Flexible, name it "date" and repeat the Decoration step from the TextField "title".
Select the Icon in the fifth Row, enable Icon and search for "flag", set the same Conditional Value in Color as the Icon in 6. Select the ChoiceChip "priority" inside the Flexible and enable Decoration and set Is Dense and Is Collapsed to True. Set the same Border as you did on 6. Set Initial Value to 0 and below in Options add 3 values : 1, 2 and 3.
Select the Divider and set the Thickness to 2.
Select the Column and set Cross Axis Alignment to Start. Select the Text, add a Static Preview Value of "My comment" and enable TextStyle to set a FontSize of 16.
Select the last Row, set a Top Padding of 20, MainAxisAlignment to Space Between and MainAxisSize to Max. Select the TextField inside the Flexible and name it "comment", enable Decoration set an Hint Text of "Add comment", enable Border and set a BorderRadius of 10 on all. Select the IconButton, name it "addComment" and set the Icon "send" of Size 32 and Color Primary.
You should have the same result as shown below.
The next step is to add the actions to this layout.
