SwiftUI Quick Start Guide with iOS 13 and Xcode 11 | DevTechie Interactive | Skillshare

SwiftUI Quick Start Guide with iOS 13 and Xcode 11

DevTechie Interactive, Learn new everyday

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
93 Lessons (14h 21m)
    • 1. Newly updated: Introduction

    • 2. New: some View Explained

    • 3. New: Containers in SwiftUI

    • 4. New: TextView

    • 5. New: Images

    • 6. New: Shapes

    • 7. New: Color as View

    • 8. New: VStack in Detail

    • 9. New: HStack in Depth

    • 10. New: ZStack in depth

    • 11. New: SwiftUI Text In Depth

    • 12. New: SF Symbols and Images

    • 13. New: SwiftUI Image in Depth Look

    • 14. New: SwiftUI Buttons In Depth

    • 15. New: DatePicker in detail

    • 16. New: Spacers in Depth

    • 17. New: SwiftUI Forms

    • 18. New: SwiftUI Static List

    • 19. New: Dynamic List

    • 20. New: List with Custom Cell

    • 21. New: Delete from List

    • 22. New: Moving Items in List

    • 23. New: Grouped List View

    • 24. New: Navigation View

    • 25. New: Navigation Link

    • 26. New: Geometry Reader

    • 27. New: Picker Control

    • 28. New: Multi Component Picker

    • 29. New: TextField and SecureField in SwiftUI

    • 30. New: Slider Control in SwiftUI

    • 31. New: Shapes and their styles in SwiftUI

    • 32. New: Activity Ring Like Progress Bar in SwiftUI

    • 33. New: Stepper in SwiftUI

    • 34. New: Basic TabView

    • 35. New: Advanced TabView with Image Trim, Groups, Divider

    • 36. New: Build CustomUI in SwiftUI by Combining Views

    • 37. New: Fast Action Button or Floating Action Button in SwiftUI

    • 38. New: Underline TextField - Custom Reusable Control

    • 39. New: Custom Control Clearable TextField

    • 40. New: Custom Control Password Toggle SecureField

    • 41. New: Image Processing in SwiftUI

    • 42. New: Understanding @State in SwiftUI

    • 43. New: Advanced Search using State Property Wrapper

    • 44. New: Understanding @Binding With Example

    • 45. New: Binding Child to Propagate Changes to Parent

    • 46. New: Move View Up When Keyboard opens up

    • 47. New: TapGesture

    • 48. New: LongPress Gesture

    • 49. New: Simple Drag Gesture

    • 50. New: Calculate Drag Gesture Speed

    • 51. New: Drag Gesture with GestureState

    • 52. New: Retaining Drag Gesture View State

    • 53. Intro to SwiftUI

    • 54. Xcode 11 Introduction

    • 55. SwiftUI Text

    • 56. Some More Text

    • 57. Text and Other Modifiers

    • 58. Text Field in SwiftUI

    • 59. Secure TextField in SwiftUI

    • 60. Fonts in SwiftUI

    • 61. Images in SwiftUI

    • 62. TabbedView in SwiftUI

    • 63. Button in SwiftUI

    • 64. Lists

    • 65. Navigation Button

    • 66. Toggle Component

    • 67. Date Formatter

    • 68. Gradients

    • 69. Shapes Modifiers

    • 70. Image and Shape Modifiers for Background View

    • 71. Stacks

    • 72. Size Classes

    • 73. Courses App Demo

    • 74. Course Data Structure

    • 75. Course Cell View

    • 76. Course Detail View

    • 77. Alerts and ActionSheets

    • 78. Animation in SwiftUI

    • 79. Animation Duration, Sprint Animation and Damping

    • 80. Custom Animation Block

    • 81. New: SwiftUI News App_ Intro

    • 82. New: SwiftUI News App Project Creation

    • 83. New: SwiftUI News App Model Creation

    • 84. New: SwiftUI News App Network Layer

    • 85. New: SwiftUI News App View Models

    • 86. New: SwiftUI News App News Header View

    • 87. New: SwiftUI News App News Home View

    • 88. New: SwiftUI News App News Header View Web View

    • 89. New: Coin Tracker Intro

    • 90. New: Coin Tracker Folder Structure

    • 91. New: Coin Tracker Coin Service

    • 92. New: Coin Tracker View Models

    • 93. New: Coin Tracker Views


