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’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

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.

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,
      ),
    ),
  ),
),
const SizedBox(height: 32),
TextField(
  decoration: InputDecoration(
    contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    hintText: 'Email',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(32),
    ),
  ),
),
...
Container(
  decoration: BoxDecoration(
    color: CupertinoColors.systemGrey5,
    borderRadius: BorderRadius.circular(32),
  ),
  child: TextField(
...
const SizedBox(height: 32),
CupertinoButton(
  color: Theme.of(context).primaryColor,
  child: const Text('Save'),
  onPressed: () {},
),