Flutter UI Widgets

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

We've covered forms in previous episodes but we use mainly material widgets for that. This episode will focus on Styling from Impute to look native to IOS. I've linked up bar action button to navigate to the create another article page. This is just a demo page we'll be working with for this episode. It returns a Cupertino Page Scaffold that has a navigation bar on a list view. Flutter gives us different Cupertino styles from widgets, would be working mainly with the Cupertino text field. Then later we'll style in a normal text field. Inside a list view of the create another article page, enter the following code. Sylvia walked to see the updates. This creates a Cupertino text view, which is an IOS style version of a text field. We set this prefix to an icon and give the icon a size of text view and a gray color. We set the place who that text and added a pattern inside a text field. We also added a clear button and set it to overly visibility modes that edits in. This adds a Clear button as soon as we add text to the field. Clicking on a button classic text. Finally, we are the bottom bar using the box the creation class. We can also style text fields to any look and feel We want. The Cupertino text field just add some user experience features that are native to IOS. Also Flutter knows how to adapt material widgets like we've seen in previous episodes. To critic custom style text field enter the following code Sylvia walk, and you should see the updates. This create a text field with a hints text, which is used to let the user know the type of information to infuse. I give them offline border with a border radius of text view. We can also add a background color, to do that, Wrap the text field with the container and update it like soon. Then save your work. In here, We added a box decoration to the container and gave it the light gray color. We also added a border radius of Text field, to match the text fields outline border. Flutter is all about composition. Even, We just can't do something simply wrap it up under widgets to get a desired styling. Finally, let's check out the Cupertino button at the full encode below the text fields. This is pretty straightforward. There's nothing new here in this format. It just ringed us an IOS style button, which fits out an in when pressed. The other Cupertino widgets provided by Flutter. You can go ahead and try them out. They all operate on the same principles. Like the widgets we've covered so far.