Autofocus TextField inside a TabView (DefaultTabController) in Flutter

0
votes

I am relatively new to Flutter (I don't know Dart, Java or any OOP languages) and creating a simple app using DefaultTabController.

My widget tree on my InputScreen roughly looks like this :

DefaultTabController
└── Scaffold
    ├── AppBar
    │   └── TabBar
    └── TabBarView
        ├── ListBox
        ├── ListBox
        ├── ListBox
        └── ListBox

A ListBox is a stful widget to hold my ListViewBuilder, and a MessageBar / TextField.

The behaviour I want to achieve is when users changing the Tab from one to another, the text field inside the TabBarView -> ListBox -> MessageBar gets autofocus so users don't need to tap on it. Plus, the text that already written on previous Tab still exists.

retrospective app using defaulttabcontroller

What I tried so far :

Using TabController and add it to both TabBarView and TabBar

I add with SingleTickerProviderStateMixin on my ListBoxState and set tabController.addListeners() on initState().

final TabController tabController = TabController;
...
@override
  void initState() {
    super.initState();
    tabController = TabController(vsync: this, length: 4);
    tabController.addListener(() {
        print(tabController.index);
        // What to do here ?
    });
  }
}

FocusNode

I set the FocusNode inside each ListBox and after a Tab is initiated, I called the

    myFocusNode.requestFocus()

Didn't work (?). Should I make a different "myFocusNode" for each ListBox? I can not get the concept correctly :(

I put my current input_screen.dart file on my gist

1
flutterdart

1 Answers

0
votes

You can to do:

@override
void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) =>FocusScope.of(context).requestFocus(myFocusNode));
}