How to Create An Interactive UI for ToDo App using MVVM Pattern ??
Objective of This Article
In this article , you will see how to handle MVVM design pattern by creating a working to do application . We will se how we have written code for UI and how we are handling the viewModels and models .
Project Source Codes
You will be able to download the source code by the below repositry , just give it a star . All the best .
Starting the project
The app we are going to create is named as TaskManager . After watching the above GIF , you may got the feautres of this application . If not , then download the project and run it on your iPhone .
Understanding the Model
The first thing that I prefer to create is Model of the application , now let us understand how our model is looking .
- CaseIterable : It is a protocol which automatically synthesises a collection of all the cases in your enum in the order that is defined .
- Identifiable : It provide a stable notion of identity to a class or value type .
- Equatable : It allows two objects to be compared .
Line 11 : We are creating a structure of data we need for our app .
Line 21 : We can have three priorities that is normal , medium and high . Also we are creating an id as rawValue so that we can manage our priorities .
Line 56 : To show the tasks based on different arrangement , we need to have a special cases .
Understanding the View Model
Now its time to understand the view model , which is the logic part of our application , where we will create our data array and perform action on it .
Line 12 : Creating an array for our data of type Task with some default datas . Also in next few lines , we are defining sortype as alphabetical by default .
Line 23 : Two methods for adding the new task and removing the task . Also a method for sorting the data based on what users selected in segment in UI .
Line 33 : Sorting the datas based on users choice by comparing the names , dates and priorities’s rawValues .
Creating a good viewmodel is an important part of every application . In this application , we are handling every operation from the UI , the UI should only responsible for showing the data by taking from viewmodel or vise-versa .
Understanding the Views
Task View : This view will contain the task information to show . There are simple HStacks and VStacks and some stroke for background styling .
TaskListView : In this view , we are fetching our data from viewmodel and showing with looping .
SortPickerView : This view will contain the date picker which will update the dates in our data in viewmodel also .
AddTaskView : This view will allow user to enter the data and add the task .
TaskSearchView : This view will allow user to search the task with some animation search view .
MainViewModifier : There are some modifiers to add on main content view .
ContentView : This is the main view where we are calling the every view and passing the viewmodel .
Extension
Here is the extension for accessing some events of textfeild .
Wrapping UP
Try to create your own application based on the way I have created , follow the flow .
Where to Go From Here ?
My Socials : LinkedIn — GitHub
Check this link : https://bit.ly/38HOQeb
Clap if you like this article !
Thank YOU !
