Flutter: How to get accessibility focus to custom appbar

Question

If you use the default Material scaffold with the default appbar, and you open your app using TalkBack, the accessibility focus moves automatically to the first item in the appbar (usually, the "Back" button).

I would like my appbar to be taller than the default, so I've created a custom one and pass it to the scaffold:

class CustomAppbar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 120,
      child: Semantics(
        focused: true,
        child: RaisedButton(
          child: Text('Test'),
          onPressed: () {},
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(120);
}

Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppbar(),
      body: SafeArea(
        child: Stack(children: <Widget>[
          Column(children: <Widget>[
            _buildContent(),
          ]),
        ]),
      ),
    );
  }

The problem is, if I don't use the default AppBar, I can't move the focus to the first button, even if I wrap it with Semantics.

How is the default Scaffold handling the automatic focus? I've searched in the code and couldn't find it.

Try `FocusNode` https://api.flutter.dev/flutter/widgets/FocusNode-class.html — Constantin N., May 27 '20 at 11:18
I was aware of that "solution", per this other answer https://stackoverflow.com/questions/57273232/move-accessibility-focus-programmatically but it seems like a hack. Thanks, anyway. — Cmorales, May 27 '20 at 12:57
Please see https://api.flutter.dev/flutter/semantics/SemanticsNode-class.html. You can use `visitChildren` method to focus an item programmatically — Constantin N., May 27 '20 at 13:06

score 1 · Answer 1 · answered Jul 01 '21 at 07:50

1

You can wrap your AppBar with a Semantic node and set focused:true.

Read more here: https://api.flutter.dev/flutter/semantics/SemanticsProperties/focused.html

answered Jul 01 '21 at 07:50

tanghao

4,073
2
13
17

score 0 · Answer 2 · answered May 27 '20 at 16:51

So flutter provides a widget PreferredSize to us in which we can override its height and width, I solved my problem in this way

 Widget appBar() {
        return PreferredSize(
          preferredSize: Size.fromHeight(120.0),
          child: AppBar(
            automaticallyImplyLeading: false,
            elevation: 0,
            backgroundColor: Colors.blue,
            flexibleSpace: SafeArea(
              child: Container(
                padding: EdgeInsets.only(
                  left: 16,
                  right: 16,
                  top: 16,
                  bottom: 16
                ),
                child: Container(
                  // make any type of view
                ),
              ),
            ),
          ),
        );
      }

My example code already implemented that widget. The problem is not obtaining a custom height, it's keeping the accessibility features. — Cmorales, May 27 '20 at 22:31

Flutter: How to get accessibility focus to custom appbar

2 Answers2