11.5. Working with forms in Flutter: Styling form fields

Working with forms is a crucial part of application development. In Flutter, there are several ways to style form fields to improve the user experience and make your app more attractive. In this chapter, we'll see how to style form fields using Flutter and Dart in a complete course.

We'll start with the basics: creating a form field. In Flutter, you can create a form field using the TextFormField widget. This widget allows you to create a form field with many customization options. For example, you can set initial text, text hint, keyboard type, validation and much more.

To style a form field, you can use the 'decoration' property. This property accepts an InputDecoration object that allows you to style the form field in various ways. For example, you can set background color, border color, border shape, text color, text font, icon, text hint and much more.

TextFormField(
  decoration: InputDecoration(
    fillColor: Colors.blue,
    filled: true,
    border: OutlineInputBorder(),
    labelText: 'Name',
    hintText: 'Type your name',
  ),
)

In the code sample above, the form field has a blue background color, an outer border, a 'Name' text label, and a 'Type your name' text hint.

Also, you can style the text inside the form field using the 'style' property. This property accepts a TextStyle object that allows you to style the text in a variety of ways. For example, you can set text color, text font, text size, text weight, line height, text decoration and more.

TextFormField(
  style: TextStyle(
    color: Colors.white,
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
  decoration: InputDecoration(
    fillColor: Colors.blue,
    filled: true,
    border: OutlineInputBorder(),
    labelText: 'Name',
    hintText: 'Type your name',
  ),
)

In the code sample above, the text inside the form field has a white color, a size of 20 points, and a bold weight.

Additionally, you can style the text hint using the 'hintStyle' property. This property accepts a TextStyle object that allows you to style the text hint in a variety of ways. For example, you can set the text tip color, text tip font, text tip size, text tip weight, text tip line height, text tip decoration, and much more.

TextFormField(
  style: TextStyle(
    color: Colors.white,
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
  decoration: InputDecoration(
    fillColor: Colors.blue,
    filled: true,
    border: OutlineInputBorder(),
    labelText: 'Name',
    hintText: 'Type your name',
    hintStyle: TextStyle(
      color: Colors.white,
      fontSize: 16,
      fontStyle: FontStyle.italic,
    ),
  ),
)

In the code sample above, the text hint inside the form field has a white color, a size of 16 points, and an italic font.

Finally, you can style the text label using the 'labelStyle' property. This property accepts a TextStyle object that allows you to style the text label in a variety of ways. For example, you can set the text label color, text label font, text label size, text label weight, text label line height, text label decoration, and much more.

TextFormField(
  style: TextStyle(
    color: Colors.white,
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
  decoration: InputDecoration(
    fillColor: Colors.blue,
    filled: true,
    border: OutlineInputBorder(),
    labelText: 'Name',
    labelStyle: TextStyle(
      color: Colors.white,
      fontSize: 18,
      fontWeight: FontWeight.bold,
    ),
    hintText: 'Type your name',
    hintStyle: TextStyle(
      color: Colors.white,
      fontSize: 16,
      fontStyle: FontStyle.italic,
    ),
  ),
)

In the code sample above, the text label inside the form field has a white color, a size of 18 points, and a bold weight.

In summary, styling form fields in Flutter is an easy and flexible task. You can style almost every aspect of a form field using the 'decoration', 'style', 'hintStyle' and 'labelStyle' properties. With these properties, you can create attractive and custom form fields to improve the user experience and make your application more attractive.

Next page of the Free Ebook:

154Working with forms in Flutter: Adding submit and cancel buttons

3 minutes