Challenge 4

Build a form validation screen with Form and TextFormField.

Validation with Form and TextFormField

To make an input validation screen, you use Form and TextFormField. The validator parameter of TextFormField checks the entered text and returns a String if there is an error. If there is no error, null is returned. Form groups all fields beneath it and allows collective validation.

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Cannot be empty';
    }
    return null;
  },
)

Exercise Make a simple form screen

Write a function formHazir that prints Form hazir. Write a StatelessWidget named FormEkrani; in its build method, have a Form containing a TextFormField. The validator of TextFormField should give the error 'Bos birakilamaz' when the value is empty. In main call formHazir and start with runApp.

Show example solution

import 'package:flutter/material.dart';

void formHazir() {
  print('Form hazir');
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Form(
            child: TextFormField(
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Bos birakilamaz';
                }
                return null;
              },
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  formHazir();
  runApp(const FormEkrani());
}

Exercise Make a validated input form

Write a function dogrulamaBaslat that prints Dogrulama basladi. Write a StatefulWidget named DogrulamaEkrani; in its build method, have a Form containing a Column. The Column should have a TextFormField (with a validator for empty check) and an ElevatedButton. In main call dogrulamaBaslat and start with runApp.

Show example solution

import 'package:flutter/material.dart';

void dogrulamaBaslat() {
  print('Dogrulama basladi');
}

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

  @override
  State<DogrulamaEkrani> createState() => _DogrulamaEkraniState();
}

class _DogrulamaEkraniState extends State<DogrulamaEkrani> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Form(
            child: Column(
              children: [
                TextFormField(
                  validator: (value) {
                    if (value == null || value.isEmpty) {
                      return 'Bos birakilamaz';
                    }
                    return null;
                  },
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Gonder'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  dogrulamaBaslat();
  runApp(const DogrulamaEkrani());
}

Test yourself

What does the validator function return when there is no error?
- true
- false
- null
- An error message
Show answer

null — The validator function returns null when there is no error; it does not return true, false or an error message.

Add the validator parameter

TextFormField(
  ____: (value) {
    if (value == null || value.isEmpty) {
      return 'Bos birakilamaz';
    }
    return null;
  },
)

Show answer

TextFormField(
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Bos birakilamaz';
    }
    return null;
  },
)

Form parts

Form

Groups TextFormField's
TextFormField

Text input field
validator

Callback that validates input
null

Return value when no error

Next lesson: Beginner section exam

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies