MVVM Modern ToDo APP in SwiftUI

Yasir
3 min readApr 12, 2021

--

How to Create An Interactive UI for ToDo App using MVVM Pattern ??

TaskManager

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 : LinkedInGitHub

Check this link : https://bit.ly/38HOQeb
Clap if you like this article !

Thank YOU !

--

--