Блог

У меня есть вид панели вкладок с 3 вкладками, Email, Profile, Complete . Теперь в Email таком виде есть кнопка:

1. Вкладка электронной почты

                     widget.theTabController.animateTo(
                      (widget.theTabController.index   1),
                    );
 

При нажатии на эту кнопку вкладка меняется, а цвет индикатора меняется.
Но есть ли какой-нибудь способ сохранить цвет индикатора Email tab таким же, как у Profile tab подобных:

Ниже приведен код моего представления панели вкладок.

Вид панели вкладок

 class SignupEmail extends StatefulWidget {
  @override
  _SignupEmailState createState() => _SignupEmailState();
}

class _SignupEmailState extends State<SignupEmail>
    with SingleTickerProviderStateMixin {
  bool entryPermission = false;
  final List<Tab> myTabs = <Tab>[
    new Tab(text: 'EMAIL'),
    new Tab(text: 'PROFILE'),
    new Tab(text: 'COMPLETE'),
  ];
  TabController _tabController;
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: myTabs.length);
    _tabController.addListener(() {
      print("Selected Index: "   _tabController.index.toString());
    });
  }

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

  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: SingleChildScrollView(
          child: Padding(
            padding:
                const EdgeInsets.only(left: 16, right: 16, top: 50, bottom: 0),
            child: Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  MainTitle(),
                  Container(
                    child: DefaultTabController(
                        length: myTabs.length,
                        child: Column(
                          children: [
                            Container(
                              // height: 50,
                              width: double.infinity,
                              child: IgnorePointer(
                                child: TabBar(
                                  controller: _tabController,
                                  unselectedLabelColor:
                                      Color.fromRGBO(0, 0, 0, 0.87),
                                  labelColor: Color(0xff9E9E9E),
                                  indicatorColor: Color.fromRGBO(98, 0, 238, 1),
                                  tabs: myTabs,
                                ),
                              ),
                            ),
                            SizedBox(
                              height: 28,
                            ),
                            Container(
                              width: double.infinity,
                              height: 500,
                              child: TabBarView(
                                  // physics: NeverScrollableScrollPhysics(),
                                  controller: _tabController,
                                  children: [
                                    EmailTab(
                                      theTabController: _tabController,
                                    ),
                                    ProfileTab(
                                      theTabController: _tabController,
                                    ),
                                    CompleteEmail()
                                  ]),
                            ),
                          ],
                        )),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

 

Я думаю, что единственный способ — создать навигацию по вкладкам самостоятельно. Недавно у меня была аналогичная проблема, когда я хотел, чтобы цвет вкладки соответствовал цвету экрана. Я просто создал стек с

                     Positioned(
                        left: safeAreaPos.dx,
                        width: safeAreaPos.dx   safeAreaSize.width,
                        bottom: 0,
                        child: Row(
                          children: [
                            for (var i = 0; i < 4; i  )
                              TabButton(i, context)
                          ],
 

и визуализируйте мою вкладку

   Widget TabButton(int tabIndex, BuildContext context) {
    final List<String> labels = ['A', 'B', 'C', 'D'];
    final List<double> labelSizes = [12, 16, 16, 12];
    return SizedBox(
      height: 50, width: safeAreaSize.width / 4,
      child:
        FlatButton(
          color: bgTabColors[tabIndex],
          padding: EdgeInsets.all(0),
          textColor: CupertinoColors.white,
          child: Text(labels[tabIndex], style: TextStyle(fontSize: labelSizes[tabIndex]),),
          onPressed: () =>
            BlocProvider.of<ProjectKanbanBloc>(context).add(ProjectKanbanTabRequested(tabIndex)),
        )
    );
  }
}