onchanged vs onpressed vs onTap
Flutter Tutorial:
Flutter Widgets:
Flutter Advance
Flutter REST API
Advanced Concepts
Wrap vs Builder vs OverBarFlow
Circular progress contain Icon
Flutter State management Comparison
Flutter Database
Flutter Token Expired Handling
Flutter Provider
Flutter GetX
Flutter with Native
Flutter Tips:
Interview Questions
Flutter 100 Interview Questions
onChanged
onChanged is a callback function that is triggered whenever the value of a widget changes. It is commonly used for input widgets such as TextField or DropdownButton.
Example:
onChanged is typically used with form elements that allow user input, such as TextField or Checkbox. It’s triggered whenever the value of the form element changes.
bool _isChecked = false;
Checkbox(
value: _isChecked,
onChanged: (bool newValue) {
setState(() {
_isChecked = newValue;
});
},
);
In this example, we have a Checkbox that’s controlled by the _isChecked boolean variable. Whenever the user checks or unchecks the checkbox, the onChanged callback is triggered, which updates the state and causes the UI to rebuild with the new value.
onPressed
onPressed is a callback function that is triggered when a button or similar widget is pressed. It is commonly used for buttons and clickable widgets in Flutter.
Example:
onPressed is used with buttons, and it’s triggered whenever the button is pressed.
ElevatedButton(
onPressed: () {
// Do something when the button is pressed
print('Button pressed');
},
child: Text('Press me'),
);
In this example, we have an ElevatedButton that logs a message to the console when pressed. The onPressed callback is assigned an anonymous function that contains the code to execute when the button is pressed.
onTap
onTap is a callback function that is triggered when a widget is tapped. It is commonly used for gesture detection in Flutter, and is typically used in conjunction with the GestureDetector widget.
Example:
onTap is used with widgets that respond to touch events, such as InkWell or GestureDetector. It’s triggered whenever the user taps on the widget.
InkWell(
onTap: () {
// Do something when the widget is tapped
print('Widget tapped');
},
child: Text('Tap me'),
);
In this example, we have an InkWell widget that logs a message to the console when tapped. The onTap callback is assigned an anonymous function that contains the code to execute when the widget is tapped.
| Aspect | onChanged | onPressed | onTap |
|---|---|---|---|
| Widget Type | Typically used with input widgets like TextField, Checkbox, etc. | Used with buttons like ElevatedButton, TextButton, etc. | Used with interactive widgets like InkWell, GestureDetector, etc. |
| Event Trigger | Triggered when the value of an input changes (e.g., text input, checkbox state). | Triggered when a button is pressed and released. | Triggered when the user taps on the widget. |
| Example | dart onChanged: (value) { print('Input changed: $value'); }, | dart onPressed: () { print('Button pressed'); }, | dart onTap: () { print('Widget tapped'); }, |
| Common Widgets | TextField, Checkbox, Switch | ElevatedButton, TextButton, IconButton | InkWell, GestureDetector, GestureDetector |
| Return Type | Returns the new value of the input. | Typically does not return a value. | Typically does not return a value. |
| Use Case | Used when you want to respond to changes in an input’s value. | Used for buttons or actions that need to be performed when pressed. | Used for making non-text widgets respond to user taps. |
In summary, the difference between these three callbacks is in the type of interaction they respond to: onChanged for value changes, onPressed for button presses, and onTap for taps or other gestures.
If you face any issue, please comment below, we will reply soon
