Skip to main content
Logo Appt Light

Accessibility focus indicator on Flutter

Users should know which element has focus when using a keyboard or assistive technology. For example, you could show a rectangle around the focused element. Or you can adjust the colors whenever an element receives focus. Focus indicators can take many different forms. The focus indicator should remain visible while the element is in focused state.

In Flutter, you can adjust colors when an element receives focus. However, it's not possible to change the focus indicator of assistive technologies. Users can adjust their preferences in the system settings on Android and iOS.

You can change colors based on MaterialState. For a button, you could add a ButtonStyle to change the color when in .focused state.

The code sample below shows how to change the background color of a button on focus.

TextButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith(getColor),
  ),
  child: Text('Button'),
);

Color? getColor(Set<MaterialState> states) {
  const Set<MaterialState> interactiveStates = <MaterialState>{
    MaterialState.focused,
  };
  if (states.any(interactiveStates.contains)) {
    return Colors.blue;
  }
  return Colors.red;
}

Feedback?

Let us know!