About This Class

Get started with declarative programming with SwiftUI in iOS 13 and Xcode 11

In WWDC19 Apple introduced SwiftUI, which uses a declarative syntax to create user interfaces and enables powerful new visual design tools in Xcode.

SwiftUI is described as "a new framework built from the ground up to take advantage of everything that Swift had to offer".

SwiftUI is a huge deal. Instead of building a user interface in code with Apple's UIKit framework, you describe it with declarative statements, adding modifiers to customize the way they are rendered on the screen. This includes animations and other visual effects.

A declarative framework is not only quicker to code, but also works naturally with visual builders. Xcode 11 includes design tools for constructing a SwiftUI user interface with drag-and-drop, using Inspectors to set properties. A preview shows what your application will look like, and you can also push the preview instantly to an iPhone or other device for testing there.

SwiftUI works across all Apple platforms, WatchOS, iOS, iPadOS (newly announced for iPad), MacOS and TVOS.

In this course, we will explore all there is available to know about SwiftUI.


1. Newly updated: Introduction: hello and welcome to this new course on 50. Why, in this course we will recovering Not only what 50 are is, but we're also looking at how individual components put together makes a U I. That works with 50 y. Okay, so this year in www D. C. 19 or www D. C. 2019 Apple amount something that got the biggest year from developer community across the board, it's called 50 y all Those 50 is still very new and going to numerous changes. It has already shaped the way absolutely be written for Apple platform. So if you I if something isn't having to do something called decorative you I now the traditional programming languages when you would create an element, he says it says abused like color, shape and other attributes that will still be tied to the component. Now, in declarative programming, all your all your declare is what your element needs. And then you use modifiers to change the way they look and pace. Alright, so 50 is, uh, has some basic principles. So therefore, principal stepsister, I actually, uh, sort of by like, you know, when you when you actually talk about 50 why and what are the basic building blocks? Uh, that's 50. I actually looks about so 50 I is declarative. Additionally, developers focus on how to create you I and how to create ui elements and prevent amount of both away from that instead of focusing on what to display on the screen. What you focus on is basically how your U I is built using different components that can work across Apple's into ecosystem. That includes your Iowa. I found a way Mac OS watching less or TV or is automatic meaning things like accessibility , localization, dynamic types, dark more. It's automatically supported in the written code that you right from day one 50. I is compensation based. And because the U I is so simple in this competition based, it's just a collection of original elements. I follow this principles of composition. There a very little container can become little containers can be combined together to create this rich user interface. It works just like a Lego blocks 50. I is consistent across the board. It focuses on view compensation functionality, data, different approach. If you If your data changes, then you, uh, that data change drive the change in your view. And this experience does not differ. Like, you know, from the building blocks that we just talked about, like Lego blocks or building blocks for the 50 y, And after that, you built are gonna be very decoupled, and it's not going to be It's not. It's just gonna be a cluster of components coming together to build that amazing unique you I that you're trying to present for end built for your customer. Okay, so with that, uh, let's take, uh, quick preview of, like, what? 52 looks like. So this is one of the lecture that you're gonna be looking at. And, uh, I want to show you a quick review and this introductions saying, like how easy? So if you I am so basically create some component. So that's to be staffing here. It's a It's a component on the phone. It can live by myself. I can be used along with other components. So compositions, then he has text. This is how you create your label. And when you create a label and you can use these custom properties called modifiers to actually change the way your view behaves or the way your view looks okay. It's more look, And then then you have data their own. A person actually comes with combined that actually drives the behavior a data driven approach. Then you have these colors and stuff and these overlaid images and, uh, properties like, you know, making this recyclable or make them aspect ratio. So they fit to the screen according to the aspect ratio defined their frame. And all this, if you look at, is much more readable than what you like it. Or, uh the other, other way of apple saying, uh, storyboard way of building the abscess. And then the one of the most amazing thing is you can combine these, uh, modifies 11 after the other and they built on the top of each other. Okay, so that's the amazing part of 50. Why? Where every single component, although, is so decoupled. Then they come together. They can choose something like, you know, this complex. You I like you know, if you are to make this you I how, like, you know, you would have to like, you know, could you like, you know, within these, uh, however many like 30 30 some uh, lines of code. That's not possible on three boards. So that's the wonder that's 50 Bill breaks into the world. Okay, so in that, I was like, You know anything else. So, uh, starting from the next video, we're gonna start looking into how these components are designed. And, uh, basically, how these components up put together to print this amazing experience to you. Okay. So, uh, join me in this course, and, uh, we will work through all these challenges to understand and learn 50 ui in depth together. Thank you very much for watching, and I will see you guys inside the goals. 2. New: some View Explained: Hello and welcome back. And, uh, what our then? Basically, it has simply, uh, gone ahead and created a project, uh, for 50. Why? So, uh, all I have them simply, uh, took the single the app, and, uh, click next. Provided the product name and make sure that for the user interface, I, uh, have selected 50 i. So if you have developed 50 I in past, um, like, you know, I mean, for the past project selections the same, uh, so I created, like, you know, other projects. So that's why my selection stayed. The guy changes to storyboard That's actually the new controller way of doing things. Uh, you like it and stuff. And, uh, then 50 basically the new declarative males developing you are. So Yeah, make sure you have this, uh, selected I and then you can just, uh, proceed like, you know, uh, just like a regular development, Uh, for the I. R s and, uh, finished is to create a project. Okay, so I'm gonna click, and, uh, Let's, uh, once you're done, you're gonna land on this screen right here, And, uh, basically, before we start, uh, looking into, like, you know, developing our screens. Let's, um, or like to come into into the components. That sounds about, like, some of the basic things. So, uh, when whenever you create a swift, you I, uh, project, uh, this, uh it's a template that you get by the party, get content you and inside the content, You basically get a body. Now, if you notice the content you actually in headed or extent, uh, from the view or implement this to you now, um, what is that? So we used the incest You I are basically struck first and foremost. Okay? And they conform to a protocol called few particles. Okay. And the view protocol expect to have just one, uh, property that needs to be implemented. And this property is called Bonnie property. Okay, that's why we have this war body. Okay, Now, body property has a return type of some view, as you can see here. Okay. Uh, now the keywords some, it's basically, uh, expressive eyes that that type is an open type. Okay. So meaning that compiler does not have to know the exact type that's being returned as long as it knows that its returning anything that conforms to the view protocol. So you're not tying your return value to a specific view. But as long as it actually extends to this protocol view protocol, uh, it's actually fine. So that's that's why snow and and I'll pay, uh, type. Okay. And, uh, that's why most of the time, whenever are, like, you know, pretty much all the time. Whenever you create yourself ti, you're always gonna be returning. Some of you okay for body. Alright, Now, um, excuse me. No, it is that body. Uh, program has body property has no return keyword, Uh, and returned keyword is missing here. Right. And, uh, basically, uh, this is in you change, uh, starting from so five. Got one where the return key word is not required for single expression functions. Okay, see, because it's a single expectation function you're not required to have. He returns from, uh, value. But if you like, you know, and another one. Like, say, for example, if I had another text. Uh, what's gonna happen is, uh, compiler would actually start to, um, complain that this open type it does not have any statement. Uh, now you can fix it to write you can actually simply say, return this text and like, nor the text that you have, but result of this text, the complaint here be anywhere. Well, there's a There's another way to handle it. Uh, if you've used, uh, 50 i before, you know, like, you know, this is the fax and container, uh, containers coming to play. Uh, and we'll talk a little bit, um, as we actually proceed Progress through the coast. Uh, but let's stay focused on on some of the basics, so, uh, body can return only, um, basically does not have any return type. Uh, so because it's returning on the one single expression question. Okay. Now body can return one object, which is of type something. Okay, so if you want more than one view in your u I, then you'll have to actually put the containers. Okay, so that's what we're talking about. Like, you know, having computers in there now. Container, you are the views that contain some other views. Body property can only return on the object. So we returned views that are container type so we can return more than one you wrapped inside a computer. Okay, so that's a lot to take into the South Coast. Break it down. So let's say, if you want to do, like, you know, some of the situation if you wanted to have today. Yeah, next one. And if I copy this and picked, it takes too. Right. So I cannot do that because body property, uh, that falls to the view. Particle can only return one view. It has to conform to that one of you. So what we can do is, uh we can simply say, um, re stack. Okay? And I can actually wrap it. Uh, these two text inside that we now, technically, if you look at their returning one one actual statement right, one expression functions. So with respect, that's what we're turning. But it doesn't matter what we stacked teams these tax. These tax internal company says that we stack will return, uh, like, you know, some elements contained inside. But for bobby, it's actually satisfied because it's only seeing one one expression function that's being returned. Okay, the hope, uh, that is, uh, that is clear. Now, here, uh, we're using tax, which is a container that can hold more than one view in vertical direction. That's why I respect what he goes back. And, uh, we are using this trailing closure here and inside that trailing closure. We are initializing Harvey. Alright, So you're actually putting the views inside training, closure. Now, there are some other property related to these tax and you're gonna explore each and every aspect of like, you know what those other properties are, Uh, as we progress through the coast, but, uh, for the introduction, Uh, let's go through. So the basic things are really with you. So this is, uh, this is it for this with you in the next video, let's talk about containers. Okay. And, uh, let's talk a bit about containers. What they are what they do and stuff like that. Okay, so I'll see you guys in Mexico. Thank you. 3. New: Containers in SwiftUI: Hello, Mac. And, uh, in this video, we are going to be talking about containers. So, uh, before we start containers, let me, uh, start this, Um, the speed, basically, TV screens. So what's called? Basically, it's Kansas. And, uh, what it does, it basically shows you the preview of what you're developing on the screen. Okay, So as you update, it's gonna actually, uh, update that content here. Code content here. Okay. So, um, let's talk about containers class. So it's a C I and you have, um, you and then you have another thing called modifier. Now, views draw basic basic compliments on the screen and modifiers. The death modifies their properties like they modify the color there. Five and text. Um, like, you know, for example. Okay, Uh, no containers. Another view type, Okay. And they're usually used to organize and composed other. Okay, So what's the containers? Are view times basically usually used to organize and components abuse and their pre types of containers that we, uh, that we have in search, and we're going to take a look at all of them to see how we can organize use in various different ways. Okay, so first testing to look at what it goes back that we looked at briefly in the last video. And basically, uh, what is the stack is there? Things are organized in vertical direction and top to bottom. So, as you can see here, you have, uh, two texts. Uh, there are, uh, fact on the top of each other. So, uh, if you can please, like, you know, two more, uh, you're gonna have three and four. Now, let me give you a quick preview of the modify says Well, so let's say if you order to change the text, uh, insights for this, you can simply say fund and you can say large title. Okay. As you can see, the fault for that particular text has increased and others have made space to basically make that adjustment. Now, this looks very much like you. I respect you. And in some sense, it's it's actually, um, what it is. It's a vertical and horizontal stack. But there's another definition that introduce this call that you're going to look at. So the funds here is basically the modified because it's modifying the current behavior off the view. You can provide some foreground color. So basically four color is the cover of the text itself. So I can say my text, uh, color used to be blue and you can have a background color by go back to college and if you notice back on, is not a color, but it is just the background. And that takes a view so and so few I for background. You can not only use your color, but you can use any kind of view and build this complex component inside that. Alright, So let me change that color to white because blue, uh, inside. Now let's say if you want to add one more modifier where you want to have, like a little bit of panic here and there, you can actually say padding and they'll add some batting. Okay, Advocacy. You're working on one text, and it's actually changing the behavior of that text. How it looks like using these modifiers. So that's what modifiers are. Now let's take this example and turn it into H stack. So, for example, horizontal is their views are organized horizontally next to each other, as you can see here. So you have all the views laid out in the hold on. Right? So that's your whole stack. And, uh, then you have these back. That's your death stack R z the direction basically the depth. Um um, stack. Right. So, uh, what these tax is, actually, it's tax items on the top of each other. Okay, so the way the best way to see um basically these other elements is to add some modified from those two and increase the pattern. Are you going to create this effect where we're gonna increase the batting? 2 40 50 16 and under, but and bye. Okay, as you can see, because our thanks, that's actually the biggest inside biggest batting inside, just on the top. Everything else is hidden underneath. Okay, so, uh, if you mortified. So the reason I want to show you I wanted to be like, you know how these elements on the top of it. So let's reverse this so we can say 10. Or do you want to show the text? One first, 40 30. Try to. Okay. And you can see you have created the fact there All the other texts are now moved behind. And the biggest one, the one that has white, and, uh, the range is actually out here. Now, you don't see the text because Texas actually centered. And, um, that's why you don't see it, But but it actually eventually gives you an idea how these container works to build a complex layout that get government your views into Okay, so, uh, this is it, uh, for this video, for about, like, you know, about the containers. Uh, like I said, are we gonna start exploring all these, uh, little bit more. But, uh, in the next year, let's talk about, uh, text a bit. Let's take a look at some more properties about the text and, uh, how we actually apply different kind of modifies on the Texas. Okay, so I'll see you next. Thank you. 4. New: TextView: Hello and welcome back. And, uh, industry, Let's take a look at some of the other properties about. Okay, take one. Thanks to you and modify, uh, by ending somewhere quantifies into it. Okay, So, uh, I have this, uh, we set, and I have this text to you wrapped inside the back. Now, let's go ahead and change the front at the already know how to change the front applied here, and, um, we can apply some programs color, so I'm gonna give it a forgotten cover as white. Okay, Now, you don't see where the text so have some pending before we actually give it a background. So I'm gonna give a back on now. And you got to say, Hey, just back on it. Used to be color dot There you go. Now, let's say if you want this, um, this, uh, with to go into and what he can do, we can provide a frame, property or frame modifier and frame. If you look at it takes a few of the overload. It takes either just just like the frame or you can with height alignment. You can have a 1,000,000 idea that Max Max wit Um um Okay. The main idea with maximum main hike, ideal height, max height and alignment. Okay. So you can take, like, you know, this that you noted. Most of these are all of these are actually actual. So what we can do is you can just say we are interested in Max, okay? And then you have it up. We have an option to actually provide you with, or you can actually take advantage of, um, the new, uh, float value that infinity. So basically in details, like, you know, there's a positive infinity that that's gonna go into it on the screen and, as you can see, create this effect of having a band running across screen, it doesn't matter. Like what size and form factor your devices, it's gonna run and to end for that, and then you add your background on the top of it. So basically, it gives you the background. Now, let me show you what happens if you actually have back on first and then the frame. So what happens is basically your background. Thanks. Effects. And then your frame takes effect. Uh, later. Uh, now, as you can see, this this white is there. The frame is actually going into end, uh, infinity directions. But you don't see that effect because your back's all has been applied before. The free money far was applied. So order in which your modified supplied is important for you to remember which modifiers needs to come first before you actually apply the other modified to achieve kind of look and feel. Okay, Now, let's go ahead and proceed. Uh, let's have a fund that's actually, um, let's actually that you can define so title lifestyle and stuff like that are good. You have, like, all these options allow we have to call out. You have You can have a lot of title, like, you know, they are fun. But what if you want to provide a phone sign? Right. So what he can do is you can say system and sister actually take certain property system. Takes a style. The style is there, and, uh, it takes size base next time and design, and it takes, uh, basically sign. Wait, uh, inside all of them. Okay. What we're interested in is side, so we're gonna take the side. We say we want this text to be 30 points. Okay, And very good. We have 30.5 for this tax. Now, if you wanna make this, um, basically, um, it sounds like, you know, slanted a bit. You can actually just add another modifier and just select the talek. And then we have the Italian equation of our text. You available to us? Okay. Now, uh, you can have done for my pendings talked about, um, Dallas. Anything and, uh, he can have. So the other things, for example, can have distracted. Perfect. So, as you can see, these modifiers are very powerful. And, uh uh, just by adding one or two of these modifiers, you'll see a result that was actually a little bit like, you know, more involved during that. Sorry more approach or the approach there your new like it is involved, right? So that's what's the fu I actually bring to you, giving you these components that it can actually kind of like a Lego blocks that he can merge together to build. I'm let your creativity out. So it's like, less involved in terms of like, you know what? Your building, but you can actually build something using those Lego blocks now, Uh, let's say like, you know, uh, what you have done. The text you have modified provided, uh, provided, like, you know, with the modified at the background color or background image or anything like that using the WiFi if I mentioned, uh, takes of you and reason that modify it does not verify Uh, the reason that takes like a view is because it does not modifier. It does not modify the view itself, but actually, as in new layer, just like seeing there used to be added in the EU, I view. And basically that's new. Later is there you add these new one fast on your property. So background actually add in this case, a new layer of orange color. And that's what you see as A, as an effect, verified your view. Okay, so the key thing to remember that order of the modifier matters and you can add padding or back on before and after and see, like you know which experienced you're speaking. You can apply, modify from the top level basically and move a modifier for the sample. Let's see between we can take. So let's see if I take this and remove the 15 from here and if I had another text. Bye. Um, hello, baby. And I can apply a modified at the parent level, and it's actually gonna be applied on the entire child. Um, so basically, I can apply it on the container here, and it's actually the site for both these tax child views for this attack. Okay, so that's that's another thing, uh, that that you can actually do. Okay. Now, you can still override, like, individual views of the, um, individual new funds or modify, like, you know, individual views, properties using internal modifies. So, for example, if I want to say I don't want 4 30 I wanted to be last title. Uh, I can do like that. Or I can say this is it's just a stop heading, so don't apply that 34. So you can do that, too, So you can actually still override inside your, uh, inside your controller to basically achieve the look that you're looking for. Okay, So that was it. A brief intro to text. And I hope you guys interned in the next one. We're going to take a look at you. Make okay the next day. Thank you. 5. New: Images: welcome back. And, uh, and this is gonna take a look at images. So, with, uh, with the international search this year in, uh, Apple also now, um is basically a new way of creating rector images. And like pre pre created rector commitive based upon San Francisco plant. And what you do, basically, is, uh, you get this app, uh, that has all these symbols installed, right? And you can actually take a look at, like, you know what those phones are. And these phones, depending upon their names, are actually supported within each individual platform. So it comes with a 13. So that's Excuse me. I was 13 for happened and, uh, like, you know, for what? 66 plus. And, uh, I don't remember which version I definitely Washington but not to worry about. And all these versions actually support these images. Uh, just by referencing that name So you can use this to make it So, for example, let's say if you wanted to use this, uh, whether, like sun dot Stop, Phil. Now, what we can do is we can simply create an image plane, and, uh, we can type system name. Okay, we can say, son dot the best dot field. Okay. And as you can see, the image is gonna show up inside of you now. Like I said, it is a vector based image. Okay, so you have various different properties that you can apply so you can create these images with simple name. You can apply text like 45 on these images. Like, for example, you can give them phone, he can get them four guys color, you can give them batting, and you can give them your background color. And as you can see, you have your image that's fine. Available to you. Okay, so that's what, um, as a symbol provides. Now, um, there is basically a way where this isn't the only way to create images. Basically, you can have your images created using the old fashioned way where you have, like, you know, an asset available, and then you take that asset and, uh, basically building around it. So, for example, if I move this, they're picking interactive image, uh, inside. And, uh uh, we name it, uh, at Lolo. So let's go ahead and have that one. So I'm gonna say and just say local. Here we are rendering. What you got to know this is gonna have an image. Oh, um, certain five. Okay. Alright. Here. So are taking place is showing as as much as I can get so to the full size. Now, if you want to basically apply some reciting to this image again, simply adding modifiers besides, okay? And then we could provide an aspect for issue to say if it should fit Awesome. The available space. Okay, uh, now, along with these, you can actually provide another property like a passive so you can have it capacity, for example. Five. Okay. And, uh, you can provide, for example, he back on. So I would say color dot Read. Got it. Capacity 0.2. You can see there's a place to, uh, sort of like, uh, capacity red color is being applied to your email, and then you can also apply some other background to create this, uh, ways, different effects. So if I take that and I say color dot blue, you play too. Copy that. If I say hello. Okay. Our color looks totally different because the colors are blended. They created three different layers sitting on the top of each other. And those layers are blending their colors together to make this new cover that you can have, like, you know, an overly It's actually, uh, a view that system atop another layer. And you can have a text, for example. So if I can have text here and, um now this text can takes a property, for example, taking interactive, Okay. And, uh, we can give it some, um, other properties. Like I wanted to have fun. You wanted to have forgotten color. Bye. So, as you can see, it looks more or less, uh, like a, uh, like water mode. Right. So there are different effects that you can just use by just by combining different sort of , uh, modify its and different sort of viewed. They're available in your also actually to be used within ti. Uh, this is a brief introduction on like, you know, one of the things you can do from the image from scratch and, uh, how you can use images. 50 our product. So hope you guys like to figure and I think I will see you guys in Mexico. Where are we going? To check out shapes. Next. Okay, so thank you. 6. New: Shapes: Hello and welcome back. And, uh, in this video, we're going to be, uh, looking at shape. Okay, so we're gonna be, uh, creating some basic shapes into 50 u I and, uh, gonna see how it can, uh, make our views look very different from it. So it's native, uh, representation or native presents. Okay, so let's go ahead and get started. I have this, uh, basic, uh, like, you know, back to the basic, uh, text. Hello. World created. And what I'm gonna do is I'm going to you, basically first of all, change the fault for this thing, and, uh, make it large. Thank you. Let's add some padding and confirm or, uh, President, using default if you want to have a few need a choice to basically set bedding for, like, you know any of the direction. For example, you're offended for all sites, which is default. Uh, he just went for bottom. You wanna set it for leading and, um, basically top trailing anything like that. You can help me do that. Sorry. I'm gonna stick to default because I want to actually send it betting all around now. Uh, let's go ahead and give this a full term color to be, uh, white. So you're gonna stop seeing the text for a moment, but it'll come back. That's as a frame. And, uh, we wanted to give it Max with in maxis, we can, uh, choose infirmity. You can create a band going across and then added back on color. Doc. Thank you. Okay. You can give Texas back now, uh, I'm gonna put spacer just to fill the rest of the space, and, uh, and you can see, uh, there's no rest of the face because we forgot to put this inside the container. So let me do that. And, uh, go hands. You can see it's actually moved at the dock, and space is taking all this other space. Well, that's actually good. We that's what we need. Okay, so now let's go ahead and talk to looking into how we can have some shakes at it. Okay? Create another text, and, uh, I'm gonna call this one. Oh, maybe direct. Thank you. Bye. And, uh, we are going to give it from the, uh, some property gonna give it up front the last time. And, uh, before we actually add a whole bunch of things. Um, let me add a back, Okay? And, uh, we're gonna create a shape here and rectangle. Okay, Uh, your rectangle weekend, as you can see, absolutely. You put directing all in place. Your entire Texas this added as a layer. So the thing is, uh, your farm is also black, so that's why you can't see it. And you can see your back. Now, give it a padding. So we have some breathing. One within the rectangle and the text. Okay. Now, as as you look, this, like, you know, are using just the color for the background. You're actually creating another shape player, and we're using that. Now, if you want to modify for the other properties for rectangle, you can provide a foreground color and, uh, foreground color. You can just say, you know how long. Okay, there we go. So you have your new color for your rectangle, and you can have some extra patty around it. So let's see what happens here. Uh, so you can see it's actually creating a padding between to object. So that's what not actually adding between these two elements, So that's actually creating. So that we go. Okay, so that's how you can create shape. So, uh, that's actually one example. Now, if you want, you can create a rounded rectangle. It's affecting. Also, I can see wrong big rectangle. Same. It takes a collar radia as the, uh has one of the property. As for each life property and I can save the time, Stan and, uh, go ahead and build it. There's some things that could be have done wrong here, and I want to find out the corner for radio outside. Yeah. And, uh, let's go ahead and tell it to try you and your product's gonna be built. And if you can say you have around the rectangle created for you Okay, Uh, there is, um, uh, one more shape, uh, that we're gonna try. Let's try circle and, uh, circle. Basically, this creates a circle, and, um, you can have, like, you know, all these other modifies apply to it as well. So just have like that, and you have a circle created for you. You also have the let yourself, um, and lips, actually. And there you go. You can create another. So these are sort of shapes and uh, you can create these shapes very easily using 50. Why? So I would actually, um uh we explore more of these shapes when we're creating our you. Why? But I just want to introduce you to solve these, uh, basic concert. So when we actually created, I have to spend time explain this their primary and stuff like that. Okay. And they are also maybe talking about individual things. Like you talk about, uh, text, um, and talk about most of asthma to add many properties as we can into the text