Create beautiful forms with Flutter

Creating good looking forms on mobile is not a trivial task. The kind of layouts that are available on native development tools as well as cross-platform frameworks (e.g. Xamarin, React Native etc.) make use of complex layout hierarchies to achieve a satisfactory output. In this brief post, I’m going to show you how easy it is to build a form in Flutter.

Let’s say you need to build something like this:

A form built with Material Design guidelines

In a typical setting, you’ll need to use a combination of horizontal and vertical layouts to create each field of the page. It sometimes becomes hard to create consistency between each field’s layout on the same page and it gets bit tricky to keep the consistency across different pages.

While exploring Flutter widgets, I stumbled upon ListTile and since then I’m sold on it. It makes it really easy to create list items as well as form fields alike. In almost 80% of the cases, this widget alone can help a lot in building out informational screens or forms. You don’t need to think about margins and padding and other spacing concerns. The ListTile widget is 100% Material Design compliant and handles different types of items quite well.

ListTile has the following structure:

ListTile structure

Everything, apart from Title, can be considered optional and the widget does quite well in adjusting itself in the absence of leading, trailing and subtitle widgets.

You can use any widget for title and subtitle but leading and trailing has space limitations so it’s highly recommended to use icons or images in those places.

In Flutter, you just need to have something like the snippet shown below to create a beautiful form or information display page (the complete sample is uploaded on GitHub):

return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
    actions: <Widget>[
      new IconButton(icon: const Icon(Icons.save), onPressed: () {})
    ],
  ),
  body: new Column(
    children: <Widget>[
      new ListTile(
        leading: const Icon(Icons.person),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Name",
          ),
        ),
      ),
      new ListTile(
        leading: const Icon(Icons.phone),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Phone",
          ),
        ),
      ),
      new ListTile(
        leading: const Icon(Icons.email),
        title: new TextField(
          decoration: new InputDecoration(
            hintText: "Email",
          ),
        ),
      ),
      const Divider(
        height: 1.0,
      ),
      new ListTile(
        leading: const Icon(Icons.label),
        title: const Text('Nick'),
        subtitle: const Text('None'),
      ),
      new ListTile(
        leading: const Icon(Icons.today),
        title: const Text('Birthday'),
        subtitle: const Text('February 20, 1980'),
      ),
      new ListTile(
        leading: const Icon(Icons.group),
        title: const Text('Contact group'),
        subtitle: const Text('Not specified'),
      )
    ],
  ),
);

I highly recommend using ListTile widget for your basic needs before thinking about creating layouts using Column, Row and other such widgets. I hope that this post is helpful for people looking to get started with Flutter and to those as well who have already started off building apps with this cool SDK.

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.