Create the CreateTask component

In this task, you will create the component in charge of creating a task

Now that you can update a task, you need to be able to create one and use real data rather than default value in local state. To do so, you are going to create a component.

1. In the Toolbox select the Component List and click on Add New Component.

2. Fill the fields with "CreateTask".

3. Add a Container in the top of the Explorer.

4. Add a SafeArea in the Child of the Container.

5. Add a SingleChildScrollView in the Child of the SafeArea.

6. Add a Form in the Child of the SingleChildScrollView.

7. Add a Card in the Child of the Form.

8. Add a Column in the Child of the Card.

9. In the Column add two TextField, a DateTimePicker and a Row.

10. In the Row add an IconButton, a Flexible and a Button.

11. Add a ChoiceChip in the Child of the Flexible.

12. Add an Icon in the Child of the Button.

You should have the same result as shown below.

Create Tast component

With a complete layout, you can now add the theme and settings.

1. Set the Color of the Card with desired one (#FFFFFFFF in the example).

2. In the Column set a Padding of 10 on the Left and Right, 20 on the Bottom. Set the MainAxisSize to Min and the CrossAxisAlignment to Start.

3. Select the first TextField and add the Name "title". Enable Decoration and set an Hint Text like "Ex : Make Waffles". Enable Hint Style and set the Text Color as Outline. Set Is Dense to True. Enable Border and set it to Outline. Enable Border Side and set a Width of 0 and a Style of None. Enable Validation Builder and set Required to True.

4. Select the second TextField and repeat the same action on the 3. except for the Validation Builder. Make sure to correctly name the TextField description, and fill a correspondant hint.

5. Select the DateTimePicker and name it "date". Enable Decoration and set an Hint Text like "Select due date". Enable Hint Style and set the Theme Text Style as Title small, set the Text Color as you wish (#FF33AA23 in the example). Enable Prefix Icon and search the icon "month", set the same Color as above. Set the same Border and Validation Builder you did on 3.

6. Select the Row, set a Padding of 5 on Top and 10 on Bottom, set MainAxisAlignment to Space Between and set MainAxisSize to Max.

7. Select the first IconButton in Row, name it "priorityButton". Add a Padding of 10 on the right. Enable Icon and search for the icon "flag", set its Color to a Conditional Value that have 3 conditions that evaluates if the WidgetState ChoiceChip value is Equal To 1, 2, or 3 and set a Default Value to Outline. (see capture below).

Color Conditional Value

1. Select the ChoiceChip and enable Decoration and set Is Dense and Is Collapsed to True. Set the same Border as you did on 3. Set Initial Value to 0 and below in Options add 3 values : 1, 2 and 3.

2. Select the second IconButton in Row, name it "createTaskButton". Add Style Type to Elevated Button. Enable Style and set Background Color to Primary. Set a Padding of 10 on all. Enable Shape and set it to Circle.

3. Select the Icon and enable Icon, search for "check" and set the Color to #FFFFFFFF.

You should have the same result as shown below.

Create Task with Style and Theme

The next step is to add the actions to this layout.

Add Actions in CreateTast component