Flutter Drawer customize AppBar in screens

Question

I'm new to flutter and I am not sure how to structure my new App.

I have a drawer which shows differents screens(as fragment style in Android development) and I want to change the AppBar for each of the screens(add buttons or even change the app bar to sliverAppBar), but I don't how to achieve this.

class Main extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: new ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyDrawer(),
    );
  }
}

And in that Drawer:

return Scaffold(
  appBar: AppBar(
    title: Text(widget.appDrawerItems[_selectedDrawerIndex].title),
  ),
  drawer: new Drawer(
    child: new ListView(
      children: <Widget>[            
        new Column(children: appDrawerOptions),
        new Divider(),
        new Column(children: configurationDrawerOptions)
      ],
    ),
  ),
  body: _getDrawerItemWidget(_selectedDrawerIndex),
);

Could you point me in the right direction?

Solution

I'm assuming that you're pushing screens using Navigator.push() or Navigator.pushNamed() in your Drawer, and that the new screens you push are Widgets. if these new screens are Scaffolds, instead of, say, Columns, you can define the appBar for each of them. Here is an example:

In your drawer, wherever you call Navigator.pushNamed():

ListTile(
 title: DrawerText(text: 'Second Screen'),
 onTap: () {
   Navigator.pushNamed(context, 'my_second_screen');
 },
),

In your main:

void main() {
  runApp(MaterialApp(
    home: MyHomeScreen(title: 'MyHomeScreen'),
    routes: <String, WidgetBuilder>{
      // define the routes
      'my_second_screen': (BuildContext context) => MySecondScreen(),
    },
  ));
}

And the screen you want to navigate to, MySecondScreen, would look like:

class MySecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // This is your custom app bar specific for this screen.
      ),
      body: SecondScreenBody(),
      drawer: MyDrawer(),
    );
  }
}

Hope this helps.

Comments

[Andrey Turkovsky]

I don't understand your problem. When you select item on drawer - just open another screen with another Scaffold and another AppBar

[niegus]

Instead of navigating between screens, onTap I'm changing the widget inside the body region(like I'm used to in android). If I do it as you suggested and navigate between screens I have to add the drawer to all of them. Isn't that way worse?

[Andrey Turkovsky]

You can create your custom drawer and use it to avoid boilerplate. And in this case it won't be worse

[niegus]

Instead of navigating between screens, onTap I'm changing the widget inside the body region(like I'm used to in android). If I do it as you suggested and navigate between screens I have to add the drawer to all of them. Isn't that way worse?

[Keerti Purswani]

I don't think adding drawer in various screens is worse, it keeps the code a lot cleaner but I guess it is subjective, you can make a switch case for app bar and body of your screen and update the value when selected from drawer. (Similar to how radio buttons or tab controller work). Also, consider the behavior you want when the user presses back, if you use navigation between screens - it will navigate back but if you use switch case then obviously that won't happen. Choose your approach according to your use case. Hope that helps. :)