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?

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:

flutter_dash Tutorial: Add interactivity to your Flutter app

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

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

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.

• Video: FloatingActionButton (Widget of the Week)

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.

• Video: Rich Text (Widget of the Week)
• Demo: Rich Text Editor
• Sample code: Rich Text Editor code

SelectableText

Display a string of user-selectable text with a single style.

• Video: SelectableText (Widget of the Week)

Form

An optional container for grouping together multiple form field widgets.

• Article: Build a form with validation
• Demo: Form app
• Sample code: Form app code

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.

• Video: DropdownMenu (Widget of the Week)

Slider

Select from a range of values.

• Video: Slider, RangeSlider, CupertinoSlider (Widget of the Week)

Checkbox

Select one or more items from a list, or toggle an item.

CheckboxListTile

A checkbox with a label.

• Video: CheckboxListTile (Widget of the Week)

Switch

Toggle the on/off state of a single setting.

SwitchListTile

A switch with a label.

• Video SwitchListTile (Widget of the Week)

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.

showDatePicker

Shows a dialog containing a Material Design date picker.

showTimePicker

Shows a dialog containing a Material Design time picker.

Dismissible

Clear list items by swiping left or right.

• Video: Dismissible (Widget of the Week)
• Article: Implement swipe to dismiss

pkg:flutter_slidable

A list item with directional slide actions that can be dismissed.

• Video: flutter_slidable (Package of the Week)

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.

• Video: GestureDetector (Widget of the Week)
• Documentation: Taps, drags, and other gestures
• Article: Handle taps

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.

• Video: Semantics (Flutter Widget of the Week)

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:

• Video: GestureArena (Decoding Flutter)

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

• Article: Tap, drag, and enter text
• Article: Handle scrolling

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.

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