Cannot get TabBar to swap page programaticly (AnimateTo ) to work(Flutter, Dart)

Question

I have tried so many times, but I cannot get the flutter TabBar AniMateTo (the code to switch to other page) to work. I have tried many different examples. I am passing the function setTabView(int) to a sub page, and on that page change page index. It triggers, but nothing happens. Stays on the same page.

I was also wondering, is it possible to modify text on the top of the tabbar (Title) programaticly from other sub pages? Example on primary page I want set title to "Welcome" and changing to page two I want to set title to "Second page". I tried to do it withe the function named setTekst (in my code) but it dosent work fully.

Top of my code

class HovedSideTab extends StatefulWidget {
  @override
  State<HovedSideTab> createState() => _HovedSideTabState();
}

My tab code

class _HovedSideTabState extends State<HovedSideTab> with SingleTickerProviderStateMixin   {

  late TabController _tabController;
  int _selectedIndex = 0;
  String headerTekst = "";

  void setTabView(int nr) {

    log().prnt("hovedsidetab", "Går til tab ${nr}      ${_tabController.index}");

    setState(() {
      _tabController.animateTo(nr);

    });
  }


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



  void setTekst(String tekst) {
    setState(() {
      headerTekst = tekst;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
        child: Scaffold(
          backgroundColor: appBakgrunnsFarge,
          body: DefaultTabController(
            length: 5,
            child: Scaffold(
              appBar: AppBar(
                centerTitle: true,
                elevation: 0,
                bottom: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.home)),
                    Tab(icon: Icon(Icons.apartment)),
                    Tab(icon: Icon(Icons.help)),
                    Tab(icon: Icon(Icons.local_parking_rounded)),
                    Tab(icon: Icon(Icons.question_mark)),
                  ],
                ),
                actions: <Widget>[
                  IconButton(onPressed: () {     Navigator.push(context,MaterialPageRoute(builder: (context) => OmAppen()),);  }, icon: Icon(Icons.help, color: iconColor, size: iconSize,),),
                  IconButton(onPressed: () {     Navigator.push(context,MaterialPageRoute(builder: (context) => MinSide()),);  }, icon: Icon(Icons.settings, color: iconColor, size: iconSize,),),
                ],
                title: Text('Park'),
              ),
              body: TabBarView(
                children: [
                  Container(child: HovedSide(), ),
                  Container(child: VelgSameie()),
                  Container(child: SameieOgPlassReg()),
                  Container(child: Ledig(callback: setTabView)),
                  Container(child: Onskes()),


                ],
              ),
            ),

          ),

        ),
      );
  }
}

I have googled and tried many different examples

Answer 1

You have to pass _tabController to the controller parameter of the TabBar.

TabBar(
  controller: _tabController,
  // ...
)

And since you're using controller, wrapping the TabBar with DefaultTabController is not needed.

Also you don't need to wrap _tabController.animateTo(nr); with setState.

See:

• TabController class
• TabBar class