Develop your first SwiftUI app for iPhone! - iOS 15 | GMAN TECH | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Develop your first SwiftUI app for iPhone! - iOS 15

teacher avatar GMAN TECH

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

7 Lessons (1h 28m)
    • 1. Introduction

    • 2. A Tour Of Xcode

    • 3. Creating Your First View

    • 4. Making a Row View with Data

    • 5. Designing a Detail View with Data

    • 6. Putting it all Together!

    • 7. Finishing the App

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


This class covers creating SwiftUI iOS apps for iPhone and iPad. You will create a high-quality and responsive SwiftUI app!

In this class you will learn:

- SwiftUI Basics

- How to use SwiftUI Strings and Data Sets

- How to Create a Smart List

- How to Create a Great User Interface

IMPORTANT: You must have a Mac with Xcode 13!

Mobile Development; iOS; Development Tools; SwiftUl; IOS Development; Xcode; Swift

"SwiftUI helps you build great-looking apps across all Apple platforms with the power of Swift — and as little code as possible. With SwiftUI, you can bring even better experiences to all users, on any Apple device, using just one set of tools and APIs." - Apple

"Xcode includes intuitive design tools that make building interfaces with SwiftUI as easy as dragging and dropping. As you work in the design canvas, everything you edit is completely in sync with the code in the adjoining editor. Code is instantly visible as a preview as you type, and any change you make to that preview immediately appears in your code. Xcode recompiles your changes instantly and inserts them into a running version of your app — visible, and editable at all times." - Apple

You will need Xcode 13! It adds powerful new team development features, perfect for working with Xcode Cloud as well as with GitHub, Bitbucket, and GitLab collaboration features. Initiate, review, comment, and merge pull requests directly within Xcode. See your teammates’ comments right inside your code. And quickly compare any two versions of your code files.

Meet Your Teacher

