---

Flutter Input & Form Widgets #

Purpose: Collect, validate, and manage user input in apps using interactive form controls.

Core Input Widgets #

1. TextField #

Used for basic text input.

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
  keyboardType: TextInputType.text,
)

Common properties:

• controller → manage text programmatically
• obscureText: true → hide text (for passwords)
• maxLength → limit input length

---

2. Form & FormField #

Form helps group multiple input fields together for validation and submission.

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: 'Email'),
        validator: (value) {
          if (value == null || value.isEmpty) return 'Enter email';
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('Form Submitted');
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

---

3. TextFormField #

Similar to TextField, but includes built-in validation support within forms.

TextFormField(
  decoration: InputDecoration(labelText: 'Username'),
  validator: (value) =>
      value!.isEmpty ? 'This field cannot be empty' : null,
)

---

4. Checkbox #

For true/false selection.

bool isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (value) {
    isChecked = value!;
  },
)

---

5. Radio #

Used when selecting one option from multiple.

int selectedValue = 1;

Radio(
  value: 1,
  groupValue: selectedValue,
  onChanged: (value) {
    selectedValue = value!;
  },
)

---

6. Switch #

Toggles between ON and OFF states.

bool isOn = false;

Switch(
  value: isOn,
  onChanged: (value) {
    isOn = value;
  },
)

---

7. Slider #

Selects a value from a continuous range.

double volume = 0.5;

Slider(
  value: volume,
  min: 0,
  max: 1,
  divisions: 10,
  label: '${(volume * 100).round()}%',
  onChanged: (value) {
    volume = value;
  },
)

---

8. RangeSlider #

For selecting a range (min & max values).

RangeValues range = RangeValues(20, 80);

RangeSlider(
  values: range,
  min: 0,
  max: 100,
  divisions: 10,
  labels: RangeLabels('${range.start}', '${range.end}'),
  onChanged: (values) {
    range = values;
  },
)

---

9. DropdownButton #

Shows a dropdown menu of selectable items.

String selected = 'Apple';

DropdownButton<String>(
  value: selected,
  items: ['Apple', 'Banana', 'Orange']
      .map((e) => DropdownMenuItem(value: e, child: Text(e)))
      .toList(),
  onChanged: (value) {
    selected = value!;
  },
)

---

10. DatePicker & TimePicker #

Used to select date or time.

// Date Picker
showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
);

// Time Picker
showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

---

11. Autocomplete #

Provides suggestions as user types (built-in Flutter widget).

Autocomplete<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
      return const Iterable<String>.empty();
    }
    return ['Apple', 'Banana', 'Orange'].where((option) {
      return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
    });
  },
  onSelected: (selection) {
    print('You selected: $selection');
  },
)

---

💡 Mobile Responsiveness Tip:
Wrap your form in a scrollable layout for smaller screens:

SingleChildScrollView(
  padding: EdgeInsets.all(16),
  child: Form(...),
)

#