CODEWITHSUNDEEP
flutternavigatorappbar
user9918
user9918

Reputation: 121

Flutter navigation with generalized AppBar

I am currently writing a Flutter app. I have got a class AdvancedAppBar which extends AppBar and is used as gerneralized AppBar for most of the screens. It is is a separate file. The AdvancedAppBar has a FlatButton and a PopUpMenu as children. By pushing these buttons I would like to navigate to another screen. At the moment, I use the Navigator class for navigation between the screens but as far as I know, this assumes a BuildContext and I don't know how or if it is possible at all to define a BuildContext for an AppBar.

How can realize this navigation?

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/notifications': (context) => NotificationScreen(),
      },
    );
  }
}


class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AdvancedAppBar(),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new MaterialButton(
              height: 40.0,
              minWidth: 300.0,
              color: Colors.blue,
              textColor: Colors.white,
              child: new Text("Nachrichten", textScaleFactor: 2.0,),
              onPressed: (){
                Navigator.pushNamed(context, '/notifications');
                },
            )
          ],
        ),
      ),
    );
  }
}


class AdvancedAppBar extends AppBar{


  AdvancedAppBar({Key key}) : super(
        key: key,
        title:
        Container(child: ConstrainedBox(
        constraints: BoxConstraints.expand(),
          child: FlatButton(
          onPressed: () {
            // here I would like to navigate to another screen
          },
         padding: EdgeInsets.all(0.0),
         child: Image.asset('assets/images/Logo.png')
         )
         )
         ),
        actions: <Widget>[
          PopupMenuButton<PopUpStates>(
  onSelected: (PopUpStates result) {
    switch (result) {
      case PopUpStates.settings: {
      // here I would like to navigate to another screen
      } 
        break;
      case PopUpStates.logout: {
      // here I would like to navigate to another screen
      } 
      break;
      default:
    }},
  itemBuilder: (BuildContext context) => <PopupMenuEntry<PopUpStates>>[
    const PopupMenuItem<PopUpStates>(
      value: PopUpStates.settings,
      child: Text('Einstellungen'),
    ),
    const PopupMenuItem<PopUpStates>(
      value: PopUpStates.logout,
      child: Text('Ausloggen'),
    ),
  ],
)
        ],
        automaticallyImplyLeading: false
  );

}

Upvotes: 2

Views: 4597

Answers (1)

Harkunwar
Harkunwar

Reputation: 683

Let's create modify your constructor for AdvancedAppBar to look something like this so you can pass functions

AdvancedAppBar({Key key, Function settings, Function logout})

Now we can use these arguments in the onSelected argument, which would now look like this

onSelected: (PopUpStates result) {
    switch (result) {
      case PopUpStates.settings: {
        settings();
      } 
        break;
      case PopUpStates.logout: {
        logout();
      } 
      break;
      default:
    }},

lastly, let's pass the navigator functions from the HomeScreen

appBar: new AdvancedAppBar(
  settings: () => Navigator.pushNamed(context, '/settings'),
  logout: () => Navigator.pushNamed(context, '/logout'),
),

Upvotes: 1

Related Questions