Summary - TextFormField

Combine TextFormField and controller to make an input form.

Combine three parts

To make an input form, you combine three parts: the TextFormField widget, a TextEditingController (to manage the input), and an InputDecoration (for label and hint). The controller is created in State, disposed, and wired to the TextFormField. The decoration is given to the same field.

TextFormField(
  controller: controller,
  decoration: InputDecoration(
    labelText: 'Name',
  ),
)

Exercise Make an input form

Write a function register that prints Kayit. In main call register. Write a StatefulWidget named KayitFormu; in its State, create a TextEditingController, dispose it, and wire it as controller along with a decoration to a TextFormField. Set labelText to 'Ad'.

Show example solution

import 'package:flutter/material.dart';

void kayit() {
  print('Kayit');
}

void main() {
  kayit();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: KayitFormu(),
        ),
      ),
    );
  }
}

class KayitFormu extends StatefulWidget {
  const KayitFormu({super.key});

  @override
  State<KayitFormu> createState() => _KayitFormuState();
}

class _KayitFormuState extends State<KayitFormu> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: _controller,
      decoration: InputDecoration(
        labelText: 'Ad',
      ),
    );
  }
}

Test yourself

Which parts are used together for an input form?
- ListView + ListTile + Separator
- Column + Row + SizedBox
- Text + Padding + Center
- TextFormField + TextEditingController + InputDecoration
Show answer

TextFormField + TextEditingController + InputDecoration — For an input form, TextFormField (input widget), TextEditingController (managing the input) and InputDecoration (label and hint) are used together.

Add the decoration parameter

TextFormField(
  controller: myController,
  ____: InputDecoration(
    labelText: 'Ad',
  ),
)

Show answer

TextFormField(
  controller: myController,
  decoration: InputDecoration(
    labelText: 'Ad',
  ),
)

Form summary

TextFormField

Text input widget
TextEditingController

Class controlling the input
InputDecoration

Provides label and hint
dispose

Cleans up the controller

Next lesson: Project skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies