CODEWITHSUNDEEP
flutternavigation-drawerdrawer
niegus
niegus

Reputation: 1828

Flutter Drawer customize AppBar in screens

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?

Upvotes: 2

Views: 2169

Answers (2)

jurrdb
jurrdb

Reputation: 482

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.

Upvotes: 1

Keerti Purswani
Keerti Purswani

Reputation: 5361

I am not sure if I understood your question properly. If you want to open different screens when you press drawer items, you can use ListTile and using onTap property, you can navigate to your screen (using Navigator).

You can use tabcontroller corresponding to fragments. See this for the same.

Upvotes: 0

Related Questions