Change AppBar content dynamically on Navigation through App? - flutter

Question

I've got my Navigation in my App working, but I would like to change the AppBar Title dynamically, depending on which page is currently displayed.
Main Problem is, I'm using a TabBarView, to show the main pages, but I can also get to some sub pages. That part is now working fine, but I can't figure out, how I could make the AppBar change depending on the displayed page / sub-page
Here is the main class, which holds the AppBar:
class AppView extends StatefulWidget {
const AppView({Key? key}) : super(key: key);
#override
State<AppView> createState() => _AppViewState();
}
class _AppViewState extends State<AppView> with TickerProviderStateMixin{
late TabController _controller;
#override
void initState(){
super.initState();
_controller = TabController(length: 6, vsync: this);
_controller.addListener(() {
if(navKey.currentState!.canPop()){
navKey.currentState!.pop();
}
});
}
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
if(navKey.currentState!.canPop()) {
navKey.currentState!.pop();
}
return false;
},
child: Scaffold(
appBar: AppBar(
title: HeadLine(
"Test",
color: white,
),
),
body: Navigator(
key: navKey,
onGenerateRoute: (_) => MaterialPageRoute(
builder: (_) => TabBarView(
controller: _controller,
physics: NeverScrollableScrollPhysics(),
children: [
HomeScreen(),
ChatOverviewScreen(),
ForumOverviewScreen(),
CalendarScreen(),
GroupScreen(),
ProfileScreen()
],
)
),
),
bottomNavigationBar: BottomBar(
controller: _controller,
)),
);
}
}
For Testing, theres currently just a button which calls a sub page on one of these pages:
class ChatOverviewScreen extends StatelessWidget {
const ChatOverviewScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Center(
child: PrimaryButton(
text: "Do Stuff",
onPressed: () {
navKey.currentState!.push(ChatDetailScreen.route());
},
),
);
}
}
navKey is set as global variable in my main file via
final GlobalKey<NavigatorState> navKey = GlobalKey<NavigatorState>();
Basicaly I want to set the Title of the AppBar depending on which page / subpage is shown and when it is a sub page, there should also be an arrow to get back.

Answer 1

You should do something like this:
Widget _buildAppBarTitle(int index) {
String title = '';
switch (index) {
case 0:
title = 'YOUR TITLE';
break;
... other case...
}
return Text(title);
}
Scaffold(
appBar: AppBar(
title: _buildAppBarTitle(_currentIndex),
),
body: Navigator(
...
),
bottomNavigationBar: BottomNavigationBar(
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
currentIndex: _currentIndex,
items: [...],
),
)
You can use enum to identify the pages, also, you can use some state manager.
Flutter State management