Accessibility
FlutterFlow follows your device’s accessibility settings for motion and appearance, and its controls have names that screen readers announce. This page describes what changes when you turn on reduced motion, how controls are named, and how to get around with the keyboard.
Reduced motion
FlutterFlow follows your device’s or browser’s reduce-motion setting. When that setting is on, FlutterFlow removes or shortens its animations:
- Inside an app, changes between screens and panels use short fades instead of movement.
- No confetti falls when the agent finishes your first version, when you push for the first time, or when your app goes live in a store. The message for each moment still appears.
- Signing in opens the next page without the animated transition, and Home doesn’t draw its moving background.
- Spinning and pulsing status indicators, such as a thread’s status ring while the agent works, stay still.
- Loading placeholders don’t shimmer.
Light and dark appearance
FlutterFlow can match your device’s light or dark setting, or always use one of them. Open the account menu and, next to Theme, choose light (the sun icon), dark (the moon icon), or system (the monitor icon). For details, see Change the theme.
Accessible names
FlutterFlow’s controls have names that screen readers announce, including buttons that show only an icon. For example, the button with a play icon that opens the preview beside a page is named Show the app. While the preview is open, the button shows a panel icon and is named Hide the app. The same name appears as the button’s tooltip.
Some names exist only for screen readers and don’t appear on the screen. For example, when you have several apps, the search box on Home shows only “Search”, but a screen reader announces it as “Search your apps”.
Keyboard use
FlutterFlow has one shortcut that works almost everywhere: press Command+K on a Mac, or Control+K on other computers, to open the command palette. From the palette, you can move between areas and run commands without the mouse. Press the same keys again to close it.
The shortcut also works while your keyboard focus is inside the preview of your app. It doesn’t open the palette in the following cases:
- Another menu or dialog is open.
- The agent is building your first version.
For more information about keyboard shortcuts, see Keyboard shortcuts.
Report a problem
To report an accessibility problem, such as something that’s hard to use with your setup, use Send feedback. Say which assistive technology or setting you use, and what happened. For details, see Send feedback.