Teacher Profile Image



Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: In this course, you will learn how to create a simple yet functional Swift UI application for iPhone. You will learn how to make a list in an app, design a detailed view, and interpret data to make a real application. You will also get time to practice your own skills that you have learned. At the end of this course, you will have everything you need to start making your own Swift UI apps. Alright, let's talk about requirements. To participate in this video course, you will need a Mac running Mac OS. Monitor it to make sure your Mac is supported. Check this list before continuing. Update your computer if needed. Lastly, you're going to need to install Xcode 13. This can be found in the Mac OS app store. It's important to know that it will take up to 25 gigabytes on your computer. So make sure you have space. If you're ready. Let's dive in. 2. A Tour Of Xcode: This is Xcode, a spot to design and develop all of your Swift UI iOS applications. Before we begin, I want to talk briefly about what Swift UI is. Swift is a form of the Swift language, a language used to code all of your favorite Apple App Store applications. So we have to buy makes it extremely easy to design user interfaces and parse data, which is going to come super handy in this course. It's also a brand new framework that is recommended for all beginner developers. And because you're new, this is a great place to start. Okay? Now that we've open Xcode, I want to choose Create a new Xcode project. Make sure that you've selected iOS app. You can then choose Next. We're going to decide that the product name, in this case, super shakes. We also need to make an organization identifier. If you have a website, you can do com dot your website or whatever your website ends in. But in this case, I'm just going to do calm down an example or And it will auto fill the organization identifier to keep track of your application. Make sure that all of these buttons are de-selected, including the includes tests. Then choose Next. We now need to choose where you want to save it. I'm going to open Swift by course. And your work. I'm going to unselect, create a Git repository as each not necessary. Make sure your work is selected. And create. Just like that, your Swift QI project will be up and running. I'm going to make my screen a bit larger and divide the sections. So it's nice and easy to use. But then I'm going to minimize this app because I want to show you the course files. In the green completed app section is shows a completed application of all of the code that we code in this tutorial. In the resources section, there's the app icons, data information, and photos of the smoothies that we will be using. All of this will come in handy later. So be sure to download the resource file in the link, in the description. In your work, you'll see what we just shaped. Okay, Now, choose the iPhone 12 Pro 15 from the list of simulators in the toolbar. Then choose resume. To preview this application. It takes a minute to compile the application for the first time, but then you can see our exact app right here. Super cool. The first thing we can do is practice coding. To do this, I'm just going to replace hello world in my code editor with welcome to the class. And just like that, you can see it automatically updates in the preview. You can also choose the play button at the top to run it on a virtual device in what is known as the simulator. The simulator is exactly an iPhone that you would normally buy just right here on your Mac. This allows you to have a personalized device just for testing. Okay, opening it up, you need to give it a second for the app to launch for the first time. But then you'll see, welcome to the class. This time however, we can go home. You can see that we have a virtual device. Okay, Let's open super shakes again. How are we going to know that that is super shakes? We need what is known as an app icon. I've included app icons for you as making them is a bit confusing. You need to be able to specify all of the different app icons that you're going to need, as well as a special JSON file. You learn this many other places on the internet. For now, let's practice adding them. Go back to Xcode and add assets. Then choose app icon. You can see a spot. Now, although we could drag in the icons manually, I'm going to right-click and choose Show in Finder. There you'll be able to see the app icon, icon set. Okay, if you close Xcode in the simulator, Let's drag all of these into the app icon, dot app icon set and replace contents to the dot JSON which identifies the different images. If we open back up Xcode, you can see that just like that, all of our icons have been added like magic. Okay. Now we need more of an in-depth tour of Xcode. So close all other windows. You're able to see the super shapes name right in the corner. Don't worry about this too much. Instead, focus on four main parts. First, the file viewer, to see all files needed in your project. It looks simple right now, but we're gonna get into that more in the future. Then the code editor, this is where you make actual edits to the code. Over here is the preview area where you can view the views that you design without even meeting to open the simulator. And lastly, is the properties section, a great simple area to adjust fonts and the look of different items without manually meaning to add them to the code. It makes life super easy when developing. Okay, cool. Now we've done that. I want to show you one last thing before we get started. That is the Quick Add Menu. Code is great. But what's easier than code dragging and dropping. Part of Swift UI is that it allows you to easily in, automatically design a view. For example, if I wanted to add a button, all I have to do is drag it right underneath on the preview or into the code. In this case, I'll do it on the preview. And just like that, the button has been added. Swift UI makes adding views like this super easy. You'll also maybe something different about the code because there are two items, these embedded in what is called a V stack. A stack is something that allows you to vertically align objects. There's also such thing as an H stack, and each step allows for horizontal alignment. And lastly, as z stack, see, sacs allow two views to be placed on top of one another. We're gonna get into this again while we start coding. For now. Let's create folders to keep track of our work. Let's get rid of the z stack and just add text. Hello. Perfect, because there were some errors we are going tonight. Need to resume the preview of a and get rid of this bracket. And just like that, Hello has been added. Over here in the files browser, I'm going to choose to add either a new group, a new group without folder, or new group from selection. There's a different job of each of them. First, is the new group. A new group allows to just add a folder just like that. Second is new group without folder. This allows you to create a new group. The difference however, is that it doesn't create a folder within the super shakes app. Instead, each group some files together for you without actually messing up the code. This is helpful when specifying the routes to find a file on your computer. Lastly, is the new group from selection, which makes a group a folder around your, around the items that you have already selected. To delete all of these will just select them and press Backspace. Now there are a few folders we're going to need to create. The first is one without a folder. It's called App. App is where I want to store all of the included files, super shapes, app, and assets. These need to be found in a specific location of your app. That's why we can't use a group with a folder. If we were to do that, it would mess up the situation with the app. For the rest though, using a folder will be just fine. So choose new group from selection to create a real folder in content view. And choose views. Then create new groups, new parts. These will allow different parts of the view to be shown. Again, remove this from the views and allow it to be an independent folder. Just like that. Then create a new group again and call it data models. Again, make it a separate folder and you're all set. Now, we have all of the different parts we need views for the main views of our application. View parts for any embedded views that we design and Dina and models to easily design your application. Now that we've set up our project, you're ready for lecture two where we begin coding. You're excited. Top right answer. I'll see you next time. 3. Creating Your First View: Let's take a look about all of the features that we want our app to have. To do this, I'm running the completed app in the simulator. Let's take a look. I'm also opening up reminders. I've made a little list and reminders about all of the different parts of the app. First, we're able to see the onboarding view, tells us a little bit about the app. And that's a button to start blending. The onboarding view only works once. So if we open back up the app, we don't see it. It's perfect for the people who just want to use the app for the first time. We're also able to see a lot of smooth the data. We didn't have to code all of this. We just inserted data encoded for one of them, AMD Swift UI auto filled the rest. We're going to learn how to do that. There are also beautiful reviews that show us all the information we need, as well as great detail views that include an image, an About section, instructions and nutrients. There's also an intuitive filtering menu that allows us to see the different types of smoothies. We can create. A filtered list that there's automatically updating only with Miss case fruity. While in this one energy. We're also able to see that there are no more energy smoothies available when we get to the end of the list, while with fruity, it says 30 and so on. We're also able to see that we have no dessert smoothies, soap. It just shows that it's really great. Awesome. Now that we know everything we want our app to have, it's time to begin coding the onboarding view. To do this, I'm just going to quit the simulator and open up swift UI course. Your work. And the file for Xcode. Awesome. We're able to see that we have pretty simple views. Just like in the last lecture. It just says hello, I added world with, as it's pretty normal for programmers to do so, I want to rename content view to on-boarding view so I'm able to know what it is while I code. I'm going to hold down command and tap content view and then just choose Rename to on boarding view. Be able to see that it updates in all the areas than it needs. I can also make these two onboarding view as it searches everywhere in the entire file to see which ones need updating. Even updates in other files, such as the swift UI app page, are able to see that it no longer says Content View. It says onboarding view. That is super helpful. Okay, Now let's resume in the preview and get started with coding. First, I want to add the big words, super shake. That way we know exactly what app you've gotten. Ok, that looks good. What I want to make the font larger. To do this, I can add a modifier in multiple ways. I can select it and then over here choose font and large title. And it also updates in the code. Another way to do this is by command clicking and choosing the swift UI inspector. I can adjust it from here, too. Awesome. Let's also make it bold. Just like that. We have a bold, large title. All right. Now I want to put things under it. As you know, I can't just type text more as it'll actually open up a whole new preview. I need to say that I want them in the same view. To do this, I need to command click and embed in a VI step. Then I can choose text. Now that I've done that, I want to add the right text. I want to say three things. One is to explore yummy shakes. In smoothies. I also want to add a text to say, sort through many types of shapes. And lastly, I want to add new information for every drink. Okay, because that's not very good. Let's style it a tiny bit. First, I'm going to add what is known as a spacer between the two. Okay? That's a little much. Let's also put a space or on the other side. Okay, looks good. Now I'm going to add some padding to each one. And just like that, you can see that we've separated it to a good amount. Now I want to add some icons to show exactly what each one does and give us more visual representation. To do this, I'm just going to choose Image and then choose System name. Square, dot text, dot squared. You can see that it's automatically added the right icon. Okay, this is good, but I also want to make this larger. So let's just do font. Large title. Then. I want to do foreground color, accent, color. And lastly, I want to add a padding of five. Okay, but now the code looks kind of messy. Don't worry, there's an easy fix. I'm just going to select all of this and choose tab. Then I'm going to choose group and put a bracket on the other side. I can also remove this padding as it's no longer necessary. All right, but still not great. You'll notice that I added something called accent color. I'm gonna go to Assets accent color, and by default it's blue, but it doesn't have to stay that way. What I'm going to do is tap on universal Display P3 and eat bit hexadecimal. Then just paste this code. Awesome. Now we have pink. Let's go back to the onboarding view and resume the preview. Just like that. We have a pink visual. Perfect. Now I'm going to take this group and copy it. And then paste it on top of this text. And on top of this one. Then we'll once again Enter. And I'm going to change the included symbol on each one. For this first one, list bullet below rectangle. And for the second one, I'm going to choose arrow up, arrow down. Alright, this is looking okay. We have some groups. A main text. If we add some returns, a coat looks really nice, but it's not quite there. First, I want to add an icon for super shakes so that it's not all the way up at the top. To do this, I'm going to open the swift UI course folder, choose resources, open assets, and drag in. And I caught. Then I'll rename it to just I code. This is different from the app icon because it can be used right within the app. I'm now going to add image, icon and once again resume the preview. Looks great. But let's add some quarter radius 020. Okay, now we're gonna make it a bit larger. And this, I'm going to enter frame. And it'll autofill to width, height and alignment. For width, I'm going to add 120. For height, I'm going to add 120. And I'm not going to add anything for alignment as I don't think I really need it. Well, that didn't help at all. It didn't make it bigger. That's because it just made the view bigger. It didn't actually know to enlarge the image. To do this, we just have to add the modifier resizable. And just like that, it's there. Let's add another spacer on top. Add one more spacer on the bottom. We now have all of the details in the middle. But now nobody has any way to get out of this. We need to add a button. To do this. I'll just add underneath the two spacers button. I can drag it in like this or at it right here. In this case, I'm just going to add it here. It now says Text button, but that's not what I want it to say. We're going to add it in each stack. And each step is like a V Stack, but instead of going vertically, it goes horizontally. To do this, just enter each stack. Choose spacer space or on the other side in and add text in the middle. Same to start blending. Then we're going to add bold. And then this adds a bit more road. Now when the outside of the stack, I'm going to do some modifications to the color. Foreground color is going to be white, but the background going to be color, dot accent color. Now we're going to add a corner radius of 10. Okay, that's kinda stretching a bit too far across the screen. Don't worry, at the end of the age stack, I'm going to add another Pi. This gives it a bit more room and presents itself as a normal button. This is looking great. We're going to come back to making the button do something later. But for now, I can just press play and choose start blending. Just like that super shakes onboarding view looks fantastic. It is everything we need to teach everyone about the application. And you made a brand new view. Okay, before we're done with this lecture, I want to go to Xcode and choose Preferences. Then I'm going to go to text editing. I didn't want to add show code folding ribbon. This will allow us to clean up a bit. I can make the group a bit smaller because we don't really need to access that so often. I can also make the stack and the button itself a little bit easier to read. I can still open it up if I ever need to, but it cleans up the code so we can quickly view it. Before we go, I want to talk about one more part of the editor. All of this extra stuff imports with two. I of course tells us that we want to use the software framework. And onboarding view tells you that we want to view what we're putting in the body. Down here, tells us exactly what we want. The preview. If I delete it and get rid of the preview, the code will still compile, but we won't be able to use the preview section. If I add it back, it will preview right away. And with that, we have just created our first swift UI view of many in the application. If you had fun, we'll be sure to tune in in the next lecture because we are going to be making the row view and the parsing it with data. But for now, I think it's safe to say that we need the onboarding view. All right, I will see you in the next lecture. Thanks for learning with me today. This is G man signing off. 4. Making a Row View with Data: Welcome to the third lecture. Today. We're going to do the next two things on our list. First, we need to import all of this movie data for our app so that we can have functional views of each different type of smoothing. Don't worry, you don't have to write all of this out by hand. Simply open the swift UI course and the resources folder, then choose data. If we preview this file, you'll see all of the data for our app. Next, we're gonna open Xcode. Then just choose our super shakes course. You can just open your work super shakes and double-click on this. Perfect. We're already, we're going to open all of the folders and then open back up our data and dragging our Shakti, the dot swift file into data plus models. Make sure copy items if needed, is selected, and then choose finish. Perfect. All of our information has been added. Problem is Xcode and swift UI doesn't know what to do with this. It's just a scope of data that there's no information on where to put it. We need to do something to analyze this data and let Swift you. I know what each of the items is. To do this, we're just going to right-click and choose add a new file. We're then going to choose swift file Next and rename it to shake. Great. We're going to replace foundation with Swift UI. Alright. Now what I want to do is to choose this button to add a new pane view panel. Then choose Data post models, and shape data. Now, we have our two data side-by-side, going to start by returning a few times and choosing struct, shape identifiable, and add our brackets. Now just do var id equals UUID. This will allow Swift UI to interpret where each of these different shakes are separated. After that, we're going to continue down the list. Name, string, var, quick, string, var, image, string, and so on. When you are done entering them all, you can try it and build the project by choosing product in the menu bar and choosing build. And we can see that the build has succeeded. Perfect. That means that Swift UI now knows what to do with the data. It also means that we're done with this step. We can open back up our task list and say that we've imported this movie data. Okay, Now let's make a row view. To do this, just choose View parts and choose New File. Swift UI view, and rename it to shake view. Perfect. We can get rid of this As we don't really need it and resize or Windows to a way that works for us. And then I'm going to choose resume and allow the preview builder to compile. Once your preview is visible, it's time to get started coding. The first thing we need to do is fill it with all of our shape data. To do this, just choose bar, shake, shake. That's it. We can now resume the preview once more and you'll see that it's missing an argument. We can just fix this, then choose Shape Data. Now, just resume it one more time. And the preview is once again accessible. I want to show you exactly how this works. I'm just going to do shake dot name in the text section. And you'll see that bundle of berries is shown. However, if we change which smoothie by changing the 0 to a one. Super juice. Rainbow shape, grain of greens. Morning sun. Perfect. All right, but that's not what we want to review to look like. So I'll just erase this and create an H for horizontal alignment. First, let's add an image. We're going to now choose shake image. But you'll see that nothing shows up. That's because in our assets There's no images. We can fix this by opening Swift UI course resources and dragging in smoothie photos. We've now opened it up and we'll see that there's a photo of each smoothie. We can close our assets tab and go back to shake review. By resuming it once more, you'll see that a photo is now being shown. Now it's definitely too big. So we're just gonna do dot resizable. Okay, not great. Now we're going to do frame with heightened alignment, just as we did with our on-boarding view in the last lecture. Then do a width into height of 90 and then remove any n-fold alignment. Looks good. I'm also going to add a simple corner radius of six grid or images formatted. And now I want to add a vertical stack within our horizontal stack. Luckily, this is super easy to just do the step, add the brackets, and done within this V stack, I want to show that the alignment is dot leading. That way all the text shows up leading right within or restock. We can then copy this, be stuck in, paste it right within the other one. This is because we're going to need to vertical stacks to make this work. Inside the second vertical staff. I'm just going to add the text, shake dot name. I'm going to make this bold. And in the fund of a headline grid. Now we're going to add the quick text. Text. Shake, dot quick. A fruit filled the light. We're going to change this font as well to sub-headline, makes it a bit smaller. And lastly, we're going to add the calorie amount. So we're just going to do text, shake, nutrition, cowl. Okay, but just saying unknown isn't going to give us much information. So instead what we're gonna do is add our quotation marks. Okay, but tripped up intrusion CAL is definitely not what we want. Instead, I'm just going to add this slash. And then that. In that. Now it's back to unknown. But we can then add a space for calories, unknown calories. I'm also going to make the font a footnote. Perfect. Okay, we're done with this, the stack, but we still have the other one. After that, we're going to add a spacer. And although it doesn't look great right now, it'll fix itself. A spacer. We're just going to add text. Shake dot type with a fund of a callout. Make it bold. And add the foreground color to be the accent color that we set before. Allow the preview to finish. And great. We're going to add another spacer on the other side of this. Okay, This is looking good. Well, actually not really. Look at the preview. It doesn't make a ton of sense the way it's laid out. Don't worry, we can fix this. We're just going to add frame. Just focus on the height of 100. Perfect, our list row has been created, although it looks like we just created a review for bundle of berries if we change the preview 0 to one and so on. And just like that, we've designed the row of our app and parsed data into it. It's looking great. In the next lecture, we'll focus on feeding a detail view. And then you'll get to work on making the list where all of the recipes are going to be stored and filtering them by their type. If you enjoyed this lecture, head on over to the other one, or if you need a break, I'll see you next time. Thanks so much for watching. I'll see you in the next one. 5. Designing a Detail View with Data: Today we're gonna put your view creation skills to the test with the Detail View. You'll create an ImageView and then in about instructions and nutrients view to be able to see how to make the smoothing and learn all about it. More importantly, it'll teach you the fundamental parts of building unique and cool looking views in Swift UI. You how to open a swift UI app. But in case you forgot, just go into your work, super shakes and shakes again and then close it and exclude will open. We're gonna start by choosing onboarding view, right-click and choose a new file, and then just create a Swift UI view. We're now going to call it Detail View. Perfect. Now I'm going to resume the preview. This may take a second deadening on the type of computer you have and how many things are going on in the background. Most previews working. I'm going to start by importing an image to be lustrous, choose Image, then do shape dot image. Except there's one small problem. We need to import shake. Again, no big deal. We're just going to do var shake, shake, perfect. Then down in the details view, we can just do shape. Shakes. Data 0. Now, let's resume. Yeah, okay, it's definitely big. Let's just do resizable and put it in a frame with something more manageable. We'll focus on this a bit later. Okay, good. Now we can add the rest of our data. To do this. We're just going to create a side-by-side view. And this time, just use your shakes data plus models and shake data. Now I'm going to embed the image into a stack, make sure the frame still works with the image. And now I can enter all of them. Text, shake, dot, name, just as over here. Perfect. And I'll continue on with all of them. There's one problem after shake extra fact, none of the others are showing this is because there's a limitation in Swift UI where there can only be 10 items under a single V Stack, HCI Stack, z stack, or group. That's okay. There's a simple and easy workaround. All we have to do is go here. Group and indent leaves to it the cope better. And just like that, they're all shown up. We can now close this data window enthralled here. Except that looks kinda terrible. Nobody would want to use that app. Our goal is to make the detailed view look beautiful, light, and opening so that anyone can easily navigate it. To do this, we want to make it simple for ourselves. Therefore, in view parts, I'm going to create a new group without a folder and call it detail. Parts. Inside of this folder will be all the parts for our detail view. Now just do new file, Swift UI view, shake, shake, description, view, shape in Instructions, view, shake, nutrients, view. Perfect. Now it's time to make the shake ImageView. Again, we're just going to add, going back to detail view. We want to copy this image, cut it out, and paste it in. Shake ImageView. Obviously, we just need to quickly say bar, shake, shake and resume it. In say, shake, shake data 0. Okay, Perfect. We're going to get to see bundle of berries just like this. Now go back to detail view and I also want to take quick as that's an important part of this image view. The way I've laid it out. Cut it out and paste it here. Don't forget to embed each one in the stack first. Instead of having a fixed size, I want to do aspect ratio. And just like that, you can see that it will fit no matter what size device its own. However, to ensure that it looks great, I'm also going to add a frame, but instead of a fixed width, height in alignment, I'm going to do. A minimum width of 200. I deal with, as in this case, it's not necessary. A maximum width of 400. I'm gonna do the same thing with height, minimum height of 200 and max height of 400. And I'm going to remove alignment ideal height. And now we've assured it will look crit. And you know me, I love corner radius. I'm going to add a 13 corner radius to make this view look excellent. Perfect. Now I'm going to replace the V stack with a stack so that the model can go right on top. However, that definitely doesn't look gray. Instead, I'll do alignment bottom. Now, that's not perfect either. First, we need to do a font and make it a title. Three, looks like a much better size. Then just make it bold. Pattern. Add a background. Color, white. Do a corner radius of 10. Now I want to add some padding. I'll just choose the text and add padding by going the bottom, trailing and leading. Now I'm going to add padding at the bottom of it all. For horizontal, you can see that our view still doesn't look great. That's because the patterns in the wrong spot in our code, we're going to cut it out and put it at the end. The reason that looks so strange before was because putting a padding here is simply adding area that the background can be in. Well, putting it here is adding padding around the whole object. Still some pattern behind the background. It might be nice. So put some padding in there as well. Now, it looks great. On a horizontal padding here allows for the image not to touch the sides. Our padding here allows the text to become larger and our padding here allows it not to touch the edge. This ImageView looks great, but I want to check out what it looks like in dark mode. This is easy. I'm just going to choose up here, choose our color scheme. And she's dark. Oh, that doesn't look good. We no longer can see the text. Don't worry, there's an easy and simple solution. Just go to Assets on accent color. Choose to create a new color set. This time, just choose a background color. Now, I want to choose on background color and make it say any dark. Appearance should be white and dark should be black. I'll show the color fill and just drag it the opposite direction. Perfect. Now, if we go back to our shape ImageView, we can choose to resume. And then to make the background instead of color dot white, we can go into this modifier, add a simple background, and change it to background color. Again, sometimes this modifying menu doesn't put things in the right spot, will put it here instead. Now, it looks great both in dark mode and in late load. We can now go to embed it in the main detail view, press resume on the Detail View menu, and then I'd shake ImageView. That doesn't work. That's because we need a parameter for Sheik in coal, just as this error is telling us, Don't worry, it's an easy fix. Shake. Shake. Okay. That's looking good. Just like that. It looks embedded and like it was there in the first place while still keeping our code neat. Unfortunately, we're not quite done. This view still isn't looking very good. So let's continue. First, I want to embed this V stack into a navigations you a navigation view. And then I want to make the stack a scroll view. Vertically. Perfect. Now not everything's crammed into one area. We've navigation view. I can go down like before the end bracket and choose navigation title and then do shake dot name. Now there's a name above everything. I can then remove text shaped on name as it's definitely not needed. All right, looking better, but still not great. I'm going to embed shake job description by command, clicking on text, and then choosing Embed. Then choose a group box. Okay, that looks pretty good. I'm now going to add another text box in this time. All we have to say is about of then add some padding called horizontal around it. And you can see that this group box already looks fantastic. I'm going to be about a font title up to. Then, I'm going to choose for it to be bold. I can now Command click on text and choose to embed in an H stack and now add a spacer. Finally, it looks fantastic. However, I wanted to keep this few nice and clean. So I'm just going to cut this out and paste it in shape description view. Now, again, add var, shake, shake, and preview this. As always, a missing argument for perimeter shape in coal error comes up, just choose Shape Data and choose 0. Previewing it once more, we show that it worked. Now we can embed this in as well. Simply choose shake, description view, shake, shake. And it's in our detail view is looking better by the second. Still we're not done. I want to add Bolton instructions view and nutrients view, and we'll do that in the next lecture. I hope you enjoyed this one. I'll see you in the next one. To finish this detail view, you're getting better and better at creating views with Swift UI. Soon we're going to learn many other features that allow us to make more intricate apps in just a few more lectures, keep with it, and very soon you'll have your own Swift UI app. Thank you so much for watching this hegemon setting off. See you next time. 6. Putting it all Together!: Today we're going to finish building our detail view. That will include making the instructions view and nutrients view. All right, Let's get straight into it. I'll open up Xcode in my detail view where we left off before. And remember to resize my windows and start our review. Once the preview is visible, I want to get started making our instructions view. If we come over to shape description view, we can see that we already have a basic template on how we want something like this to work. So I'm just going to copy group box and the pattern dark horizontal modifier, copy it and paste it right into instructions view. Of course I am going to add shake and then I will add at the bottom in here, shape, Shape, Data 0, and then resume this preview as well. Once you're seeing in the preview, we can replace about with instructions. And then we can place our textbook description view with everything we need to create a great looking instructions view. I want to create an H stuck with text, saying shake dot items. Then add a spacer to keep it aligned properly. Perfect. Now I'm going to go underneath that and add a divider. Just a simple line. Now I'll add text, shake dot-dot-dot instructions and add that there as well. Lastly, I'll add another divider. The next shape dot extra fat. Okay, all of that looks decent, but I want to change the alignment slightly. The way it wouldn't do this is by replacing this group box with AV stack. Then I'm going to embed our V stack into a group box. And I'm gonna take this pattern dot horizontal, cut it out, and paste it here. Okay, we're back to what we had before, but now I can go onto the stack and choose Alignment. Dot leading. There you go. Now everything looks fantastic in that view. We no longer need to use this each step at all because that's spacer and each job is being replaced with our alignment dot leading. So I'll replace it with text shake dot items. Now, it looks great and we have simple as well as concise code. Okay, let's go back to shake detail view and add shake instructions, view, shake, shake. Let's resume our preview once more. And we'll be able to see, it looks fantastic too. Out of our three views are done. We'll almost, you see if I'm making a smoothie, I want to know how much it serves. So I'm going to go back to my instructions view and put text of shape, sermons. On the other side. We now have a great looking too. But that doesn't tell us much information for beginner users of the app. So what I'm going to do is add my quotation marks, just like this. Now, nobody wants to see shaped dots surveys. So I'm just going to do this slash and two parentheses back to 2. But now we can do another slash and do shake dot S serve. Look at that two servings. What's great about this? And the two of them is, if I was to go to a smoothie with only one serving, it doesn't have an S at the end of servings. It looks great. These little things make users love an app like this. Okay, going back to detail view, we can see that it looks great. Now it's time to move on to shake nutrients view. This is arguably the hardest, but I know you can do it once more. I want to go from shape description, view and copy our group box and paste it over the text box. Now, I'll do shake, shake. And in our preview, do shake. Shakes data 0. I want to change our group box to V stack, just like we did before. In make IT alignment. Dot bleeding. Sometimes autocorrect gives us too much. So I'll just delete this. However, I still want to embed this. We step into a grid box. I'm a dome. Perfect. And let's remove the padding dot horizontal from this and put it here. If we resume the preview, we can see exactly what we're working with. All right, it's looking okay, I'm going to start creating our main view by replacing this text with a divider. Perfect. Now underneath that, I'm going to add an H stock. And within there I'm going to do text, total calories. And I'm going to make it bold. I'm then going to add a spacer because we need to put something on the other side of this. Just do text. Shake, dot, nutrition, calories. Perfect. Now I'm going to close out this H stamp and we're going to add another divider and another H step. So I'll copy them both. Perfect. This time instead of total calories, I want to change it to fact. Put in fact, and then change shape. Nutrition, Fat. Perfect. Now, now I'm going to copy and paste again and change it to carbohydrates. This time, I'll just do shake nutrition carbs. And the last one will be protein. Again, paste in our divider and choose Total, and choose Total protein. Again, all of these are unknown, but you're welcome to go into the shape view and change them all for yourself. We can now put cheek nutrients view within our detail view. Just like this. Shake nutrients view of shake and shake. Perfect. Now we can delete all of this unnecessary code. Let's look at a nice, clean design. Perfect. Now our users know everything there is to know about each smoothing. To test it out, we can try a couple different smoothies. Zuber use flux rate as well. In sodas, rainbow shake. You've just created a complex view. And I'm super proud of you. Okay, now it's time that we finally start putting the app together. So let's just check off, create the detail view and go on to the next part. That is creating a brand new view. Choose Swift UI view. And we're calling this view shakes ListView. Perfect. First, I want to start by creating a list and then creating before each. Within the for-each, we're just going to do shakes. Dark shuffled, will now embed two things in the top. The first one is going to be var shake, shake. And then the second one will be var shapes. Shake. Takes data. Perfect. For a missing parameter. For shaken call, we'll just do shake, shakes data 0 and you only need one. There we go. And then we're going to want to put something in for each to make our forEach work, we need to do item in. Great. Now we can do shake, review, something we made quite a while ago. Then do shake. And then we can then resume our preview. You'll notice that in all the editing, I accidentally messed up this. It nurses fake A-list V shape, and definitely isn't correct. So I want to explain a bit more of what this actually is. You see, this just shows what we want it to show. So for example, if I was to put shake, shake, shake data 0, and then resume the preview, you'll actually see that it previews our review. That's all this does. It's not connected to the code up here at all. That's why it has to be done correctly. Anyway, let's change it back to shakes a ListView. You shake shapes data and then add a 0. And just like that, everything previews perfectly. We can now see everything is in our coal. Well, we still don't have a way to get to the detail view, and that's gonna be our last thing we need to code in. To do this, simply add a navigation link around shake row view. Here's how. Just choose embed navigation link and then choose our destination. To be. Detail View. Again, we're just going to want to choose shake item to follow hour for each item. You will, however, notice that it's been grayed out and if we attempt to navigate, it doesn't work. That's because we just need to embed this list in what is known as a navigation view. Perfect. Now before we go on, I'm just going to choose the end of list. We turn ones and then do in navigation title of super shakes. Now, we can finally test our navigation. We can choose rainbow shaken dumb. That's a weird amount of whitespace. I'm not sure if this is a bug or a supposed to be happening with Swift UI. But you'll notice it's acting kinda weird. Luckily, there's a simple and easy fix. What we have to do is go into our chic detail view, then take our navigation title and copy it. Then put our navigation title right at the end. Perfect. Let's resume it now. Plus pray. Press Play. And okay, that's also weird. It's just showing two of them and always showing bundle of varies. That's definitely not how it's supposed to be either. There's two reasons this is happening. First, it's simply showing what's being shown here in the shakes list view because of the way I'm doing it. So I'm just gonna replace shake with NDA. That should solve our first problem. Okay, Great. Bundle of various has bundled varies. Morning sun has morning sun and royal Barry has royal burial. Perfect. Okay. But I still have that problem because there are two of them. Luckily, this is also a simple and easy fix. All we have to do is go to fumble of berries and remove both our navigation title as well as our navigation view itself. Okay, Let's give it one more try. We'll resume it over here. Then press play. And then she's Garden Grant. Look at that. We have a pretty basic yet very functional app on their hands. They're going to be a lot of things we do to improve it. But the basic app layout is working. We'll move this up to the top just to stay organized. And we've created a great looking up so far. Join me in the next lecture very soon to be able to create a filtering list, aspirin. Now, you've done a great job today. See you next one is Japan signing up. 7. Finishing the App: It's time that we design the filter menu and make a filtered list in our superscripts app. Let's get started. First thing we're gonna do is navigate to the end of the navigation title breaks here and choose to add a toolbar. I can now add my content just like this. Perfect. I'm now going to add what is known as a swift UI menu and add brackets to that as well. Good. At the bottom of them, we're going to add a civil, a label just like this. Great. We can now see that up here. We have it working. We can try it out. And nothing's happening, but that's okay. We need to add a button to do this, just create a button, add an action, and then go down here. Add another bracket. Now say text test, and then print text. Perfect. Now we can play and we'll see that the Test button is showing up. Perfect, Okay, now we have a basic menu setup, but let's fill it in with all of the items we actually need. So let's make this say all. Then we'll copy this button and paste it once, twice, three times, four times, and five times. Then we'll change this all to fruiting. This all to energy, this all to light. And this bot to desert. Oops, it looks like we don't need this fifth button after all, My bad. Okay, we now have all of the buttons working. Let's play the app. And we can see that they've all shown up. It's looking great. Now, we need to actually add a working action instead than just a place holder print test. Up here, we're going to add a few returns and then put in some important data. We are going to say at state var, showing main equals true. Now, we're going to copy this state variable and paste it multiple times. This next one is going to be called showing fruity. This one's going to be called showing energy. This one is going to be called shone the light. And this last one is going to be called showing desert. Perfect. Now we have all of the variables that we need and we can tell what we want each one of them to do. Inside of this button, I'm going to say showing main equals true. Then I'm going to once again copy this and choose 1, 2, 3, and 4. Now, we're going to say that the rest of these are false, false, false, false, and false. Now, because that doesn't mean anything, we need to change it to showing desert. Make that false. Showing light. Make that false. Showing energy, make that false in showing fruity, and make that false as well. Now, we're going to copy this and we're going to paste it over print text. This time, I'm going to change this to false and this to true. Perfect. Now, we're going to continue down the line. Paste, make main false and energy true. Then make text false. And then make main false and light True. Lastly, make showing. Lastly, make showing main false and showing desert. True. Great. So if we resume, we will see tapping on this drop-down. Now, we'll achieve that. But still that's not very helpful as none of these are going to actually known to sort fruity or let, the way to tell if it's actually working is by showing some form of check-mark. Luckily, this is going to be super easy. Before text, we can add. And if showing main is equal to true, then we should show an image of system name called checkmark. Now, we're going to take each of these and put it before each item. Except this time it's going to be showing fruity. This time, it's going to be showing energy. And so on. Add it here, showing light. And for the last one, showing desert. Perfect. We're now going to play and sort well, that doesn't seem to work either. Now, all of them are chuck, if we choose all. Now we'll be able to see that only one is true. And it's working. But at the beginning, that still doesn't make much sense. That's because we need to say that we want our default to always be false for all of this and civic ones and true for showing our main view. Let's make all of these false. Now we're going to resume it and play. Perfect. Now, we can see that every single one of them looks fantastic. Okay? Now that we can see that our buttons are working, we can close up this toolbar as right now, we don't need it. We have successfully created our filtering menu, but this isn't quite good enough. It's now time that we actually allow the correct list to be shown when the right one is pressed. And we'll see how to do that. Now, Let's go above the list and embed it in an if statement. If showing main. Then do this. Perfect. We now have it so that the list will be shown. If showing main is equal to true. Perfect. We can now see that if it's not being shown, nothing is shown and I'm so great either. Okay. That's all right. Because we can add, if Schilling to each of these items, we can now copy this entire item. And then we can paste it, paste it, paste it, and paste it. Then we can start showing fruity. Then make this true. If showing energy that make this true. If showing light, then make this true. And if showing desert, make this true. Before we compile this, I want to replace navigation view with a simple stack to manage our views and then embed this feedstock within a navigation view. Lastly, before we resume, I want to go to the bottom of this v step, which we can find, which we can find by zooming out with command minus. Now, although it what it's replacing where the navigation view was, I want to actually go down to the bottom. And we can see that this is going to be our stack. I'm going to take that off here and scroll back up and put it right before navigation title. Perfect. We can now resume. And finally, it's visible. The reason we had to do this is because Swift UI doesn't know that it is impossible in our code for multiple of these to be showing and if so, it needs to know what layer to put them on. But Navigation View needs to wrap around the entire thing so we can navigate to places and show this awesome navigational title. Perfect. We can now close up our stack and close up our menu to see a better overview of this entire code base. Great. Now we can play choose here. And each one of these is working, except I could've sworn among energy, but i'm, I'm seeing light in fruity. Strange. That's not what we want. Okay? The problem is we still haven't specified that we wanted to filter by those items. Luckily, it is a super simple and easy fix. But zoom back in with our VCE deck open. We can now replace navigation link with our item from our for each type of fruity, then show it. But if not, don't, now, we can view it. See, that is sorted by fruity. Great. We can now copy this and replace each one in our code. We can paste here and paste here, paste here, paste here, paste here, and we've done it. Now, we just need to change the type of this one to be energy, because that's what we're sorting by. For this one, we can sort by light. And for this one we can sort by dessert. Now, we can play it and see that sorting fruity gets us fruity. Energy gets us energy. Light, guesses light. And desert gets us nothing because we don't have any desserts movies inserted. Going back to all, we can see every single one of them. It is perfect. It's exactly what we were looking for. And now we can officially say that we have designed the filtered list. Now our users have a great experience navigating and switching throughout our app. But there's one and I want to do to make that experience slightly better in each one of our, it's showing we have a list inside of that list, I want to add another item then just hour for each view. So we'll navigate to the bottom of foreach and paste in this each stack, there are no more fruity smoothie is available. Now, if we play, we can see that at the bottom there are no more fruity smoothie is available. This is perfect. It lets users know that they've reached the end of the list. Now, we're going to cut me this H stack, which has everything we need in it. And I'll put it, enlist and just remove fruity altogether because it's always movies. There are no more smoothies available. Then at the bottom of this list, we'll put there are no more energy smoothies available. Then we can go to the bottom of light and we can put in for each. Then we can go to the bottom of the list in light. And right before it ends put in, there are no more light smoothies available. And of course we don't have any desserts movies, so we can go to the end and add, there are no more the desert smoothies available. And now we can see when the list ends on each of them. Look how great that is. And it lets us know that we haven't added any dessert smoothies yet. It's great for optimizing the user experience. And just like that, we are done. We can compile our app by choosing this Play button up here and run it on the device. And you might need to choose, don't ask again, and to replace your build. And then we can run it. In the simulator will launch, which enclose Xcode out. But leave the code base open. Just get it off your screen so we can focus on the simulator. Are super chic smoothie app is showing up beautifully. First we need to get rid of the onboarding view likely made in one of our first lectures, we can choose to start blending and it didn't work. We actually aren't done. We need to make that onboarding view work. Luckily, this is going to be the easiest thing you've done all day. All we need to do is create another if, then statement in our original app. Here's how we do it. First, we will add app storage is onboarding, var is onboarding. Bool equals true. Now we're going to do window group and say that if onboarding, then onboarding few. Else, we're going to say shakes ListView. Okay, great. Now back to our on-boarding view for the final time. All we need to say now is that the button should make is onboarding equal false? All we need to do is also add that app storage modifier right up to the top. It's very close to the same. This time however, we have a question mark after bool for we can say that we're fully done. We need to go back to the super shakes app base file one final time and say that shake, shakes data is going to be 0. Just to help out our preview. Now, we can run this app and see that our on-boarding view works beautifully. We can open it right up in bundle of berries is shown. We can sort through the app to light and view that. Everything in our application looks beautiful and you did a great job creating it. Now, you get to put your skills to the test. Let's open Xcode and I'll show you one final important trick that will allow you to take your creativity and make this app your own. Here's how under else, I'm going to add what is known as a tab view. Great. Now I'm just going to add the shapes ListView likely added before. Let's copy it. And then underneath say tab, item, say Image, system name. And say this dot, bullet dot below, dot rectangle. Great. Now underneath that, we're going to add text explorer. Great. We can delete that and we can create one more file. In the main view section. We're going to call this view Info view. And we can go back here and copy this and change it to Info view. Then change our system name to a simple gear shape, and then change our text to info. Now, we can go to Info and I'll paste in something that you can start with. We can resume. And we'll see that you can customize this in any way that you might want using the skills that you've learned in this course. Now there are few more modifiers. What I want to quickly go over with you. Number one is Navigation View style, staff Navigation View style. This makes it so that it takes up the full screen on an iPad as well. Which on an iPad sometimes will collapse it into a sidebar. List-style dot plane shows this. List-style dot grouped shows this. List style dot inset shows this. And let's style dot inset group shows this. Okay? Now that you're familiar with the last things I want to teach you, we can compile this application for a final time. Replace the view if you need to and open up that simulator. It already remembered that we saw the onboarding view. So it's not going to show it to us again, just as we want the experience to be for our users, we can make this a bit bigger by changing it to point accurate for our size. And now scroll through. We can see that everything we made looks so awesome and you can customize this info view in any way you want. Anyway. Thank you so much for watching this awesome course are creating your own Swift UI app. I knew that you could do it. Thank you so much for sticking with me. Be sure to share this course with other people so that they can learn how to make their apps as well. Oh, in for Washington the end, you get an awesome promo code to share with the next viewer of this course. Be sure to remember the human promo code of Super to get you 50% off anyway. Thank you so much for watching. I'll see you in my next course because this is genome in signing off.