Flutter customize AppBar actions and pass Appbar & Body togehter up to parent?

Question

I am new to flutter and I try to build an application, which has the stateful widget TabScreen as main route, that contains a Scaffold. The body of the Scaffold gets built based on the selected index from the bottomNavigationBar, which works fine. My problem is the management of actions of the AppBar. The AppBar should have different actions for each 'body Screen', but the actions influence data that lives inside the different body Screens.

For example: Inside the Screen1 class we have a variable List list1. For Screen1 the AppBar should provide a "Clear list1" option, to delete all list1-items, but on Screen2 it should provide a "Clear Screen2 list" option.

My idea is to create a new AppBar class, import it in my Screen1, Screen2, Screen3 classes and create and configure the appBars inside these screens as explained in this post. Is there a way how I can define not only the body but also the AppBar in my Screen1 class and return both of them up to the TabScreen parent? I think this would be the easiest solution but I don't know how to do it better.

    class _TabScreenState extends State<TabScreen> {
    
    int _selectedPageIndex;

    final List<Map<String, Object>> _pages = [
        {
          'page': Screen1(),
          'title': 'Screen1',
        },
        {
          'page': Screen2(),
          'title': 'Screen2',
        },
        {
          'page': Screen3(),
          'title': 'Screen3',
        },
      ];
    
    @override
      Widget build(BuildContext context) {
    
    final appBar = AppBar(
          title: Text('Screen X'),
          actions: [
            PopupMenuButton(
              onSelected: (selectedValue) {
                setState(() {
                  if (selectedValue == 0) {
                    filterOn = true;
                    Provider.of<Screen1Data>(context, listen: false).clear();
                  } else {
                    Provider.of<Screen1Data>(context, listen: false).reset();
                    filterOn = false;
                  }
                });
              },
              icon: Icon(Icons.more_vert),
              itemBuilder: (_) => [
                PopupMenuItem(child: Text('Reset'), value: 0),
                PopupMenuItem(
                    child: Text('Clear List'), value: 1),
              ],
            ),
          ],
        );
    
    
    return Scaffold(
          appBar: appBar,
          body: _pages[_selectedPageIndex]['page'],
          bottomNavigationBar: bottomBar,
        ); 
}

The Screen1 content could look like this:

class Screen1 extends StatefulWidget {

  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  List<String> list1;
  
  @override
  Widget build(BuildContext context) {
     return Text(list1[0]);
  }  

}

Answer 1

Add actions to the _pages list:

final List<Map<String, Object>> _pages = [
        {
          'page': Screen1(),
          'title': 'Screen1',
          'actions': <Widget>[/* List of actions for screen1 */] //<-- optional just in case you need default actions that depend on parent as well
        },
        {
          'page': Screen2(),
          'title': 'Screen2',
          'actions': <Widget>[/* List of actions for screen2 */] //<-- optional just in case you need default actions that depend on parent as well
        },
        {
          'page': Screen3(),
          'title': 'Screen3',
          'actions': <Widget>[/* List of actions for screen3 */] //<-- optional just in case you need default actions that depend on parent as well
        },
      ];

Create a function that builds a custom app bar:

AppBar _buildAppBar({String title, List<Widget> actions}) => AppBar(
  title = title,
  actions = actions,
);

Then inside the scaffold, you build custom app bars per page:

 return Scaffold(
          appBar: _buildAppBar(
                     title:  _pages[_selectedPageIndex]['title'],  
                     actions: _pages[_selectedPageIndex]['actions']
                     // or if you have specific actions that are only visible form this page you can do
                     actions: [
                       /* list of page1 only actions*/

                     ]
                     // or if you want to combine both default and specific actions you can do
                     actions: [
                       ... _pages[_selectedPageIndex]['actions'],
                       /* list of actions that are specific to page1*/

                     ]
                  ),
          body: _pages[_selectedPageIndex]['page'],
          bottomNavigationBar: bottomBar,
        ); 

Now you will get a custom app bar per page including custom actions