SwiftUI: Let's Build an Avocado Recipe iOS App with Swift in Xcode | Robert Petras | Skillshare

SwiftUI: Let's Build an Avocado Recipe iOS App with Swift in Xcode

Robert Petras, UI Design & App Development with SwiftUI

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
17 Lessons (2h 38m)
    • 1. Learn how to develop an iOS App with This SwiftUI Tutorial Course

      4:14
    • 2. Let’s set up the SwiftUI project in Xcode

      7:03
    • 3. Supporting Dark Mode in iOS App Interface with SwiftUI

      11:11
    • 4. Let's create a Launch Screen and support the Light and Dark modes in iOS 13

      7:12
    • 5. Create a user interface with tabs (TabView) in SwiftUI [updated]

      6:48
    • 6. Let's build the Avocado home view with SwiftUI animation

      10:03
    • 7. Let's design the layout of the header in Xcode 11

      11:15
    • 8. Let's fetch the data for the Header with Swift 5

      6:13
    • 9. How to create a interesting layout with SwiftUI: Best Dishes with Avocado

      13:28
    • 10. Avocado Facts and Why Modifier Order Matters in SwiftUI

      9:14
    • 11. Fetching the Avocado Facts’ Data with SwiftUI

      6:20
    • 12. Let's Design the Recipe Cards with SwiftUI and Present the Avocado Recipes

      14:38
    • 13. Let's Create the Avocado Recipe Detail View in Xcode

      16:05
    • 14. How to Present a New View with using SwiftUI Sheets

      4:49
    • 15. Let's Design the Avocado Ripening View with SwiftUI in Xcode

      12:55
    • 16. Let's present all of the stages of the Avocado ripening with SwiftUI

      6:52
    • 17. How to Build a Basic Form UI for iOS with SwiftUI

      9:26

About This Class

5241f539

Do you want to learn how to create an eye-catchy layout in SwiftUI? In this class, you will learn all about views in SwiftUI! We are going to build an Avocado Recipe iOS 13 app for iPhone and iPad.

The Avocados app has a fairly complex UI in SwiftUI and along with the learning, you will create an outstanding iOS and iPadOS application.

Who is this class for?

This SwiftUI class is suitable for anyone with some minor knowledge in programming.

What is the difficulty level of this class?

The difficulty level of this SwiftUI class is suitable for All Level.

By the end of the class, students are able to accomplish the following development tasks and create a complex iOS 13 app layout with SwiftUI application:

  1. How to set up the SwiftUI project in Xcode 11

  2. How to Suppor Dark Mode in iOS App Interface with SwiftUI

  3. How to create a Launch Screen and support the Light and Dark modes in iOS 13

  4. How to create a user interface with tabs (TabView) in SwiftUI

  5. How to build the Avocado home view with SwiftUI animation

  6. How to design the layout of the header in Xcode 11

  7. How to fetch the data for the Header with Swift 5

  8. How to create an interesting layout with SwiftUI: Best Dishes with Avocado

  9. Learn why the order the view modifiers matters in SwiftUI

  10. How to Fetch the Avocado Facts’ Data with SwiftUI

  11. How to Design the Recipe Cards with SwiftUI and Present the Avocado Recipes

  12. How to Create the Avocado Recipe Detail View in Xcode

  13. How to Present a New View with using SwiftUI Sheets

  14. How to Design the Avocado Ripening View with SwiftUI in Xcode

  15. Let's present all of the stages of the Avocado ripening with SwiftUI

  16. How to Build a Basic Form UI for iOS with SwiftUI

How can students get feedback from the teacher and other students?

Students can share screenshots of their finished projects with the teacher and other students on the Skillshare learning platform by creating a new project in the class.

By doing that the teacher of the class with many years of experience in the app development industry and other students are able to give feedback to the students.

Students are encouraged to use the comments system and share their learning experiences with us as well.

Technical requirements

There are only two technical requirements for this SwiftUI class:

  1. macOS Catalina from Apple (free)
    https://www.apple.com/macos/catalina/

  2. Xcode 11 from Apple (free)
    https://developer.apple.com/xcode/

9333f6fb

SwiftUI Avocado iOS App Dark Mode

This app is optimized for the iPad as well. With a couple of lines, you can support the wider screens both in landscape and portrait.

Building a great layout in SwiftUI is a cornerstone of iOS development so we are going to go deep in the following section.

fa368c94

Technical requirements

There are only two technical requirements for this SwiftUI Masterclass course:

  1. macOS Catalina from Apple (free)
    https://www.apple.com/macos/catalina/

  2. Xcode 11 from Apple (free)
    https://developer.apple.com/xcode/


Start your SwiftUI development and app UI/UX design journey with this hands-on project and learn by doing.

Without further ado, see you at the class!

32fd8127

Transcripts

