YouTipFlutter User Input
This section will introduce how to handle user input in Flutter applications, including text input, button clicks, form handling, etc.
* * *
## TextField - Text Input
TextField is the most commonly used text input Widget in Flutter.
## Example: Basic TextField Usage
// Simplest TextField
TextField()
// Decorated TextField
TextField(
decoration:const InputDecoration(
labelText:'Username',// Label
hintText:'Please enter username',// Hint text
prefixIcon: Icon(Icons.person),// Leading icon
),
)
// Bordered TextField
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(// Outer border
borderRadius: BorderRadius.circular(8),
),
labelText:'Password',
),
obscureText:true,// Hide input content (for passwords)
)
// Multi-line text input
TextField(
maxLines:3,// Maximum lines
decoration:const InputDecoration(
hintText:'Please enter multi-line text',
),
)
* * *
## TextEditingController - Text Controller
Use TextEditingController to read and control the content of TextField.
< h2 class="example">Example: TextEditingController Usage
class TextFieldExample extends StatefulWidget {
const TextFieldExample({super.key});
@override
State createState()=> _TextFieldExampleState();
}
class _TextFieldExampleState extends State{
// Create controller
final TextEditingController _controller = TextEditingController();
String _displayText ='';
@override
void dispose(){
// Dispose controller
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context){
return Column(
children:[
TextField(
controller: _controller,// Bind controller
decoration:const InputDecoration(
labelText:'Enter text',
),
onChanged:(text){
// Listen to text changes
print('Current input: $text');
},
),
const SizedBox(height:20),
// Display input text
Text('You entered: $_displayText'),
const SizedBox(height:20),
ElevatedButton(
onPressed:(){
// Read text
setState((){
_displayText = _controller.text;
});
},
child:const Text('Show Input'),
),
ElevatedButton(
onPressed:(){
// Clear text
_controller.clear();
},
child:const Text('Clear'),
),
ElevatedButton(
onPressed:(){
// Set text
_controller.text='Preset text';
},
child:const Text('Set Text'),
),
],
);
}
}
* * *
## Focus Control
Use FocusNode to control the focus of input fields.
## Example: Focus Control
class FocusExample extends StatefulWidget {
const FocusExample({super.key});
@override
State createState()=> _FocusExampleState();
}
class _FocusExampleState extends State{
final FocusNode _focusNode1 = FocusNode();
final FocusNode _focusNode2 = FocusNode();
@override
void dispose(){
_focusNode1.dispose();
_focusNode2.dispose();
super.dispose();
}
@override
Widget build(BuildContext context){
return Column(
children:[
TextField(
focusNode: _focusNode1,
decoration:const InputDecoration(labelText:'Input Field 1'),
),
const SizedBox(height:10),
TextField(
focusNode: _focusNode2,
decoration:const InputDecoration(labelText:'Input Field 2'),
),
const SizedBox(height:20),
ElevatedButton(
onPressed:(){
// Focus on input field 1
_focusNode1.requestFocus();
},
child:const Text('Focus Input Field 1'),
),
ElevatedButton(
onPressed:(){
// Focus on input field 2
_focusNode2.requestFocus();
},
child:const Text('Focus Input Field 2'),
),
ElevatedButton(
onPressed:(){
// Unfocus
_focusNode1.unfocus();
_focusNode2.unfocus();
},
child:const Text('Unfocus'),
),
],
);
}
}
* * *
## Buttons and Click Events
Flutter provides various button components to handle user clicks.
## Example: Various Buttons
// TextButton - Text button
TextButton(
onPressed:()=> print('Clicked text button'),
child:const Text('Text Button'),
)
// ElevatedButton - Elevated button
ElevatedButton(
onPressed:()=> print('Clicked elevated button'),
child:const Text('Submit'),
)
// OutlinedButton - Outlined button
OutlinedButton(
onPressed:()=> print('Clicked outlined button'),
child:const Text('Cancel'),
)
// IconButton - Icon button
IconButton(
icon:const Icon(Icons.favorite),
onPressed:()=> print('Clicked icon button'),
)
// Button with icon
ElevatedButton.icon(
onPressed:()=> print('Clicked button with icon'),
icon:const Icon(Icons.save),
label:const Text('Save'),
)
// CupertinoButton - iOS style button
CupertinoButton(
child:const Text('iOS Button'),
onPressed:(){},
)
* * *
## Switch, Checkbox, Radio
## Example: Switch, Checkbox, Radio Buttons
class SwitchCheckboxExample extends StatefulWidget {
const SwitchCheckboxExample({super.key});
@override
State createState()=> _SwitchCheckboxExampleState();
}
class _SwitchCheckboxExampleState extends State{
bool _switchValue =false;
bool _checkboxValue =false;
String _radioValue ='A';
@override
Widget build(BuildContext context){
return Column(
children:[
// Switch
Switch(
value: _switchValue,
onChanged:(value){
setState((){
_switchValue = value;
});
},
),
Text('Switch value: $_switchValue'),
// Checkbox
Checkbox(
value: _checkboxValue,
onChanged:(value){
setState((){
_checkboxValue = value ??false;
});
},
),
Text('Checkbox value: $_checkboxValue'),
// Radio buttons
Row(
children:[
Radio(
value:'A',
groupValue: _radioValue,
onChanged:(value){
setState((){
_radioValue = value!;
});
},
),
const Text('Option A'),
Radio(
value:'B',
groupValue: _radioValue,
onChanged:(value){
setState((){
_radioValue = value!;
});
},
),
const Text('Option B'),
],
),
Text('Radio value: $_radioValue'),
],
);
}
}
* * *
## Slider - Slider
## Example: Slider Usage
class SliderExample extends StatefulWidget {
const SliderExample({super.key});
@override
State createState()=> _SliderExampleState();
}
class _SliderExampleState extends State{
double _sliderValue =0.5;
@override
Widget build(BuildContext context){
return Column(
children:[
Slider(
value: _sliderValue,// Current value (0.0-1.0)
min:0.0,
max:1.0,
divisions:10,// Divide into 10 ticks
label:'${(_sliderValue * 100).round()}%',
onChanged:(value){
setState((){
_sliderValue = value;
});
},
),
Text('Current value: ${(_sliderValue * 100).round()}%'),
// Range slider
RangeSlider(
values:const RangeValues(0.3,0.7),
min:0.0,
max:1.0,
onChanged:(values){
print('Range: ${values.start} - ${values.end}');
},
),
],
);
}
}
> When handling user input, remember to use setState to update the UI state, so that the interface can respond to user operations.