Flutter: динамическое изменение текста вкладки - PullRequest
Новая
       0

Flutter: динамическое изменение текста вкладки

1 голос
/ 29 мая 2020

Я использую tabcontroller, и он отображается правильно. Мне нужно динамически изменять текст вкладок.

Я пробовал искать решение в Google и SO, но пока не повезло.

Вот код. 

    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;

Я добавил соответствующий код только в вопросе, иначе это было бы довольно долго.

Я хочу динамически изменить текст вкладки, как указано выше, вы можете увидеть Рядом с вами и Мои Состояние - это текст. Мне нужно это изменить. Любой совет.

1 Ответ

2 голосов
/ 29 мая 2020

Просто объявите переменные со строкой по умолчанию, которую вы хотите показать изначально 

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

, затем использовали обе строки, например 

              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
                      ),
                      ),
                    ),
                  ),
                ),

Теперь вы можете динамически обновлять текст с помощью setState() куда хотите 

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