1. Learn how to develop an iOS App with This SwiftUI Tutorial Course: Swift UI is an innovative and exceptionally simple way to build applications across all platforms with their power or Swift programming language. Learning app development is not only practical matter, gratifying activity as well. At the same time, we derived learning material and teacher. Hi, my name is Robert, the lead instructor of this class. I am a professional iOS app developer and UI UX designer. In this class, I view teach you how to create an amazing avocado recipe application from scratch using the latest and greatest in the Swift programming language and the Swift UI framework. Who is this class for? This intermediate level class is for every aspiring app developers who want to create outstanding applications from scratch. The knowledge you will gain from this class can be used to create apps for iPhone and iPad two devices. What is the class all about? This practical class is about achieving three learning objectives. Swift UI framework. The first thing that you will learn is how to use less thrifty. Why apples native user interface development framework, iOS development. The second thing that you will achieve is learning how to create this amazing application from scratch. Xcode essentials. The third thing that you will acquire is the essentials of real app development in X code code editor. What you really create in this class. By the end of this class, you will create this avocado recipe app with their complexly at design that you can launch and use on your iOS device. You can use these application as our foundation or further app development or building even more powerful mobile or desktop applications. Why should you take this class? Project-based learning approach? This class takes learning programming concepts through a project-based approach. It means that you learned everything you need to know by creating this application as your class project. Contextual learning. Contextual learning is a method of instruction that enables students to apply new knowledge and skills to real life situations. This means that new app development concepts are introduced slowly, then you need to use them hands-on development. Finally, this class is not just going through boring programming concepts, but instead we will focus on writing real Swift code in Xcode, approves official have development tool by taking this class UVA speed that your iOS app development and Swift programming learning by creating and coding these beautiful application. Having said that, that CEO had their glass in them. It's not round. 2. Let’s set up the SwiftUI project in Xcode: let's set up our US project in this section, we are going to build an avocado recipes app with 50. Why this? I was sub has a quiet, sleek design, and it supports both the whole iPhone and divide iPad screens. Let's set up our swift, who I project as usual, them load. The resource is from this section. Place it toe the desktop and unzip it by clicking on the package. The provided package contains free folders marked with this least logo and the supplementary ver book fais in PDF and the PAP formats. This verb book shows you the main objectives off this project. As in the first section, you can find the completed project in the green for their the finished project with the source. Courts may have you when you are stuck and need some quick help. The next border is the red one. This contents all of the resources you really need to build the avocado recipes app. The final blue for order is the students Waller. We are going toe create and save your up in this place. That's why it's empty for now. Without further ado, let's set up the project Our first step is to lunch. The X scored 11. Then we create a new X scored project. Please click on the second menu item on the where Convene though in this lesson, we are going to use the single V wept under the EU s that bar Choose these pretty find project and great. Next, we have to configure some of the options for our news 50 I project for the product name Enter Educators Team If you have an apple developer account blogging in here loves you. Toe Build your ab on a device. If you don't have an Afro developer account, you can skip this part and test your app in the IRA simulator on your Mac organization him enter your personal or company name here you can leave this blank toe or now organization identify air. He usually enter the company's website name in the reverse order. For example Com Don't 50. Why masterclass? The Bandel identify air is automatically combined from the project name and the organisation identify their next. Make sure that the language is set so swift, then the user in their race must be swift. Ey finally leave their core data. You need test and the U I. Test options unchecked. After all of the settings, click on the next button and the X cords will ask. Ask where we want to save our project on the computer. Please find the next stop and choose. Yes, the dance holder as the destination off your ex scored project. Now click on the project name. Have locators on the Project Navigator at the deployment in for Parnell. Please uncheck the landscape left and right. Options are AB is best use in portrait mode. Next we are going toe added the up icons to the project. Please follow me step by step. If you are a beginner developer. Salada a sets in the Project Navigator panna Select the empty Icon for order right click with the Mouse or control click on the icon. Choose that show in five. Other option in the Context Menu and Xcor Did you bring us to the Icons folder in a new finder? In the In the Sidebar, select the next Stop Open. The resource is fuller. Inside that open the icon and I concept for others in this water, select all of the graphics and the content. Jesus file and copy than to directly board it must be 37 5 altogether. Go back to the empty at bike off order by using the back button on the toolbar off the finder window. Open the icon set further and paste the icons and their content. Jesus file From the clipboard into this place, you will be asked to replace the existing content. Jesu file. Choose replace. Finally close the finder in, though if you follow my instructions than you ve asi at all of the icons off. This project had been placed correctly in the assets for their just have a look at how money icons do we need tohave to create a very designed i us up. Speed up this process by copy paste thing that prepared icons. So before continuing with the other a set fires. Let's have a look at how the avocados icon looks in the simulator. It's time to build and run our project the first time closing the gap. We can see our icon on the iPhones next tub. Close the simulator and go back to the resources for their speech. From great view to least view in the finder window. Select the following four orders. Avocado, avocado facts, avocado icons, avocado recipes and avocado ripening. Drag all of these folders toe the assets catalogue panel, pose for a second and look at some of the project pictures and graphics. This avocado up has much more content than the previews. Navigates the Avocado I cost folder and select all of the pdf ice in it. But open the inspector spinal on the right side off the X code window. Finally, click on Dari sizing, preserved back toward that check mark. This will make sure that our icons won't be pixelated, and they will be a sharp as they were designed. After that, go back to the content. You see you in the next lecture where vivareal learn, have to create a depth, difficult or sets and pictures. It will help us in the end, to support the light and the dark moods. 3. Supporting Dark Mode in iOS App Interface with SwiftUI: in this lecture. If you learn how to support system wide light or dark appearance, it's 50 why we are going to create adaptive color sets and prepare some specific graphics for dark mood as well. Select the assets catalog in the Project Navigator, right click or Control Creek on the anti part off the center panna Choose New Color said in their contextual menu, renamed the Color said Toe color. Black, transparent light. Select the color and opened the inspector panel with their tributes. Stab said the red, green and blue sliders to zero. It will create a pure black color. Change the opacity off this back color toe 25% which makes it semi transparent black color if you use it for creating shadows later on. Next, let's create another color said Similarly, as we did before, rename it toe color. Black, transparent, dark select. The color has said the colors of sliders zero again and finally, the opacity via be 80%. This time, these transparent black color will be created for creating strong shadows here and there. In this project, we are going to create a certain color said. But this time, if you make it support a light and dark more so. Let's create another color set. Rename it toe color appearance adaptive. Select the color and in the attributes stop under the appearance. Click on the drop down menu by choosing the any light and dark option Vittel. Exclude that we want our color toe Adopt in different environments such as light and dark. Appear IUs. Click on the button option and you've you see that in the center there are three slats for our color, said reveal. Configure the appearance variants we want to modify right now. In general, we use the any appearance, worry and to specify the color by you to use on other system that don't support dark more. We will leave it white now. The light appearance is also white, but in the dark appearance, we wanted Toby Black select the dark color slot and said its color sliders to zero. Using this unique color said, we're create some interesting you elements in the avocado Facts and avocado ripening section. Let's continue with creating another adaptive color. It will be more of use for you have this configuration works, create another color and rename its toe color green adaptive. Choose any light on dark options in the appearances. Attributes change their color input method. Toe eight bit accidents in all. Enter the 167942 after the hashtag this color said were contained medium and light green colors. Select the any appear ius color variant and copy it with the command plus C short cat toe directly board. Then select the light appear IUs color variant, which is white now and based the green color My command plus he shortcut. Finally, select the dark, appear IUs and give it to the following hex color values. See aid. The 899 as you really see when we start using this, color said, the medium green variant will show up in the light mood and the light agree in the very end is show up in the dark mood. Reveal art. The rest of the color, said a sets to our project. My drag and drop them from the resource is for there. Open a new finder window and navigate to the resources for their on the desktop. Open the colors holder and select all of the free color. Assad's in it, then track and job these folders to the assets panel. As I show you, you will see these new regular colors in the assets panel. Select all of the colors by clicking on them, then by right click or Control Creek on them. Ah, contextual menu will appear for us. Choose new folder from Selection, it feels is that all of the color assets into a new father. Rename it two colors. After dealing with the adaptive colors, we are going to configure some images for both died and dark in their faces. This part is more of usual and exciting than the previous one. For sure. First things first create an empty folder and name it to lunch screen. Navigate to the resource is folder on the desktop again. Open the lunch screen folder. It's crucial that you followed me now. Step by step. Select only the green issue background images, then the drag and drop the G P G's to the lunch screen. As I do, choose any light and dark options in the appearances attributes. Now you will see new empty slots for the image. Laurean's copy and based the images from the any toe the light appearances slats. This time we have got not only one X, but two X and three X image sizes as well, Then go back to the lunch screen folder and drag and drop the bluish backgrounds, respectively, to its and the sleds. Our next task is to create new image assets for the headers off the other candle recipes. Let's create an empty for order and name it. Do avocado headers Navigate to the resource is folder in a finder window on the next stop. Then open the avocado Heather swore Order. There are a bunch off graphics in it. It's important to select only the images with a Greenbrae grant, then in track and shop these graphics into the avocado Heather's as I show you. This time there are only one Xa graphics, but we were used. These big images universally. Select all of the six images and choose any light and dark options in the appearances attributes. The next steps are self explanatory in my OPI in young copy and paste, all images from the any toe, the light appearances expectedly after finishing did it go back to the Avocado Heather's folder, Watch out there five names, then drag and drop the specific graphics to its much one. So slice one dark goes to the slice, one image and so on. The image or that is important because we want our heather continues when we scroll in horizontal finished. Good job. Our last task is to create another def. Tobiko sets for this app that's great on empty folder and name. It's toe tub because navigate back to the resource is folder on the desktop that open the Tab Icons folder. There are a bunch of graphics, innit? Select all of the four PdF icons with black linear strokes than a drag and job these graphics into the top I costs as I do. After that, in the inspector's re sizing, select the preserve, vector that option, then choose any light and dark option in the experiences. Copy and paste the icons from the any toe the light appearances, respectively. After finishing with it, go back to the lab icons for order again. Watch out defies names than the drag and drop the specific icons to its much one. So that icon Avocado Dark goes to the lab icon, Avocado icon and so on. These tub icons were changed. Their appearance automatically from back toe white than an iPhone or I bad switches from light moto dark mood. These tab icons will change their appearance automatically from black to write than an iPhone or iPads switches from light mode toe dark more, and that's it. This whole preparation process might seem to be quite intimidating, but it's worth dealing with it because later on, these images were changed automatically when the device switch from light, more toe dark more and be severe Ayerza, see you in the next lecture. 4. Let's create a Launch Screen and support the Light and Dark modes in iOS 13: this'll lecture is a short one because we already know how to create a simple lunch screen . Since the lunch screen is build by using older and different technologists, that's with you. I therefore, is quite important to practice how to create it. Leave us. Start with the background off the lunch screen. Select the lunch screen storyboard filed in the project Navigator beer. See on empty iPhone. Storyboard in the editor. Click on the plus button on the toolbar I knew I sat in the airport pap than ender image in the search field. Select image view. After that, drag and drop the image of you into the center off the storyboard, the dash. The guides will have you to position it. Make sure that the Attributes inspector panel is active at the image of you section. Start typing background and choose the background image name. Depending on what is your system preferences on your computer. It could be a green or a blue background image. Since this specific asset is adaptive at the image you there is a content more field. Choose aspect feel for the image. It will scale up the image and feel the full screen for us later on at new constraints by clicking on its button at the bottom off. The editor full of Mr by Step. Because working with constraints, it's a bit tricky on check that constraints to margins option. Then select the view instead off the safe area and said its value to zero. Repeat the same options four times. Start with the top Batam, then continue with the left and the right sides. When you are done, click the at four Constraints Button and Ex Court. We'll do the rest for us. You can see either a green or a blue grand G by Grant filled out the whole storyboard screen. After the background, we are going toe had a logo and the title to the large screen. Click on the plus button on the toolbar. Second time you are sat in the oval, pop up again then and their image in the search field Select image you after that track and drop the image of you into the center of the story board. At the image you section start typing avocado and choose thes image. As I show you, the avocados will appear on the storyboard. We need toe add on exact size for the image. So click on the add new alignment constraints button and enter 242 140 for the whip and the hide off it. The next step is toe. Add new alignment constraints by clicking on this button at the bottom off the editor. Firstly, check on the horizontally in container checkbooks. Secondly, check on the vertical in container checkbooks to this time be want to move? The avocado image affords a bit from the center of the screen. Therefore, enter miners 45 for the Y position. Finally, click on the add toe constraints pattern. Next, we are going to attach attacks. Label below the image. Click on the plus button on the toolbar for time search were labeled Object and drag and drop it below the image on the storyboard. All right, so far, so good. But we need to some configuration on the new tax labour and their avocados that'll into the text feared. Make sure that all letters are uppercase at the labor section, said the alignment to center for the form time. Instead of using the system, the Ford found, we are going to choose a Nice Seri formed matching toe Our design. Let the phone to be cast, um, than the front family toe charter. It's weight should be bored, and it's a size 42. A nice big one. Click on the done button for his color. Choose vied from the bottom off the color drop down menu. Our final step is to position that that'll horizontally on the screen, then attach it to the image below it. With this combination, if you get a sleek lunch screen firstly at the new alignment constraints for the labor and check on the horizontally in container checkbooks, then add the specific constraints by clicking on the bottom. Now we need one more thing. Select the label and press and hold the right mouse button. Then move the cursor above the image you see. Ah, blue line pointing to the image from the labor. Release the mouse button. A new contextual menu will pop up for us. Choose the vertical spacing option from it. You have just attached a label toe. The image you. The very last thing is to configure the exact this that's between the two objects. Select the size inspector at the dope ride the bar change the value off the top space toe advocator constraint to 12 by editing the existing one. After the smaller refinement, we are done. By following these instructions, you have just created not only a sleek lunch screen, which will work both on iPhones and I bet, but it were changed its appearance in light and are more too. Let's build and run it on the simulator right now. Why not go to the toolbar and click on the beard and run button to start a simulator and watch our new lunch screen? It's quite amazing, isn't it? In the next lecture, we are going to work on this app for dinner. 5. Create a user interface with tabs (TabView) in SwiftUI [updated]: in this lecture, we are going to create navigation type meat. Perhaps before you learn all about steps and views we need to create some folders and fires these groups borders will help us organizing the Swifty wife eyes in a clean and very structured way. Select the main Avocados folder in the Project Navigator than control or right click on it and create new group. Rename it Toe Data. After that, create two new groups in a similar way and renamed them Toe Model and View. Now Select the content he was with you. I file and drag and drop it to the View folder. Changed the hell over placeholder text toe avocado recipes. Then click on the View Group further and by control or right click on it. A new pop up context menu. You show up. Choose new file that's select swift. You I file and text give you the name avocados View and save it into the view group. Change the hello word placeholder tax toe avocados. Repeat the same process and create another swift Do I file this time? Name it toe ripening stages view. Change the hello world placeholder text to ripening stages once again repeat the same process and create another swift you I file this time. Name it. Do sad things for you. Change the hello world placeholder decks to set things last time Create another sweet two I file this time Name it toe f you basically they have just created for new swifty y fires. One off them is called f you. This will be the main view off our application between contain the w navigation select the screen delegate file find and go to the content You far which provides the main window view for the app that change the main view from content You toe f You all right? It's time to talk about that view Navigation type a little bit So what? W is a special view that switches between multiple tried views using interactive user interface elements. These ey elements are the dub items to create a user in their face with perhaps we need to place views in a W and applied the top item modifier to the contents off each tub. Their views on Lee support the items off type text image or an image followed by text passing any other type of few results in a visible but empty that item. Let's create our first stop navigation, but swift you I shall be Select the AB view Swifty y file, deleted the text, then enter debut inside it, please. The avocados view give you that up item modifier. Inside the few modifier create an image that contents are avocado branch chicken. Then create a text with the avocados string in it. As you see, our first stop is visible now on the canvas. Before we continue. Let's make sure that our main window view extends the view out of the safe area on the top edge at this new modifier to the tabs you next, because we want our taps so much are branding it feel ignored. Default Blue color are excellent. Core will be primary adaptive color, which is black light mode and right in the heart motor. It's timeto test our app in the simulator or on your physical device. Build and run the project. After the lunch screen, we see the main window made stop navigation on the bottom. Let's go to the rest off the top navigation. All right. The second stop item will be their content to you add to it a new tub item with the fire button image and the text in it. The icon is that icon book and the text. These recipes. The third tub item is ripening stages for you as before, adds to it a new tub biter modifier with an image and the text in it. The icon is that icon avocado and the text is ripening. Our last stop item is for the sad things please. The settings for you in the top view for the last time adds to it a new that item modifier with an image and the text in it. The icon is that icon settings, and the text is set things. If it's necessary, you can format and intent the code lines correctly, as I do reveal. Finish this lecture by testing our tub navigation in the simulator. Having said that, build and run the project test all of that data by terms by tapping on them much how the views are switching between each other. How awesome is it You have just successfully created that navigation with swift you I In the following lectures we are going toe bill that all of the views and complete the app 6. Let's build the Avocado home view with SwiftUI animation: in this lecture, we are going to create a whole view for the avocados app. Select the avocados, you in the project Navigator M, but the text you into a V stack than add one space above and one below the text. This will expand the base that where to Carly up and them toe the safe area next at a background modifier, toe the V stack inside it, create a new image you and fetch the background image. This image is quite large enough to feel the whole iPhone screen, but we need to scale it. Prepare Lee so at the following modifier to the image re sizable and expect reissue content mode that you'd be feel as you see the background image field at therefore safe area. Our next goal is to expanded outside the safe zone, and they're just ignoring safe area. Then, all nice. It works like a charm after creating this nice grandeur background. If he'll add an avocado to the view, he said, a new image you about the text you and fetch the avocado image as you notice. This is a huge image with transparent background. We needed to shrink it down at the following modifier to the view re sizable and aspect ratio than content. More. Let it be feel the re sizable modifier allow us to shrink than the image on the aspect ratio were prevent toe this thwarted after that enter frame. Read 240 hide 240. Finally we are going toe. Add a nice dark shadow behind the avocado between Pope. It up from the background. The radio's is 12. They won't move it in horizontally, but Uberti Carly by eight points by commenting out and in the shadow, you can see the differences. Clearly. This fine detail make our design much better. With a delegate animation, it would be even better. You will see we are going to continue our work on the title at the following modifier to the text wand system 42. The rate will be bold and the design which is the phones type, by the way, will be Saref. This beautiful new serif system formed, which is called New York Waas, introduced in our US for tin, the foreground color. We'll be right around the text. There is a default padding off course that it will get a shadow but this time it will smaller than the avocados shadow. Next, embed the title in a V stack has We are going toe. Add on introductory marketing content below bit, and they want to keep these texts together open and you find their window and navigate to the resource is folder Inside it. There is a folder called that Open it. Find the avocados text file and open it as well. Select the whole text and copy to directly board than Cruz there. Find a window, go back to the avocados, views 50 wife file and create a new text. Your below the title inside the V stack based their content inside it Now, maybe, or do something new in order to format our text. Three. Need to change this tax and create a multi line string literal with three double quotation marks. Our goal is to separate the first sentence from the other part of the text with a break. You can use empty lines, too, if you wish. Then, at some modifiers to the text line limit. Neil formed ceased them sighs headline, and it's fun to design is sorry for the text color. We choose the light Korean one, then the center, the whole text in the view almost then. But one thing is still missing, in my opinion. What about to add a lance basing with eight points? It looks much better now because we want our text to look good in I beds as well. That's why we had 640 points marks with to it since dealing with immortalized strings in the swift wife frameworks, sometimes problematic. Therefore, we had 120 points minimum height. I wish that's with you. I could handle the multi line text fuse better in the future. All right, at on default budding around the V stack This basing really prove the overall appearance off the view. Next of your tests are designed in dark mood in the campus preview. Let the preview device Toby iPhone 11 pro. Then we add a new environment Body fire to the preview. Enter color, shame and choose the dark mood. As you see the green background changed the blue background. What's better than tested on your riel device or in the simulator? We can do it even better because X scored 11 has a new beauty in environments testing feature click on the environment overwrites button and turn on the interface style option. There we can turn on the light or the dark Mort. In the last part of this lecture, we are going to add a new animation toe the view and make it more impressive. Let's enter a new command block at the top off the avocados you extract. Then we need to create a new variable for the poor sit animation. The value off the bullion war will be force so it won't be active right away. Next step. Go to the end off the V stack and had the following modifier to it on a pair, their form inside the parentheses. And there so well, said Animation Taga. This year, start the animation on leave and the view is already loaded into the window. After these, go to the avocado image and add the following modifier to the View Scale Effect Self Crusade Animation Question. Mark one colon zero bond nine. Which means that the avocados size is smaller initially, but when the bulls it animations thoughts, it will scale up to its previously given size next reveal, and he made the Opus City as well Opera City said. Who's it? Animation rusher Mark one. Colon 0.9. This way, the image will be slightly transparent, but later on it will be full of back. The only thing that is still missing is the actual animation comment. Animation, animation, easy and out duration 1.5 repeat forever or to reverse is true. It's quite self explanatory. The duration of the animation is 1.5 seconds, and it will be repeated forever with the auto reverse movement. Respectfully, let's start the life preview in the canvas. As it's expected, the avocado is animating in a slow, visiting style. We can even switch from light, more toe dark mood by commenting out the environment modifier in the preview section C. Just one more thing. I think that the title should be upper cased. It looks much better now. Let's test the finished home view in the simulator. All right, finally, the Happy's lunch and we can stake a look at the current stage off our work. In the following lectures, we are going to create the avocado recipes view than the ripening view. Finally reveal, caught a gentle introduction to creating forms. It's 50. Why see you at the lesson 7. Let's design the layout of the header in Xcode 11: in this lecture, we are going to design the layout of the heather section the heather contents, horizontal scrolling view with many images, like have a candle foods on the kitchen table. Select the view for order in the project Navigator. Then create a new swifty y fire. Give you the name Heather View. Change the hell over placeholder text toe avocado. Next, create I knew Z Stack and placed the text you into it, using the free modifier on the following while used to the sea stack read 480 Hide 320 and its ally mentee centered. Now go to the preview and resize it with these codes. Preview Lee out sighs that feeds as you can see, the iPhones. Bezos have a gun in the convents, and we see a rectangle viewing it. Zoom at this view in the preview window so you can see that it is better later on. Create a new image, you in the sea, stack and load in the avocado slice. One heather image. This is another huge graphics, and we need to shrink it down, make the image re sizable. Then it's a spectra shield will be feared so far so good after these embedded attacks you into a new V stack, then create a new text below. They had, like text. The content for the sub headline is the following text. Avocados are a powerhouse ingredient at any meal for anyone now. The ad zero vertical and 20 horizontal bad things to the V Stack. This piece that will be our content rapper and reveal add to it a frame modifier. It's really will be 281 points and its height will be 105 points. Next, add a new background color to it. Color black transparent light. Go to the headline and the Let's of side formed Cease them title and its design is Sarif. It's formed. Wait, we'll be bored as usual, Then give it a white for grand color. Finally, a shadow with radios free will help us toe pump it up from the background. Now we are going to design the sub headline for its want Choose food Note. Let me to their lines into multi line textile. I meant leading for its foreground color. If you choose white just like before finally, and a shadow with radios free to it in the new preview. In, though in Exclude 11 we can see instantly. How are layer? Design is getting improved for loving this process. Our headline for upper. Get a green, stylish border on the left side. Go to the the stack and embedded into a New age stick. Align need to the top with zero spacing. Now it's frame will be 285 it's and 105 height at centering alignment. It's time to create a new rectangle. It's 50. Why in the age stick, it's feel color will be color Green light and it's with will be precisely four points. We are almost done, but we need to have the following offset values toe our age Stack off, said Exposition, my News 66 my position 75 With these values, the position, the headlines in the bottom left corner off the Heather view Small refinements. The stack off the headlines has got a leading alignment with six points. Spacing. It's perfect. Now the headlines off the header section have got a sliding in animation that we're drew the abusers attention into the top area. There they can scroll horizontally. Heather images go to the top of the Heather View and create a new comment line for the properties at ST Private War Show Headline Bull Waas. Then we will create a new spring animation property. It some new modifiers with it. War sliding animation, animation, any mation. Spring response 1.5, then being Fraction 0.5 planned duration. 0.5 speed one DeLay 0.25. Now this animation is ready for use. Go to the end off the age slack view with headlines modified. The offsets My Position Why show headline pressure mark 75 220. This feel slide in the headlines from outside Off the bottom into its destination on the bottom corner. It's timeto for this movement. Are spring animation animation slide in animation. And finally, we need to trigger this animation than the ages. Like already appeared on the screen on a bear that form Cem show headline Tuggle. All right, everything is done. So let's start the Life Review. As you can see, the Life Review can run on Lee in a simulator. Since our layout and animation worked without any problem or back, we can even test it in the dark mood with the environment modifier. Great. Now let's continue it. Inserting the header view into their content. You open the content useless to I file and the related attacks you in it. Then enter screw of you vertical shows indicators for us inside it. Create a V stack the stack alignment center spacing 20. Then create a new test. You. This will be the title off their food or section. Text all about avocados. Want assist them? Title design Saturday one. Trait. What for? Grants. Color, color, color green. Adaptive I think. Eight. After that embedded its next you into a new movies. Think these thick alignment center spacing 20 outside off it. Create a nice comment and name it food next at the following modifiers to the food frame max with 640 bedding, bedding that on 85. Finally create a new text you inside the V stack and style it next everything you wanted to know about the avocados but were too afraid to ask. Formed sees them. Body design. Sell you Moody line Text alignment center foreground color, color gray. Our last objective in this lesson is to insert the header view above the food of you go back to the scroll of you and create a new comment line for the header. These comments were help us to navigate in our code later on. After that, enter Heather View. Our job isn't finished yet. No matter we can see the heather is on the campus because we found are viewed. We expanding the war screen, even the safe area. Navigate to the end of this crew of you and enter a just ignoring safe area. Oil. Bad ink. Zero. Okay, this works like a charm, but wanting is still missing in our layout. Select the Heather View and by common or right click on it embedded in an age of stack. And I need to the job with a zero spacing this age stack, we will be the wrapper off the heather. However, we still need to create the horizontal scroll of you in the age stack. Enter scroll view horizontal shows in the gate doors for us. What a fantastic job as usual via test it in the review, it definitely works. So the only thing we have to do in the next lecture is the fetch. All of the Heathers content in tow are up 8. Let's fetch the data for the Header with Swift 5: in this lecture, we are going to fetch de static data for the others. Select the mood a folder in the Project Navigator. Then create a new suite file. Give you the name Heather Moda. Next importers 50 Wife Framework and create a new comment for the murder. After that, let's create our actual data model. Abstract Heather Identifiable You Are I D. You You I D. Ward Image String Bar Headline String Bar Sub headline String. All right, our model is then so we can prepare the headers that are for using it later. Select that data for there in the Project Navigator. Right now it's empty. Create a new suite file, give it the name Heather Data and save it into the net off water. Next, importance 50 y framework and enter a new command, for that matter. Now let's create on array off that, which is a heather extracts type that Heather's data had. There are a Rainy is empty, but we will enter here, but that off the first header element Heather image avocado slice. One headline Avocados Sub headline. Avocados are powerhouse ingredient at any meal for anyone before to insect. The rest of the data we need to reform at this long line. Break the code after the corners, Great open and you find their window and go to the resources for their. Then you really find I knew Heather that a text file in that that off wonder. Select all of the text in the file except the first headers content, which we have typed in the data just before then copy and paste it to the clipboard. After that, go back to the header that the file and based the content after the first header scatter nice. We have got all of the content for the headers. Now, before we fetch the content for the headers, we need to take a short break. Open the content you file and comment out the heather view, then Melo Wheat create a temporary text file. Let's go back to the Heather View and create a new variable for the Heather Bar header. Heather, this really break our court. The review is complaining about the missing argument off the Heather Param Eter, so we need to load the data in the preview mode as well. Heather Heather's that First, this will fix the error in the preview. Go to the headers. Image you and replace the place. Hold their content. Heather image. Then let's modify the headline Heather headline. We'll finish it with the sub headline. Heather. Sub headline. Open their content You again and create a new command line for the properties at the top off their code block. Then create a new were able for the Heathers. You are Heathers, Heather headers that after that, at this property to the preview as well. Heathers head there is that Next delete that text you and uncommon ent the header. You then comment class. Click on the heather and choose the repeat action in the For each function changed that placeholder numeric range toe Heathers and at the Heather plus item property to the Heather View. There is no error in our court, so let's one the life review school horizontally in the header view and watch all of the different heather images and headlines on top off them. What about toe? Build and run the avocado up on or riel device or in the simulator, click on the recipe Stop item and does the heather. Quite impressive, isn't it? Go back to the X Court and override the interface style environment parameter and the switch toe dark mood or some are EP gets better and better with completing each lecture. 9. How to create a interesting layout with SwiftUI: Best Dishes with Avocado: in this lecture of your practice are designed scarce and create on awesomely out design. It's 50 why it might be challenging this complexly out in the first look. But basically we are going to use horizontal and vertical stacks to achieve these design. All right, before we start, let's have a deep look at this design and try to find the Percival horizontal and vertical stacks. The main content rapper will be an age stack inside it that are free. These techs, like columns the first and the third stacks, are almost identical. They both contain four H stacks like rose. Inside each row there is an image and the text to you. Between them, spacers have passed to push these views to the edges and keep a flexible space in the middle. The only difference is the views orders. On the left side, we start with the image and read the text. On the right side. We start with the text and and with the image, then between each row, there is a teen stroke divider. The middle part is quite easy, in my opinion. In the middle of the view, there is a heart Assef symbol, provided by the system above and below the heart that are vertical dividers. Besides cording, this awesomely at Revere learn another important concept in connection to us 50. Why we are going to create our first customer, you modifier. Basically, it is a real visible court snippet We Then we can reuse these codes over and over without repeating ourselves and the best parties that once we change something inside the modifier than all views which are using this modifier will be updated immediately. You will see two examples using them in this lecture. Let's deep dive into the court, select the view folder and create a new swift. You I file in there give you the name dishes for you High the Project Navigator. If you have a smaller screen, as I do the make, the preview picks its size. It's with 414 and it's Hide 218. It's an arbitrary size, and it doesn't affect our up in any way or any shape or form, but it help us to focus on our design. Resize it to 100% if it's needed. That's a champion to the court. Firstly, delete the text to you that creates the main content. Rapper and age stack. Give it some genera. Styling the views inside it will inherit those modifiers. The 1st 1 is the phone size and type. The 2nd 1 is a great foreground color. The 3rd 1 is horizontal bedding, and the last one is a maximum hide. Next, create the system. Image hard in a circle above the image. Create a new age stack. This will be a row inside it. Create an image with the toasts icon, then a spacer, and finally attacks to you. Enter toasts. String inside it. All right, that's great. Another rule on the right side. Age stack inside it. Enter thanks got camel string, then following a spacer. Finally, an image with the great calm all icon now resize the image off the icon frame. It's video is 42 and it's Heidi's 42 as well. Alignment center. Copy these two modifiers and pains them below the other image on the left side. As you can imagine, this isn't the most efficient way to program, because in this way, be repeating a bunch of courts in our effort. The school cause problems in the future, and it's hard to maintain. That's why we are going to create a custom view modifier and reuse it over and over. Go to the end off the dishes view below it. Enter tracked. I quit modifier view modifier, funk, body content content, some view content frame the feeds. 42 height. 42 alignment center. We only use the free modifier because somehow if we try to use the front, wait more than fire the compiler, Your true us on air. Or don't worry, this one line off modifier is a huge Have Peress you'll see later on when I show you why. After that, replace the existing modifier with the custom one modifier Icahn modifier, maybe to the step with another image. You next we are going to create their columns for the rose in bed, the H stack inside a new visa back then select the whole each stack and copied to the clipboard. After that, base this court three times inside the re stack. Shortly after we can see all of the four rows in the campus preview. All we need to do now is to replace the content icon that cause thanks that goes to Icahn salads, text salads, too. Icahn, have you ever thanks Spreads? Then enter a comment above this. First, Callen finally place new dividers below the rows. Except the last one. We will repeat the same process on the right side. I remembered the age stack inside a new V stack. Enter a comment for the first column, then select the whole age stack inside it and copy the court to that Laboard. After that business called three times inside the V stack. Now we can see all of the four rows on the right side as well. All we need to do now is to replace the content text sandwiches. Icahn sandwiches, too. Next soup. I can't soup, too. Text smoothie. I come smoothies. Finally, please. New dividers below the rows except the last one. Maybe we'll focus on the middle part off the layout and bed the image inside a new V stack . This is our second column, Then create to dividers one above the image and another one below it. In order to make these dividers lineup vertical e, we need to embed each of them into a new age stack, all right. And now we can work on the same board a little bit. Enter image scale large. The symbol is bigger now, but I am still not satisfied with it because it's significantly smaller than the icons and it's stroke is much thicker. You should pay attention to me carefully because I am going to show you how to customize the system image. It's not. So our views, like other modifiers, unfortunately, enter formed, formed title. Wait ultralight. We can play for the different stroke weights just to see how many options we have. Mystic toe the ultra weight, but you can use this handy modifier in your design as you wish in the future. Next, we are going to refine this layout with some alignments and spacing. Second Colon, the stack these thank alignment center spacing. Sixth in first column. The stack these think alignment, leading spacing for third call on these thank he's thick alignment trailing spacing. Four. Main content. Rapper Age Stack A. Just like alignment center. Spacing for our layer design is done, but I promised you before to show how toe one line modifier can make a difference in our work. That's a jump to the custom. I could modifier then change the icons size from 42 to 60 points. See, we managed to change all of the sizes off the icons immediately. Let's make them smaller. What about 20 points? It works like a charm. Now redo it says toe the preferred 1 42 Done. Open the content you fire. Now create a comment mark for the dishes view, then place it into the content you. Let's go through a very short exercise and create a new custom modifier view for the title . Navigate to the Food Tours title and cut its modifiers to directly board except for different weight. Then create a new modifier view below the content you strapped title modifier view modifier funk by the content content. Some of you content pays the phones. Type the foreground color and the bedding inside it. After that, jump back to the food or title and add to it the that's one modifier. If necessary, give the food orders content a minimum height so it won't be shortened. Then go back to the dishes view and create a title for it. Text. Avocado dishes won't wait. Board modifier. Title modifier are very last. Task is toe at the dishes. View a maximum of it in order to look great on divide iPad screens as where, as usual reveal tests are up in the simulator or on our physical devices. This time, choose the 11 inch iPad pro device after the beard and ran comment or a Planche is in the simulator. Not bad. The home view looks quite good with the animation and the recipients view. By getting more and more content, it gets more impressive. Let's see what will happen when we rotate our design. Nice works like a charm. Our content is centered on the screen. Now. Test the dark mode with overriding the environment in the X court. Let's resize the simulator. What do you think? We definitely should continue our app development because it's so fun with 50 Why see you at the next lesson. 10. Avocado Facts and Why Modifier Order Matters in SwiftUI: all right in this lecture review create ah, unique design and the symmetrically out with 50. Why the Avocados Facts reveals some interesting information for us about this popular through it. Inside the container there is a tax block. It has a green linear Grady End background color and rounded corners outside. Off this container, you can see some shapes off circles stacked on each other. There is an image in the smallest circle below it. You can see a bigger white circle below the white circle. There is another bigger circle, with another green ingredient background color. The last circle bolos the previews one is quite interesting because it has got a special color. The adaptive appearance Color said. That means this color matches. It's a periods with the device appearance settings. So in the light, more it's right. And in the dark Mort, it's black. Using these adaptive appear ius color, we can separate the service from the rectangle shape. This technique creates an interesting design and read the symmetrically out. It stands out when we insert and repeat it in the hole is under scrolling view. I'm sure that you really love these design exercise at the end. So let's start coding. Selected the View folder in the Project Navigator. Then create a new swifty y file. They meets the facts view and save it. Hide the Navigator spinal. If you have a small screen, go to the preview view and entered the following modifier. Preview Lee out fixed. We'd 400 hide 220. It will create our design. Inside this fix sized you let the size of the campus toe 100% then go to the rest stop and open the resources for their inside it. Open that that off warder. And finally, the fact that our text fire Select the second factor string content and copy these long sentence to the clipboard. Close the text file and the finder window because we don't need them in this lecture anymore. Jump back to the X court and pays the content from the play board into the text. You then add the default bedding modifier tweets temporarily. After that, we add a fixed three than hide toe this text to you using a frame Feet 300 hide 135 Alignment center. Next, create a new Grady and background background. You near Grady End, Grady Ent Grady Aunt Colors Color color green medium color color Green light start point leading and point trailing after that at a 12 forints corner. Radios modifier To this view, they are going to finish the design of the text you with the phone style blind limit. Six. Martina in text alignment Leading formed Food Note. Four Grand color color White Nice. Our text you is then, but before to continue with the image you any three. Embed this into a new Z stack, so let's great one right now. Then create a new image view inside it. The image Avocado fact to re sizable frame. Vit 66 Hide 66 Alignment Center creep, shape, Circle off, said Exposition, My news 150. You may wonder why we choose this exact number. 40. Offset 150 is the half size off the heads off the text to you. You should keep in mind. That's 50 wise using the center off the view for calculating a coordinate point. That's why the photo is half inside and half outside above the text. You next. If you change the putting off the text content, are these modifiers above the frame because the orders off these modifiers really matter. In the case of Swift you I bad ink leading 55 bedding trailing then that I think. But she can free now navigate today, image you and create our first circle background below it. It will be bigger by eight points than the image you must enter these modifiers above the offset modifier toe get the same result that we wanted My grand. So go I feel color wide frame Read 74 Hide 74 The alignment center Great. Our design gets better. The next background circle will be bigger than this one by eight points as well. This circle will get a similar linear Grady in background like the text to you has got background circle feel Many are greedy End Grady Ent great The end colors color color green medium Kallur color green light Starting point trailing endpoint leading frame. We'd 82 height 82 alignment center As you can see in this 50 my friend world, we can use multiple similar modifiers at the same time like backgrounds In this case, just don't forget that the orders off these modifiers matter a lot you can dress that The last circle background is bigger than the previews. One by eight points to my grand circle Feel color color appearance. Adaptive frame reads 90. Hide 90 alignment Center this circle. We'll have that special adaptive appearance color. Which one we created at the very beginning off this section. Nice job, the unique design and they're symmetrical. Layout. Look, wait. See you at the next lecture and reveal. Embed this avocado facts in tow a new chorizo NITEL scrolling view. 11. Fetching the Avocado Facts’ Data with SwiftUI: in this lecture, we are going to fetch the static that for the avocado facts, select the motherf order in the project Navigator. Then create a new sweetest file. Give you the name fact more that next important, this 50 wife framework and create a new comment for the model. After that, let's create our actual data model. Distract fact identifiable. You are I d you you i d you are image string. You are content spring Great. Our model is then so we can prepare the data off the avocados. Facts select the daughter for order in the project Navigator. There is Heather data already create a new suite file and name it toe. Fact that and save it into their father. Next import this 50 y framework and enter a new comment for the data. Now let's create an array off that which is a fact struck type. Let facts data fact navigato the resources folder in a new finder window that open the fact that a text file in that that off water, select all of the content in the text file, then copy and paste it to the clipboard. After that, close the file on the finder window. Go back to the fact that a file and pays the content inside the anti array. Nice. We have got all of the content for the avocados facts. It's timeto fetch the static data into our Let's go back to the facts view and enter and you comment for the properties, Then create a variable for the individual fact for you. You are fact fact this will break our code as he expected. The preview is complaining about the missing argument, so we need to load the data in that review. Enter fact facts that zero This will fix the arrow in the preview. Go to the image you a replace the place for their content image. Fact image not is the new image in the preview window. Then let's finish with the content off the tax to you. Text fact content. Open the content you and create a new variable for all of the avocado facts below the headers that far effects. In fact, FactSet data after that at this property for the preview as well Effects, facts, data. We don't need the Project Navigator, so let's hide it if you wish, you can show they knew me name up as well so we can see the structure off the court beside the compass. Win, though, navigate to the talk and enter a comment mark for the avocado facts below the dishes. Then let's create attacks to you for the new title and at our new custom view modifier to it. Thanks, Avocado Facts Front Weight Board modifier Title modifier. All right, now we are going to create a new horizontal scroll view for defects. Screw all of you Horizontal shows Indicators, fours ages, thick alignment. So spacing 60 Forage facts item in facts for you effect. I, um next we need to add somebody Modifiers for the horizontal are stacked you in order to spacing the facts in the properly. Bad thing. Vertical bad ink leading 60 spending trailing 20. Wow, The compass is already refreshed itself. So let's run the life preview and test the user in their face with the new avocado facts inside it. Scroll horizontally in the facts you and watch all of the different content about this healthy food. I'm sure that you are excited to run the up on your device or in the simulator. Let's build and run the app. Top on the recipe stab and there's the facts section. It's well functioning and quite impressive. Now go back to the X Court and override the environments. Diaper Mater From Light to Dark Mort Great are has been improved a lot with this new design . Let's continue the up development by adding some avocado recipes. Threw it in the following lectures. 12. Let's Design the Recipe Cards with SwiftUI and Present the Avocado Recipes: in this lecture, we are going to create a lay at off the recipes card and presenting the recipes content in the content. You select the model of order in the Project Navigator, then create a new swift file. Give it the name recipe Maada Next, import this 50 y friend work and create a new comment or the recipe Maada. After that, let's create our actual data model Extract S O B Identifiable bar I d you you I d bar title String bar Headline String Bar Image String Far rating in de Gier you are serves in teacher of our preparation in De Gier, you are cooking in de Gier Well, our in structures array off string, lower ingredients, array of strength. Great job. Our model is Stan. Therefore, we can prepare the data for the avocado recipes, select the dot of holder in the Project Navigator and create a new swift file and name it toe recipe that, and save it into the foreigner. Next import this week Do I framework and enter a new comment for the static data. Now let's quit Honore off that which is a recipe extract type. Let recipes data a recipe navigate to the resource is folder on the desktop in a new finder window than open the data folder and inside the recipe that are plain text file. Select all of the content in the text file, then copy and basically to the airport. After that close, both the text file and the finder window go back to the recipient that a file and based the content inside the empty array. As you can see, the content off the avocado recipes is quite long. There is no reason for typing it in manually. Next selective You folder in the Project Navigator. Then create a new swifty y vile, and they made to recipe guard view and save it. Enter a new comment for their cards from Burti Mark Properties, then create a new variable for the cards that for recipe recipe. As you already know, we need to add the data in the review toe. Make are wheeled work for barely recipe card view. Receive. It's a piece. Data zero. Finally precise. The preview window review layout size that fits all right, our prep Fergus than it's time to create their actually. Yet for the recipe guard, select the text and by Common Plus Creek on it embed it into a new vertical stack. Then they replace that tax to you with a new image you image recipe image. Make Their card image is sizable and scared to fit this scared toe feet modifier as the same result as the aspect ratio content. Mood fit, which we used earlier many times after that at the following modifiers to the V Stack may grant color white Cordner radios to have should, though color, color, color Black, transparent Light radios eight x zero Why zero this feel? Make our guard container a pretty rounded view with a nice background shadow. Great. We are going to add a nice bookmark icon on the top off the card image by using the overlay modifier. Enter overly image cyst them. Name bookmark formed, formed, died rule Great light four grand color color white images Skill. Smaller shadow Can our color color black transparent light radios to x zero. Why zero? As you can see, this bookmark icon exposition in the center of the image that we've wanted to be positioned on the top right corner off it. So how can we achieve this without knowing the exact size off the image, which is flexible by the way we can use stacks and spacers to manage this challenge and bed the image into a new horizontal a stack and enter a spacer above the image of you. This spacer will expand the whole horizontal space inside the ages slack and push our bookmark. I come to the right edge off the card okay at this time and that the image into a new vertical stack and enter a spacer under the image you. This spacer will expand the whole vertical space inside of Easdaq and bush or bookmark I gone to the top edge off the card. All we need is to add some bedding toe are bookmark icon, enter bedding, trailing 20 Bad thing Top 22. Finally, they can create a new comment for the card image. Next, we are going to design the rest of the avocado recipe. God view. First and foremost, let's create a new re stack with somebody modifiers than inside the V's back. Enter new command lines for each content section. Piece that alignment, leading spacing, bad tidal headline grades, cooking, padding, padding, both home to have we start with the guards. Steidl text recipe, diet or formed sees them. Tidal design. Saturday formed Wait board, foreground color, color, color green, medium line limit one. Then we continue with the cards headline, which is a text for you, too. Text recipe headline. I want system Body design Saref for rand color, color gray. It's attic All right. Title and the headline look great together, but they are centered in the card, which is not exactly what we want. So go to the first vertical stack and added to the following modifiers These thank alignment leading spacing. Zero. It's definitely better now. Next, we are going to create a newly at for their recipes. Star ratings and her image sees them. Name, star feel formed body for grand color color Yellow. Nice. We have just created a yellow star. Now we need to embed it into a new horizontal stack and repeat the stars as many times as the actual avocado recipe has got raided in the data. Accordingly, enter alignment center spacing. Five Forage. One recipe rating. I D said underscore. In are 40. Troop is working like a charm, all right. Our last ask is to create a malformed Cooking Information section for the avocado recipe in the card. The content contains the following serves preparation and cooking time. That's a job into the court and create a new horizontal A stack ages Thick alignment. Send her spacing formed food, not foreground color. Color gray. After this, we are going to design the first part of the section ages. Thick alignment. Send her spacing to image system. Name. Person to text Serves recipe service. When we have done video it. Copy and paste the spark to times. All we need is to replace the content in the second and the third sections. Image clock. Thanks, Prep. I go on preparation, then a ridge flim Thanks. Cool kink I call cooking as we finish the layout design. Therefore, are very last task historians that all of the recipe cards into the content. You open the content you file and create a new variable for the recipe cards. Far recipes, recipe recipes that called the recipes letter in the preview as well. Then create a new title in the comment for this section. Mark S. A. V cards text. Avocado Recipes for Weight Board 20 Fire title Modifier. Next, That's insert all of the recipe cards into a new vertical container, using their for each group. These thank alignment Send her spacing. 20 frame max feed 640 Bad ink. Horizontal forage recipes Item in recipe guard. You s a P I, um the maximize the feet off the recipe card by 640 points because off the vied I bet screen definitely centering them look much better other than make their cards stretch out edge to edge. Just try it out. As usual, it can run the life review in the campus where a quick test. But at the end of this lecture, we are going to a bill around our avocado recipes up in the simulator. After launching the AB scroll down to the recipes cards, you should find all of the recipes inside in the content you, which means our court works without any problems. In the next lecture, they create a detailed view off the recipes. I learn how to present them in a sheet. It's 50. Why 13. Let's Create the Avocado Recipe Detail View in Xcode: in this lecture, we are going to create a detailed Julie out for the avocado recipes. But before we start coding, let's participate in a short exercise. I show you both the godly out and the detail layout design beside each other, and I ask you to find those parts in both Lee else, which contains multiple elements. Yet they are identical to each other. Bose the lecture and start again, and you find at least two identical sections in the ABS Screenshots. Are you done? Nice work. You may figure out that the recipe rating with the Yellow Stars and the cooking information have got identical content. Having said that, we should perhaps separate each one off them as individual Riyadh components in a brand new view and reuse them in the card view and the details of you. With this best practice, we can avoid court application, and we can maintain our code with these. So let's separate this liberating from the card view, Open the avocado recipe guard view file and navigate to the rating section, then select the rating called Block and cut it to the clipboard without the comments part. Next, let's create a noose 50 y file in the View folder, and they mates, too. Recipe rating View. After that, create a new common section for the properties below. The comment. Create a new variable for the recipes that VAR s a V recipe. Our preview is broken again. I'm sure that you have got used to it already, so let's fix it. Recipe recipes that zero. Then add a specific size to the review in though. Preview Lee out Hicks The Kids 320 Height. 60 Besides the preview window toe, 100% if necessary, Then go to the text you and they lead it after that based the rating view from their clipboard. There we can in a open a recipe card, you again enter the following coat and the rating. Comment. Recipe rating view s A V recipe. Guess what? We have just inserted R rating component inside the card view. Now we are going to repeat this process in the cooking information, select the court, block off the cooking information, then cut it out. Two deadly board yet again. Create a new switch to I file in the view group and they made to S O B Cooking view now create a new comment for the properties and a new liable for the recipes that var s a P recipe. Same thing with the broken preview give to it the missing Argument recipe. A city that zero finally let the preview LIAT be fixed size by 320 Boyens wide and 60 points stole. Nice job. Our prep work is done, so let's a jump into the actual court. Replace the text you with the cooking information By pasting this cold block from the clipboard. You should see all of the information about the given recipe in the preview. Open the card view again and navigate to the cooking comment. Then dessert our new component into their blessed be cooking view. SFP recipe Congratulations. You have just created two new components and reused in the garden view. Let's test our app in the Life Review and watch better. Our code is working or isn't shall be. It works like a charm. We can now start coding that detail view for the avocado recipes. Firstly, let's greet a new swift do I file and they made to recipe detail view, then create a new comment for the properties and the new variable for the recipes. Better far Recipe recipe after that, is that the missing argument into the preview? S. O. P. Recipes that zero replace the text with a new image of you image recipe image. A very sizable scared to fit, then embedded into a new vertical stack. Next, we need to make poverty. Gas Stackley out, scroll able, then at the edges, ignoring safe area top modifier to the scroll of you. Finally refine it by entering vertical alignment. Shows indicators. Force now vivia build out the layout off the rest of the content. Let's create a new group and enter the following comments inside it. Guy toe ratings, cooking ingredients instructions. Finish this part by adding some bedding to the group. Elements inside it in general. Editing horizontal 24 Bedding. Where to call. Then let's start with the title. Enter next s a V title. I want cease them large title design. Saref won't wait. Boyd, multiply in text alignment. Send their for grand color, color, color, green, adaptive, bad ink, dope, then, all right. I think that we forgot toe had some alignments to our top of the stack, So let's fix it quickly now. Alignment Center spacing. Zero. Nice. Jump back to the ratings. I better that you really enjoy how easily we can. Is there the rating component inside here? Done. You see, but about the cooking information. He's a busy Mississippi cooking view recipe recipe. I'm sure that the rest of the layer designed won't cause any problem for you. Ingredients Title. Text ingredients I want to aid board with the fire title modifier. Our custom diagram modifier have thus to speed up the process for the actual ingredients. Maybe will use a combination off to re stack Onda Loop inside them three days. These tax. We can manage the spacing between each row and make sure that they are equal. Later on. The course you'll learn have to use least views toe. Achieve almost the same result. These thank alignment. Leading spacing five Forage recipe ingredients, I D said. I've them in these thank alignment. Leading spacing five. After stacking. Is that the content inside this block? Text I them formed food note. Multi line text alignment. Leading divider. Now we are going to fetch the cooking instructions and create a nicely at for it that start with the instructions Title. Next, These actions Foreign trade Boyd Modifier Title modifier. It wasn't so hard, is it? Continue with the actual content. And, uh, for each recipe, these three lectures i d. Self ID them in these thick alignment center spacing. Five. Text. I, um Lying limit Neil Multi line text alignment Center formed system Body design Saref. Free him Minimum height. 100 Inside the for each loop. Reuse obvious lacto Rub the chef room symbol following it by a text You. By the end of this course, you relearn how toe Imagine, then called the layout without using the preview. The detailed view off the avocado recipe is almost done. Only one thing is missing. The close button. Let's test our code in the life preview. Let's create it inside a new overlay modifier. Enter the following quote under the edges, ignoring safe area overlay inside it. Enter Matin action Comment. Able image since them. Name Chevron Down Circle Feel formed title for grand color. Color pink. We use a nice pink color temporarily. Why was issuing the same board and that the button into a New Age stack and greet a new spacer about it. Ages thick spacer. Alright, our symbol is on the right now. Push it to the top two, embed the bottle into a new re stack and create a new spacer below the button. He's thick space. Her finally. Now we just need some bedding, I think. Trey Link. 20 Bedding Job. 24. After that, please don't forget to change the color off the bottom from Brink Toe white for grand color color wide shadow radios. Four. I think that some fine any measures could help us to make our design more interesting. That's great. A new, viable and stayed for the bottom state private of our bullets hit ButI and for us. Then start the animation and the main view is loaded by using the own appear modifier on a pier. Said was it Togo now reveal define but part off the battles design. We want to be gentle pres ated at this modifiers to the battle opposite E said. Was it one 0.6 scale effect. Seven police said 1.2 0.8 and core Center, a new Asian animation easy an out duration 1.5 repeat forever, although reverses. True as you can see, we are animating the opacity and the scale off the battle in 1.5 seconds. Moreover, they make this animation to repeat forever back and forth. Obviously, we need to test it in the Life Review. So let's do it. All of the content is there, and the button appears on the top, right side off the device. I'm sure that you can appreciate the beauty off this new, the clarity of design using 50. Why in this section off the safety I master cast course, we are really mastering the scrolling views with a combination off the horizontal and vertical stacks together. See you on the next lecture. 14. How to Present a New View with using SwiftUI Sheets: There are only two objectives in this lecture. The 1st 1 is to create new haptic feedback when I user taps on the avocado recipe cards, the 2nd 1 is to present the recipe detail views using model sheets by tapping on the cards . Open the recipe guard you. Then let's create a new variable for the haptics you are have taken backed a course you I impact. He'd back generator style heavy. Go to the end off the vertical stack view and add a new modifier to it. Owned up. Gesture self have take impact. Em backed a cured. Let's continue with the swift who I should presentation mode. Go back to the properties and create a new condition. State. I stayed private. You are show model bullion for us. By default. The sheet is not presented. Then jump back to the on top gesture modifier and entity scored to it. Seven. Show model. True, this means that I user taps on the card. We want to present the detail view. So let's create our first street with this new modifier in Swift you, I, she'd is presented self sure more than recipe. Tell you, recipe said Mississippi. All right, it's timeto test the up in the preview window, open the ad view file and start the life review. There is no problem to present the data views in the preview using the sheet presentation. It's 50. Why? By pulling down the sheet from the top to the bottom, you can dismiss the detail of you. Unfortunately, we can test the haptic feedback only on a really iPhone device. You might notice, however, when you top on the close button that nothing happens. We need to program this feature manually. But don't worry. It's only a couple lines off court. First time for most. Open the recipe detail you fire. Then we need to create a new environment variable for the presentation. Binding environment presentation, more bar presentation mode. Then find the butter section and insert discord into it, said presentation mode reference value. This miss the addition off. Rapid value in here is required because presentation mode is actually a binding, so it can be updated automatically by the system anyway. With that button in place, you should now find we can hide the sheet using bottom processes. So let's vested in the life review the battle now works as it expected, the only need to build and run the application on a real device or in the simulator. You can lounge the AB and play view their cards by tapping on one off the cars. We trigger haptic feedback and presents the detail You using a mother shit finally, by pulling down the actual sheet or tapping on the close button began. This means their model in though it's quite fascinating, is indeed we have just learned another new metal off Have to present content with Swifty. Why? 15. Let's Design the Avocado Ripening View with SwiftUI in Xcode: in this lecture, we are going to create a layout for the individual stage of the avocado ripening during the process of designing it. Leave you use where Take us tax intensively. Without further ado, select the View folder in the Project Navigator and create a new Swifty y file name. It's to ripening view and save it. After that, replaced that default. Text you with a new image you with the following modifiers Image Avocado ripening one re sizable frame If it 100 hide 100 alignment Center Claim shape Circle Z Index one z index Specify exactly how views should be leered inside of you. Then embed this image you into a new Z stack. These tech just ignoring safe area oil. After that create the new were too ghastly below the image of you. These back alignment center spacing, then inside the stack. And there's some comments for the separate section off the content stage guides will description rightness, instruction this thought with the stage off the avocado ripening these thick alignment center spacing zero Thanks One Thanks Stage Then we continue with that title text hard Did the X scrip sh in content is the next one Text fresh off the tree. The avocado is very hard with no give. After that, the ripeness comes. Text five plus days. Finally, we finish with the instruction content text called avocados at room temperature until they are fully arrived. As you can see, all of the content use are visibly in the preview. So all the natives to make this layout life with some exciting styling. With Swifty Why let's at these specific modifiers to the vertical stack Z index zero. Would you lie in text? The line meant center bad ink. Horizontal frame if it's 260 hide 485 Alignment center Background. Linear created ent. Radiant, radiant colors Color color Green light color color green medium start point stop. Endpoint bottom Coronary views 20. Nice. Our design is improved a little bit that we need to work on each section off the content. Go to the stages section and enter these modifiers to it for grand color, color, color, green, medium, then toe The first text you formed. Cease them Large KaisAl Design Saref Foreign Trade Board next to the second Do you formed? Sees them. Body design Sedative won't wait heavy Now let's give a nice design for the title of you formed. See Eastham title design, sir, if 1 to 8, but for grand color, color color green medium that dink Vertical 12 Bad ink Horizontal zero frame of it. 220 A light Grady and background were pop up from the rest of the view. Background. Grounded a rectangle corner Radios to have feel linear ingredient. Creating ent ingredient colors. Color. White color color Green light start point Top Endpoint Batam Shadow color Keller Color. Black Transparent Light Radios six x zero Why six. Our next task is to read these free modifiers to the description. Four. Grand color color Teller Green Dark Foreign Trade Boy line Limit Neil. It wasn't so hard, was it? The avocado ripeness is our next are Get four grand color color white formed system. Call out design Saref form to wait Board Shadow Ray The use free bad ink. Where to go Bedding Horizontal zero. Frame the kids 185 again The background ship. You'll make a huge difference on this design, so pay attention to it. The grand around, a director and go coordinator radios to have feel linear ingredient. Grady, Aunt Grady. Ent Colors Color color degree in medium Keller Color green Dark starting point stop and point. Batam Shadow Color color Carol Black Transparent light radios six x zero. Why six? Finally, we need to give us some love to the instruction of you as well formed. Food Note. Four grand color, color color Green light 1 to 8. Boy lying limit three. Free him read 160. The design has been improved by a lot, but sometimes only the small leaders make it really great. In this case, we need some empty space between age section in order to let it shine. Enter space, sir. Then go to the description and attached to new spacers. Toe the text, you spacer spacer. Not bad. Now we need to create some space to the top imagery you because this imagery a slide in from the top above the content You go to the stage, re stack and enter bad ink Dope 65 frame. It's 180. Great. Now at this offset modifier Today image offset. Why 55? We are almost done with the design. Just one more thing And these two new backgrounds to the image above the offset modifier. Background Circle I feel Cut her color green light free him. Great 100. Done. Hide 110 Alignment Center by Grant Circle I feel color color appearance. Adaptive frame Read 120 Hide 120 Alignment Center. This technique would be family air to you since we used it for designing the avocado factually out with it. Already Last goal is to give a sliding animation toe the image, so let's create a new state property for the animation mark Properties At ST Private, you are sliding animation bullion force. Then the jump to the end off the main V's thank you and enter one year that form self sliding animation. Toga. Finally, we just need to animate the white position off the image you with the following modifiers. Animation animation. Easy an out duration one. Why Sliding animation Question Mark 55 Colon minus 55. It's done all right now let's there's the animation in The Life Review a couple times Perfect. In the next lecture reveal, insert the avocado ripening view into the up and repeated accordingly to its stages. 16. Let's present all of the stages of the Avocado ripening with SwiftUI: in this exercise, we are going to fetch data or the stage is off the avocado ripening. Since you are already know how to load static that of its 50. Why, therefore, this will be a short lecture, I promise you select the mood of water in the Project Navigator and create a regular swift file. Then they meet toe ripening model and save it. That's important. It's 50 wife Limburg after that and the a new common section for the model. Next, let's create the actual instruct for the ripening model. Obstruct Right Burning Identifiable bar I d you you i d. You are image string. They are stage spring bar title string bar description, string bar ripeness, spring bar instruction string. Nice work. Now let's create the static that a file for the ripening stages this time Select that off order and create another new swift file ripening that your baits them save it when you are done, that's in Borders. 50 Wife Framework after that, and there's a new command line for the other section. Next, let's create an empty array for the content. Let ripening that ripening as usual, Open the resource is folder on the desktop and navigate to the folder. Inside it. Open their happening that a text file and select the four text inside it, then copy to directly board and close the windows. Go back to the ripening that a swift file in X scored and paints the content from the pre board into the anti array. All right, after this prep work, we can finally start to fetch is that into her up? They started their ripening view. Firstly, we are going to replace the place, hold their content inside of you. But before that, let's create a new variable for the data. Far ripening, ripening. Then the Lord. The second stage off the avocado, ripening inside the preview ripening, ripening that one now navigate to the image of you and replace the placeholder image ripening image. Continue this. Read the stages number ripening stage after that jumped to the title ripening title. The description is our next target, but I binning description. Then I replace the heart corded ripeness, the string ripening right Penis upper case. Last but not least, Vegeta instructions, content, ripening instruction. Great job as usual are finally dusk is through. Present all of the stages off the avocado ripening into a horizontal scroll of you under the exist. Think that menu open the ripening stages, you swift. Two I file and enter Mark Properties Bar ripening stages, right putting ripening that, then the road. The data in do the review as well ripening stages, ripening that it's time to present their ripening stages. After letting the text you enter this whole chunk off courts replacing it. Scroll view Horizontal shows indicators for us, eh? Just ignoring Save our rail. Oh, then these thick ages Thick alignment center spacing 25 for each ripening stages. I am in a but I putting view right burning item. You learned nothing new this time, just practicing, But you have already learned from the previous lectures. Finally, at some spacing, embedding toe this layout spacer, spacer, petting, vertical bedding, horizontal 25 It's them. Let's play the the horizontal scrolling in the Life Review. We should definitely beard around, are in a real device or in the simulator to you see, Don't forget to test the app in dark mood as well, since we made it comfortable with both presentation would How cool is it? We have just successfully managed to present all of the stages off the avocado ripening, using a horizontal scrolling view. As we approaching the end of this section off the course, I am pretty sure that you know what's going on and have to use the 40 troop in horizontal or vertical stack. See you at the class. 17. How to Build a Basic Form UI for iOS with SwiftUI: swift you. I gives us a fantastic tool for building forms collections off a user input controls designed together information such as on the order form or a setting screen. Even better safety. Why forms automatically adopt the appearance and behavior change so they work better alongside other oppa logic. In this lecture, we are going to create a basic form. Design it a user in direction just to get a quick look at have to start building forms. It's with you. I open the said things you file. Then replace the placeholder content toe. Arvo Can does make the string uppercase. Then add these modifiers to the text you phoned. Sees them. Title designer. Sorry. Foreign Trade Board for grand color, color, color green and active. All right now embedded attacks to you into a new V stack These think alignment center spacing. Five. I think we are going to stack the text. It's a new image. Those used together are the heather off the form image avocado. Criticize her Bora scared to fit Bad thing. Top free him. I didn't 100 hide 100 and I'm and center shadow can our can our color Black, transparent light radios Aid eggs zero. Why for after finishing with Heather design, if you create a new were to cast stack as a rubber off all of the views on the screen. These think alignment center spacing zero cream max with 614 points. Then Mark had there. It's time for building the actual form of its 50 y former, then the Let's create a new section for it. Mark section number one section had there text, Genero said. Things now we are going to is, er the new duggar in this section. So I go. Thanks enable notification. Our God is broken now because we need to start the state off the Tuggle in order to make its functionality to work properly. So let's create a new state for the notification. Sad things Mark Properties at ST Private Bar enabled notification bullion. True, that means that this thought girl is owned by the fort. After that, we have toe bound the duggar to the value off. Enable notification property he's on enable notification that wasn't so hard, was it? Let's create a new property for the second Stargher. I stayed private far the grand refresh bullion force go back to their form and enter Togo is on the ground. Refresh. Thanks. My grand re fresh under the first section, we are going to create another one for the static content. Just some basic information about the application mark Section number two section had there next application. Now, if you create a new horizontal stack with to text views and a spacer inside it, it will be functioning like a row in a list. Ages thick. Next product for grand color color gray space. Her next Avocado recipes. As you can see, it works perfectly now. Select the whole age stack and based. This broke off cold five times under it. All we need is to replace the content off the text. You compatibility iPhone and I bet developer John Jane Designer Robert Petrus Website. Swifty Why masterclass dot com Version 1.0 point zero Our settings form is almost done, but it still doesn't do anything. What about to give a small functionality for the first angle, select the last five age sex and cut to the clipboard. Now, then command class. Click on the first page stack and create a new conditional function. We are going toe bind the value off the toggle as a true or force condition enable notification. After that, pays the age stacks frantically board in today. If statement when the dog who switched off state, then vivia present a new content and hide in four of the ages. Thick text based on a message. Four grand color color gray space. Her text. Happy coding. Nothing serious here. Just the kind of Easter Rex By learning something useful dealing with forms. It's 50 why they have just finished the development off this avocado recipe app. How cool is that? It's time to see the setting swarming action in the Life Review. Turn on and off the toggle button to see how swift you I shows and hides automatically the second section off their form it ability in animation. All right, that's there's the app on her, your device or in the simulator. I hope that you enjoyed these gentle introduction to the swift You I forms played their own in this course. If you create much more complex forms like order forms and other settings, forms with real life functionalities on dear, then that's baby, the top navigation bar or the horizontal scrolling views you can't upon the recipe cards and see how the detailed view off the avocado recipe shows up in a new model. In, though, I would strongly recommend you to build and launch the app on on my bed as well. You really notice that these I us up works like a charm on the bigger screens as well. At the end of this section, I would like to thank you for your hard work. Hopefully you're still have cording with Swift. You I and you are eager to start to build the next app with me in the next section. Until then, happy coding.