Welcome to week two of the SwiftUI blog series! Last week, we explored why SwiftUI is a revolutionary framework. Now, it’s time to get our hands dirty and build your very first SwiftUI app. This step-by-step guide will take you through creating a simple yet functional app that displays a list of tasks.
By the end of this blog, you’ll have a solid understanding of how SwiftUI works and how to create a basic app from scratch.
By the end of this blog, you’ll have a solid understanding of how SwiftUI works and how to create a basic app from scratch.
What We’re Building
We’ll create a Task Manager App that allows users to:
- View a list of tasks
- Add new tasks
- Mark tasks as complete
Step 1: Setting Up the Project
- Open Xcode and select File > New > Project.
- Choose App under the iOS section and click Next.
- Enter a project name like TaskManager and ensure SwiftUI is selected as the interface.
- Click Continue, select a folder and click Create to set up your project.
Step 2: Designing the User Interface
In SwiftUI, your app’s UI is built declaratively using views. Open the ContentView.swift file, and let’s start coding!
Add a Title
Replace the Text(“Hello, world!”) placeholder with the following:
In SwiftUI, your app’s UI is built declaratively using views. Open the ContentView.swift file, and let’s start coding!
Add a Title
Replace the Text(“Hello, world!”) placeholder with the following:
This creates a vertical stack (VStack) with a title at the top.
Add a Task List
Next, let’s create a dynamic list to display tasks. Modify your code to include a List:
Next, let’s create a dynamic list to display tasks. Modify your code to include a List:
Here’s what’s happening:
- @State is used to store the list of tasks.
- ForEach dynamically creates a row for each task.
- We use an SF Symbol (circle) as a placeholder for task status.
Add New Tasks
Let’s add a TextField and a button to allow users to create new tasks:
Let’s add a TextField and a button to allow users to create new tasks:
Key Additions:
- A TextField for user input, bound to newTask.
- A button with an action to append the new task to the list.
- The button is disabled when the text field is empty.
Marking Tasks as Complete
Let’s add functionality to toggle task completion. Update the list rows to use a State for task status:
Let’s add functionality to toggle task completion. Update the list rows to use a State for task status:
Step 3: Running Your App
- Run your app on the simulator by pressing Cmd + R or clicking the play button.
- Add new tasks, check off completed ones, and admire your work!
What’s Next?
You’ve just built a functional task manager in SwiftUI! In the coming weeks, we’ll explore state management, animations, and ways to make your apps truly stand out.
Next week, we’ll dive deeper into SwiftUI’s layout system to understand how stacks and frames work. Stay tuned for more!
You’ve just built a functional task manager in SwiftUI! In the coming weeks, we’ll explore state management, animations, and ways to make your apps truly stand out.
Next week, we’ll dive deeper into SwiftUI’s layout system to understand how stacks and frames work. Stay tuned for more!
