Tabbar with unique actions per tab

Question

I have a Tabbar with two tabs. The Tabbar has its own Appbar which is used by both tabs. How do I have the sort button run custom (set state) functions inside each tab's stateful widget? Alternatively, is it possible for each tab to have its own unique Appbar? I am not sure what best approach is here.

Example method inside one of the tabs:

class _TabAState extends State<TabA> {
  void sort() {
    setState(() {
    myList.sort((a, b) => b.dueDate.compareTo(a.dueDate));
    });
  }

...

Sort button:

IconButton(
  icon: Icon(Icons.sort),
  onPressed: () => DefaultTabController.of(context).index == 0
      ? TabA.sort() // Does not work
      : TabB.sort(), // Does not work
),

I'm having a hard time understanding what you are trying to achieve. You want to have 2 different AppBars on the parent that holds the TabBar depending on which Tab is selected? — J. S., Dec 18 '19 at 16:05
Two different app bars was just one approach I thought may make this possible. Ultimately, I want to run a sort function which is called from an appbar button. However, the sort function needs to run a specific function inside of the stateful tab widget. — Ned, Dec 18 '19 at 18:21

score 2 · Accepted Answer · answered Dec 18 '19 at 16:04

Regarding your concern if this approach is the best approach:

From the documentation

The Scaffold was designed to be the single top level container for a MaterialApp and it's typically not necessary to nest scaffolds.

Based from this statement, I suggest that it's probably not a good idea to nest multiple Scaffold inside another Scaffold. This is related to your concern, whether to have nested AppBar inside a Scaffold, given that you can only have one AppBar per Scaffold.

I personally do not recommend the calling static or non static method from other Flutter Widget classes (eg. widget that serves as a standalone screen for your app) for executing the business logic of your application. Perhaps, you can continue implementing the business logic of your application using widgets such as ScopedModel and architectural patterns such as BloC, Redux or Mobx.

Further reading:

Thank you for this information. This is my first mobile application and had to take a deep dive into state management options yesterday and today. I got it working by utilizing the `provider` package and storing my list in a more global/accessible location which then uses `notifyListeners()` to update to list in the tab. — Ned, Dec 20 '19 at 05:46
Great. That's good thing to know. Yes, `provider` does the job as well for you case. — Joshua de Guzman, Dec 20 '19 at 05:52
Hey, I'm having a similar problem, could anyone give an opinion on: https://stackoverflow.com/questions/62392702/how-to-implement-the-search-action-for-each-tab-in-tabbar — notarealgreal, Jun 16 '20 at 11:50

Tabbar with unique actions per tab

1 Answers1