CupertinoPageScaffold

3 minutes
Share the link to this page
Copied
  Completed
Basic iOS style page layout structure. Positions a navigation bar and content on a background.

Transcript

Hello, in this video I'm going to show you how to implement a Cupertino page scaffold and include Cupertino praise guffawed. You know what the regular scaffold is. Cupertino is formatted in more of an iOS style. So you actually have to get rid of your existing scaffold, I recommend that you create a backup of your file, even your project. In general, it's good to backup. So just in case you need anything, you want to go Cupertino page, scaffold, semi colon at the end.

And then inside of the afternoon, do navigation bar. And you'll see no navigation bar in here. There are some properties that we need so for this, we are going to have Cupertino. Watch this. We're gonna have a Cupertino button. In here we could have a child in the text state And this is a rare thing, but this is so great in the format of navigation bar, then child.

And what you want to do is say area and I'll explain that in a second. And inside of here, you'll do your regular sort of child container column and in there. So if I say, I need to run it in our simulator, this is a close up. So is this gonna launch building the APK is actually built it. It's installing the APK On our device now so as you can see we've got Hello. We got this save this now we can make it do something if we want to but we've got the ball right there I can actually get rid of the trailing if we wanted to get rid of that center button disappears.

Watch what happens if I get rid of the safe area. I think you might just need to implement the thought everything is in line. Probably only the safe button there for now. Want to add some color to it with the background color. Red Nope. Sorry.

That's the actual pay scuffled or mentor added to the navigation bar in the background color. So save that now. funding issue here Oh, there's too many commas. I didn't see that is red, but also the top just slightly darker red as you would get in, you know, in iOS. So I'm obviously here you can add whatever you want. You can style it however you want.

That is totally up to you. But apart from that, that's really all there is to a Cupertino page scaffold. Live that you get your empty, empty space. Nobody can implement that as a button if you want to, again into the trailer and you can do on press pad in that sort of stuff, change the color. You can also add padding to the navigation bar. To do some leading some middles, we can add some properties there as well.

And that is it. If you have any questions, feel free to drop me a message. And as usual, I look forward to seeing you in the next video.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.