Handling user input

Now that you know how to manage state in your Flutter app, how can you let users interact with your app and change its state?

Introduction to user input

#

As a multi-platform UI framework, there are many different ways for users to interact with a Flutter app. The resources in this section introduce you to some of the common widgets used for enabling user interaction.

Some user input types, like scrolling, have already been covered in Layouts.

For an introduction to how you can change app state in response to user interactions, check out the following tutorial that teaches you how to build a "favorite" button:

Tutorial: Add interactivity to your Flutter app

Material 3 demo

#

Next, check out the Material 3 Demo, which samples some of the user input widgets available in the Material 3 component library.

Get user input

#

This section covers widgets that help you build the most common user input methods into your Flutter app.

Click or tap (Buttons)

#

Let a user prompt action in a UI by clicking or tapping.

The following Material 3 button types are functionally similar, but are styled differently:

[ElevatedButton][]
A button with some depth. Use elevated buttons to add dimension to otherwise mostly flat layouts.
FilledButton
A filled button that should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.
OutlinedButton
A button with text and a visible border. These buttons contain actions that are important, but aren't the primary action in an app.
TextButton
Clickable text, without a border. Since text buttons don't have visible borders and they must therefore rely on their position relative to other content for context.

IconButton: A button with an icon.

FloatingActionButton
A circular icon button that hovers over content to promote a primary action.

Text

#

Several widgets support text input.

TextField
Let users enter text, either with hardware keyboard or with an onscreen keyboard.

The following series of cookbook articles walk you through every step on how to build a text field, retrieve its value, and handle state changes:

  1. Article: Create and style a text field
  2. Article: Retrieve the value of a text field
  3. Article: Handle changes to a text field
  4. Article: Focus and text fields
RichText
Display text that uses multiple styles.
SelectableText
Display a string of user-selectable text with a single style.
Form
An optional container for grouping together multiple form field widgets.

Select a value from a group of options

#
SegmentedButton
Allow users to select from limited set of options.
DropdownMenu
Let users select a choice from a menu and place the selected item into the text input field.
Slider
Select from a range of values.

Toggle values

#
Checkbox
Select one or more items from a list, or toggle an item.
CheckboxListTile
A checkbox with a label.
Switch
Toggle the on/off state of a single setting.
SwitchListTile
A switch with a label.
Radio
Select between a number of mutually exclusive values. When one radio button in a group is selected, the other radio buttons in the group cease to be selected.
Chip
Chips are compact elements that represent an attribute, text, entity, or action.

Select a date or time

#
showDatePicker
Shows a dialog containing a Material Design date picker.
showTimePicker
Shows a dialog containing a Material Design time picker.

Swipe and slide

#
Dismissible
Clear list items by swiping left or right.
pkg:flutter_slidable
A list item with directional slide actions that can be dismissed.

Add interactivity with GestureDetector

#

If none of Flutter's widgets fit the functionality for what you're looking for, you can add interactivity to your own widget using GestureDetector.

Don't forget about accessibility! If you're building your own custom widget, you can annotate its meaning with the Semantics widget. It lets you provide descriptions, metadata, and more to screen readers and other semantic analysis-based tools.

Bonus: For a deeper understanding on how Flutter's GestureArena turns raw user interaction data into human recognizable concepts like taps, drags, and pinches check out the following video:

Testing

#

Once you have finished building user interactions into your app, don't forget to write tests to ensure that everything works as expected!

Next: Networking

#

This page was an introduction to handling user input. Now that you know how to accept input from app's users, you can make your app even more interesting by adding external data. In the next section, you'll learn now to fetch data for your app over a network, how to convert data to and from JSON, authentication, and other networking features.

Feedback

#

As this section of the website is evolving, we welcome your feedback!