Flutter: How to get accessibility focus to custom appbar

user_1203176 0
Viewed 1138

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.

talkback material-design flutter accessibility
2 Answers
user_26934760

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
                ),
              ),
            ),
          ),
        );
      }
user_68752490
Related