Flutter: Change Tab text dynamically

Question

I am using tabcontroller and it is showing properly. I need to change the text of Tabs dynamically.

I tried searching the solution on Google and SO but so far no luck.

Here is the code.

    TabController _controller;
     @override
        void initState(){ 
           _controller = TabController(vsync: this, length: 4);
          _controller.addListener(_handleTabSelection);
         deviceInfo();
        super.initState();
        });

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

    TabBar(
               //  isScrollable: true,
               controller: _controller,
               unselectedLabelColor: Colors.redAccent,
               indicatorSize: TabBarIndicatorSize.label,
                 indicator: BoxDecoration(
                        gradient: LinearGradient(
                            colors: [Colors.redAccent, Colors.orangeAccent]),
                        borderRadius: BorderRadius.circular(50),
                        color: Colors.redAccent),
     tabs: [
                Tab(
                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                            border: Border.all(color: Colors.redAccent, width: 1)),
                        child: Align(
                          alignment: Alignment.center,
                          child: Text("Near You",
                          style: TextStyle(

                            fontSize: 12
                          ),
                          ),
                        ),
                      ),
                    ),
                Tab(

                      child: Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                            border: Border.all(color: Colors.redAccent, width: 1)),
                        child: Align(
                          alignment: Alignment.center,
                          child: Text("My State",
                          style: TextStyle(
                            fontSize: 12
                          ),
                          ),
                        ),
                      ),
                    ),

body:TabBarView(
          controller: _controller,
          children: [
            Text("TAB ONE CONTENT"),
            Text("TAB TWO CONTENT"),

          ],
          ),

_handleTabSelection() {

                   _currentIndex = _controller.index;
                    print(_currentIndex);

                     setState(() {
                  switch (_currentIndex) {
                    case 0:
                    ///Change the Tab Text

                      PrimaryColor= Color(0xffff5722);
                      SecColor= Color(0xff3f51b5);
                      break;
                      case 1:
                      PrimaryColor= Color(0xff3f51b5);
                      SecColor= Color(0xffff5722);
                      break;

I have added the relevant code only in the question otherwise it would quite long.

I want to change the text of Tab dynamically like above you can see Near You and My State are the text. I need to change these. Any advise.

Answer 1

Just Declare variables with default string which you want to show initially

String tab1 = "";
String tab2 = "";

then used both string like

              Tab(
                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.redAccent, width: 1)),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(tab1,
                      style: TextStyle(

                        fontSize: 12
                      ),
                      ),
                    ),
                  ),
                ),
            Tab(

                  child: Container(
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        border: Border.all(color: Colors.redAccent, width: 1)),
                    child: Align(
                      alignment: Alignment.center,
                      child: Text(tab2,
                      style: TextStyle(
                        fontSize: 12
                      ),
                      ),
                    ),
                  ),
                ),

Now, you can update the text dynamically with setState() whereever you want

 setState(() {
          tab1 = "Change tab 1";
          tab2 = "Change tab 2";
    });