Flutter UI Widgets
Part 1: Flutter UI Widgets Build iOS Styled Forms
— Flutter & Dart

Lesson Complete

Play Next Lesson
Next

Build iOS Styled Forms

This video was last updated on Nov 9 2021

Use Cupertino based widgets to style form inputs that look and feel native.

Contributors

We’ve covered forms in previous episodes but we used mainly material widgets for that. This episode would focus on syling form inputs to look native to iOS. I’ve linked the appbar action button to navigate to the CreateAnotherArticle page. This is just an demo page we’ll be working with for this episode. It returns a CupertinoPageScaffold that has a navigation bar and a ListView.

Flutter gives us different cupertino styled form widgets. We would be working mainly with the CupertinoTextField then later, we would style a normal TextField. Inside the ListView of the CreateAnotherArticle page, enter the following code:

const CupertinoTextField(
  prefix: Icon(
    CupertinoIcons.news_solid,
    color: CupertinoColors.systemGrey,
    size: 32,
  ),
  placeholder: 'Article Title',
  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 15),
  clearButtonMode: OverlayVisibilityMode.editing,
  decoration: BoxDecoration(
    border: Border(
      bottom: BorderSide(
        width: 0,
        color: CupertinoColors.systemGrey,
      ),
    ),
  ),
),

Save your work to see the update. This creates a CupertinoTextField which is the iOS styled version of a TextField. We set its prefix to an icon and give the icon a size of 32 and a gray color.

We set the placeholder text and added a padding inside the text field. We also added a clear button and set it to OverlayVisibilityMode.editing. This adds a clear button as soon as we add text to the field.

Clicking on the button clears the text.

Finally, we add a bottom border using the BoxDecoration class. We can also style a normal text field to any look and feel we want. The CupertinoTextField 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 create a custom styled TextField, enter the following code:

const SizedBox(height: 32),
TextField(
  decoration: InputDecoration(
    contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    hintText: 'Email',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(32),
    ),
  ),
),

Save your work and you should see the update. This creates a text field with a hint text which is used to let the user know the type of information to input. I gave it an outline border with border radius of 32.

We can also add a background color. To do that, wrap the TextField with a Container and update it like so:

...
Container(
  decoration: BoxDecoration(
    color: CupertinoColors.systemGrey5,
    borderRadius: BorderRadius.circular(32),
  ),
  child: TextField(
...

Then save your work. In here, we added a BoxDecoration to the Container and gave it a light grey color. We also added a border radius of 32 to match the text field’s outline border. Flutter is all about composition. If one widget can’t do something, simply wrap it with another widget to get the desired styling.

Finally, let’s check out the cupertino button. Add the following code below the text fields:

const SizedBox(height: 32),
CupertinoButton(
  color: Theme.of(context).primaryColor,
  child: const Text('Save'),
  onPressed: () {},
),

This is pretty straightforward. There’s nothing new here in the format. It just renders an iOS styled button which fades out and in when pressed.

There are 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.

Reviews

Comments