Flutter Forms

Flutter forms are used to collect user input data in a structured and organized manner. Building forms in Flutter is made easy by its built-in widgets that help developers create beautiful and functional forms quickly. In this tutorial, we'll look at how to create forms in Flutter.

Syntax

Form(
  child: Column(
    children: [
      // form fields
    ]
  )
)

Example

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  String _name = '';
  int _age = 0;

  void _submitForm() {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      print('Name: $_name, Age: $_age');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: 'Name'),
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter your name.';
              }
              return null;
            },
            onSaved: (value) {
              _name = value;
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: 'Age'),
            keyboardType: TextInputType.number,
            validator: (value) {
              if (value.isEmpty) {
                return 'Please enter your age.';
              }
              if (int.tryParse(value) == null) {
                return 'Please enter a valid age.';
              }
              return null;
            },
            onSaved: (value) {
              _age = int.parse(value);
            },
          ),
          RaisedButton(
            onPressed: _submitForm,
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

Output

When the "Submit" button is pressed, the values of the form fields are printed to the console.

Explanation

In this example, we created a form with two form fields (name and age) and a submit button. The form fields are created using TextFormField, which is a convenient widget for creating text input fields with built-in validation. The form itself is wrapped in a Form widget which is used to manage the form state and perform validation. The GlobalKey is used to identify the form and is required for form submission.

Use

Flutter forms can be used to collect input from users in a variety of scenarios such as user registration, login, feedback forms, etc. They can be customized to fit the design of your app and can even include complex form fields such as date pickers and dropdowns.

Important Points

• A Form widget is used to manage the form state.
• Each form field is created using TextFormField which provides built-in validation.
• The GlobalKey is used to identify the form and is required for form submission.

Summary

In this tutorial, we learned how to create forms in Flutter using Form and TextFormField widgets. We also learned how to manage the form state, perform validation, and submit the form data. Flutter forms are an essential component of any Flutter app that requires user input.