Flutter: How to change text outside of TabBar on swiped according to the tab been selected

Question

I want to change the text outside of the TabBar and TabBarView. As in the below image, If tab is selecting "Transfer" tab then the text above the TabBar should be "Transfer" and if the tab is selecting "Request Money" then text should be "Request Money". I tried to using TabController but it only changes the text inside the TabBarView on swipe.

I was only able to change the text on press of TAB using onTap, but can't achieve with swipe.

Transfer Tab Image Request Tab Image

Summary: How to change the title text according to the selected tab on SWIPE.

class _TransferPageState extends State<TransferPage> with SingleTickerProviderStateMixin {
  List<String> _tabNameList = ["Transfer", "Request Money"];
  String _selectedTabName = "Transfer";

  final List<Tab> transferTabs = <Tab>[
    Tab(text: "Transfer"),
    Tab(text: "Request Money",)
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: transferTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        body: ResponsiveSafeArea(
          builder: (context, size) {
            return Column(
              children: <Widget>[
                TopBarWithText(title: _selectedTabName,),
                SizedBox(height: 20.0,),
                TabBar(
                  onTap: (value) {
                    setState(() {
                      _selectedTabName = _tabNameList[value];
                    });
                  },
                  controller: _tabController,
                  tabs: transferTabs.map((Tab tab) {
                    final String label = tab.text;
                    return Container(
                      height: 30.0,
                      child: Text(
                          label,
                          style: TextStyle(fontSize: 14.0, color: Colors.black)
                      ),
                    );
                  }).toList(),
                ),
                Expanded(
                  flex: 1,
                  child: TabBarView(
                    controller: _tabController,
                    children: transferTabs.map((Tab tab) {
                      final String label = tab.text;
                      return label == "Transfer"
                      ? _transferTabContent()
                      : _requestFundTabContent();
                    }).toList(),
                  ),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}

Lots of thanks in advance =D.

Answer 1

You have a very complicated code, Lets make it simple. Wrap Tabbar in an Appbar instead of a Column. Here is a simple code to get started:

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(tabs: [
        Tab(
          child: Text('Tab 1')),
        Tab(
         child: Text('Tab 2'),),
      ]),
     ),
    body: TabBarView(
     children: <Widget>[
       Text('first tab items'),
       Text('second tab items'),
      ],),
    ));

I think you will be able to do it. Im sorry for if there are any misplacement of indentation or brackets. Happy coding!