3

First of all, I might have got it wrong on how to design to solve my problem, so feel free to come up with completely different ideas.

I have a page in my app with tabs. These tabs inherit from a common class so they can have a similar interface to the page parent. The page has an app bar which can of course hold action. The problem now is that for one of the tabs I want to add an Edit action and when pressing this I will set an edit mode to that tab. And then it would make sense to change the action to Save.

I'm not sure how I can dynamically control this without the parent page having custom code for that tab. I just want the tab to tell the parent it wants an action (that I can do), but I have no idea how to do it dynamically (change from Edit to Save) as the tab is a StatefulWidget (which has only final members). I don't know how the State of the tab could notify this to the parent in a nice way. What do you think?

UglyBob
  • 247
  • 1
  • 14

1 Answers1

2

This is how I did it.

Create a Notification derived class:

class UpdateActionBarActionsNotification extends Notification {

  final List<Widget> appBarActions;
  UpdateActionBarActionsNotification({
    this.appBarActions,
  });

}

Make sure the Widget that builds the AppBar listens to this notification:

NotificationListener<UpdateActionBarActionsNotification>(
  onNotification: (notification) {
    setState(() { _appBarActions = notification.appBarActions; });
    return false;
  },
  child: ...

_appBarActions is a state property that you will assign to the actions property of the AppBar.

Each tab can then use this notification to get its actions displayed with:

scheduleMicrotask(() {
  UpdateActionBarActionsNotification(
    appBarActions: [
      ...
    ],
  ).dispatch(context);
});

The whole logic is available in https://github.com/nbonamy/stanley/blob/master/lib/tabs.dart. The example (https://github.com/nbonamy/stanley/blob/master/example/lib/main.dart) shows how to use it.

nbonamy
  • 51
  • 12