Flutter Material Form Widget Tutorial

An optional container for grouping together multiple form field widgets


Flutter Material Form Widget useful inputs

  • child: Content of the Form


Flutter Material Form Widget example

Form(
  child: Column(
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Email',
          hintText: 'Please Enter Email',
        ),
      ),
      TextFormField(
        decoration: InputDecoration(
          labelText: 'Password',
          hintText: 'Please Enter Password',
        ),
        obscureText: true,
      ),
      DropdownButton(
        items: dropdownList,
        hint: new Text('Select Gender'),
        isExpanded: true,
      ),
      RadioListTile<String>(
          onChanged: (value) {},
          title: const Text('Single'),
          value: 'single',
          groupValue: 'single'),
      RadioListTile<String>(
          onChanged: (value) {},
          title: const Text('Married'),
          value: 'married',
          groupValue: 'single'),
      CheckboxListTile(
        onChanged: (value) {},
        value: true,
        controlAffinity: ListTileControlAffinity.leading,
        title: new Text(
          'I agree to the terms and condition',
        ),
      ),
      SwitchListTile(
        onChanged: (value) {},
        value: true,
      ),
      ElevatedButton(
        onPressed: () {},
        child: Text('Submit'),
      ),
      // Add TextFormFields and ElevatedButton here.
    ],
  ),
)

Full codes example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => (runApp(FormExample()));

class FormExample extends StatelessWidget {
  List<DropdownMenuItem<int>> dropdownList = [
    DropdownMenuItem(
      child: new Text('Female'),
      value: 1,
    ),
    DropdownMenuItem(
      child: new Text('Male'),
      value: 0,
    )
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Form Example Code'),
        ),
        body: Form(
          child: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Email',
                  hintText: 'Please Enter Email',
                ),
              ),
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Password',
                  hintText: 'Please Enter Password',
                ),
                obscureText: true,
              ),
              DropdownButton(
                items: dropdownList,
                hint: new Text('Select Gender'),
                isExpanded: true,
              ),
              RadioListTile<String>(
                  onChanged: (value) {},
                  title: const Text('Single'),
                  value: 'single',
                  groupValue: 'single'),
              RadioListTile<String>(
                  onChanged: (value) {},
                  title: const Text('Married'),
                  value: 'married',
                  groupValue: 'single'),
              CheckboxListTile(
                onChanged: (value) {},
                value: true,
                controlAffinity: ListTileControlAffinity.leading,
                title: new Text(
                  'I agree to the terms and condition',
                ),
              ),
              SwitchListTile(
                onChanged: (value) {},
                value: true,
              ),
              ElevatedButton(
                onPressed: () {},
                child: Text('Submit'),
              ),
              // Add TextFormFields and ElevatedButton here.
            ],
          ),
        ),
      ),
    );
  }
}