Forms and Input

A form looks like the most mundane exercise in mobile development. In reality, it is where the most details pile up that separate a pleasant app from one people abandon: the keyboard covering the field being edited, the "next" key that goes nowhere, the error message that appears before the user has even finished typing, the content lost because the screen was rotated.

None of these problems is hard on its own. There are simply a lot of them, and the framework provides a specific tool for each one, though the existence of those tools isn't obvious: Form and its GlobalKey, TextInputAction, FocusNode, autovalidateMode, TextEditingController. A form written without them works in a demo and disappoints in real use.

We will build a complete sign-up screen, adding the pieces one at a time and showing each time what breaks without them. We will also look at the memory leak specific to this lesson: the TextEditingController that is created but never disposed, and stays alive after the screen is closed.

TextField and TextEditingController

The bare field simply displays and collects text: