如何在Flutter的Tabbar中动态打开一个tab？

Question

So basically I have a widget which I Navigate to:

Navigator.of(context).pushNamed(Purchases.route, arguments: {"index": index});

The Purchases widget is simply an empty Widget with nothing except two tabs using TabBar, TabBarView, and TabController . The tabs are for pending and delivered . The idea is, when I navigate to the widget, the correct tab is the initial tab that is open.

For example: When I click pending on the previous widget, the navigator navigates to the Purchases widget and the pending tab is the initial tab that is open. When I click delivered on the previous widget, the navigator navigates to the Purchases widget and the delivered tab is the initial tab that is open.

I pass the index of the tab that I want opened and use it in the initState method and it works, however only partially .

void initState() {
    super.initState();
    _controller = TabController(length: 2, vsync: this);
    Future.delayed(Duration.zero, () {
      final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
      int index = args["index"];
      _controller.animateTo(index);
    });
}

This implementation works, however the tab isn't really initially open, its only animated after the tab at index 0 is opened. This is bad performance since I plan on making API calls whenever the tabs open and if the user didn't open/care for the tab at index 0, then its a useless API call.

I have tried:

void initState() {
    super.initState();
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    int index = args["index"];
    _controller = TabController(length: 2, vsync: this, initialIndex: index);
}

This doesn't work because context isn't available for use and results in an error.

How could I properly get this to work? Thank You!

Answer 1

So I did a little digging and found this to be the solution:

void didChangeDependencies() {
    super.didChangeDependencies();
    final args = ModalRoute.of(context)!.settings.arguments as Map<String, dynamic>;
    int index = args["index"];
    _controller = TabController(length: 2, vsync: this, initialIndex: index);
}

I guess initState wasn't the correct approach. didChangeDependencies does get called after every build whereas initState doesn't. Something to consider.

Answer 2

Setting an initialIndex to the TabController is the right approach.

In order to have access to the context , you need call your API inside a separate function and then call it inside initState .

void apiCall(){
  //Call here your API (context accessible).
}

@override
initState((){
  ...
  apiCall();
  ...
});