Flutter UI Widgets

Nov 9 2021 · Dart 2.14, Flutter 2.5, VS Code 1.61

Part 1: Flutter UI Widgets

14. Build iOS Styled Forms

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 13. Explore Cupertino Widgets Next episode: 15. Adapt Designs Based on Platforms

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

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

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.