How do you handle user input in Flutter?

Overview

Flutter provides several ways to handle user input — from simple taps to complex form validation and gestures.

1. TextField / TextFormField (Text Input)

dartCopy
final _controller = TextEditingController();

TextField(
  controller: _controller,
  decoration: InputDecoration(labelText: 'Enter name'),
  onChanged: (value) => print('Typing: $value'),
  onSubmitted: (value) => print('Submitted: $value'),
)

2. GestureDetector (Tap, Swipe, Drag)

dartCopy
GestureDetector(
  onTap: () => print('Tapped'),
  onDoubleTap: () => print('Double tapped'),
  onLongPress: () => print('Long pressed'),
  onHorizontalDragUpdate: (details) => print('Swiping: ${details.delta.dx}'),
  child: Container(
    width: 100, height: 100,
    color: Colors.blue,
    child: Center(child: Text('Tap me')),
  ),
)

3. InkWell (Tap with Material Ripple)

dartCopy
InkWell(
  onTap: () => print('Tapped with ripple'),
  borderRadius: BorderRadius.circular(8),
  child: Padding(
    padding: EdgeInsets.all(12),
    child: Text('Tap me'),
  ),
)

4. Buttons

dartCopy
ElevatedButton(onPressed: () {}, child: Text('Submit'))
TextButton(onPressed: () {}, child: Text('Cancel'))
IconButton(icon: Icon(Icons.delete), onPressed: () {})
FloatingActionButton(onPressed: () {}, child: Icon(Icons.add))

5. Form Validation

dartCopy
final _formKey = GlobalKey<FormState>();
final _emailController = TextEditingController();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        controller: _emailController,
        decoration: InputDecoration(labelText: 'Email'),
        validator: (value) {
          if (value == null || value.isEmpty) return 'Required';
          if (!value.contains('@')) return 'Invalid email';
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('Form valid: ${_emailController.text}');
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

6. Checkbox, Switch, Slider, Radio

dartCopy
bool _checked = false;
Checkbox(value: _checked, onChanged: (val) => setState(() => _checked = val!))

bool _isOn = false;
Switch(value: _isOn, onChanged: (val) => setState(() => _isOn = val))

double _value = 0.5;
Slider(value: _value, onChanged: (val) => setState(() => _value = val))

int _selected = 1;
Radio<int>(value: 1, groupValue: _selected, onChanged: (val) => setState(() => _selected = val!))

7. DropdownButton

dartCopy
String _selected = 'Option A';
DropdownButton<String>(
  value: _selected,
  items: ['Option A', 'Option B', 'Option C']
      .map((e) => DropdownMenuItem(value: e, child: Text(e)))
      .toList(),
  onChanged: (value) => setState(() => _selected = value!),
)

Input Handling Summary

TextField

TextFormField

GestureDetector

InkWell

ElevatedButton

TextButton

IconButton

Switch

Checkbox

Radio

DropdownButton

Slider

Form

TextFormField

GlobalKey