Flutter change main appbar title on other pages

Question

Looking for some assistance with changing the AppBar title on subsequent pages, so me being tabs and some not. MyApp is defined on the authentication page of my app. I then goto a new page that holds the tabs, then I have other pages off some of the tab pages, what I want to be able to do is, instead of putting another AppBar under the main one, I just want to change the title of the main AppBar when I am on any of the other pages.

Any ideas how to do this, I saw 1 example that did not fit because my tabs are setup different and could not make it fit, thought maybe there was a way to define the title initially so that I can change state or something and change the title.

Any ideas or thoughts on this?

Answer 1

You can add a TabController and add listen to it such that you call setState whenever you are switching between the Tabs, and change the AppBar title accordingly.

import "package:flutter/material.dart";

void main(){
  runApp(new MaterialApp(home:new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
  final List<MyTabs> _tabs = [new MyTabs(title: "Teal",color: Colors.teal[200]),
  new MyTabs(title: "Orange",color: Colors.orange[200])
  ];
  MyTabs _myHandler ;
  TabController _controller ;
  void initState() {
    super.initState();
    _controller = new TabController(length: 2, vsync: this);
    _myHandler = _tabs[0];
    _controller.addListener(_handleSelected);
  }
  void _handleSelected() {
    setState(() {
       _myHandler= _tabs[_controller.index];
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(_myHandler.title),
        backgroundColor: _myHandler.color,
        bottom: new TabBar(
            controller: _controller,
            tabs: <Tab>[
              new Tab(text: _tabs[0].title,),
              new Tab(text: _tabs[1].title,)
            ],
      ),),
    );
  }
}

class MyTabs {
  final String title;
  final Color color;
  MyTabs({this.title,this.color});
}

Answer 2

With the little help of above answer, I could write a simple and beginner friendly code.

• The concept is easy, get current tab index and change title with set state. You need to "detect" when the active tab is changed. That is why we add listener (the one who detects CHANGE, AND ACTS)

• Let me know in comments if below code doesn't make sense

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  TabController _tcontroller;
  final List<String> titleList = ["Home Page", "List Page", "Message Page"];
  String currentTitle;

  @override
  void initState() {
    currentTitle = titleList[0];
    _tcontroller = TabController(length: 3, vsync: this);
    _tcontroller.addListener(changeTitle); // Registering listener
    super.initState();
  }

  // This function is called, every time active tab is changed
  void changeTitle() {
    setState(() {
      // get index of active tab & change current appbar title
      currentTitle = titleList[_tcontroller.index];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(currentTitle),
        centerTitle: true,
        bottom: TabBar(
          controller: _tcontroller,
          tabs: <Widget>[
            Icon(Icons.home),
            Icon(Icons.format_list_bulleted),
            Icon(Icons.message),
          ],
        ),
      ),
      body: TabBarView(
        controller: _tcontroller,
        children: <Widget>[
          Center(child: Text(titleList[0])),
          Center(child: Text(titleList[1])),
          Center(child: Text(titleList[2])),
        ],
      ),
    );
  }
}