title: Is there an expandable tab bar in Flutter?
body: <p>I received a requirement that it needs an expandable tab bar, like <strong>ExpansionTile</strong> in Flutter,  when there are over 5 tabs.
  (5 tabs show in tab bar, and all tabs show in expanded list.)</p>
  <p>I made a custom Class from <strong>ExpansionTile</strong> likes below and make work like what <strong>TabBar</strong> do, and other tabs were hided by using <strong>Offstage</strong>.</p>
  <p><a href="https://i.stack.imgur.com/t98xh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t98xh.png" alt="enter image description here" /></a></p>
  <p>But, there is a question here.
  Two of these tabs are hiding, but the space and controller still work with 7 tabs. When I choose Tab7, the animation of controller will go to the position where Tab7 must show.</p>
  <p><a href="https://i.stack.imgur.com/DCLcV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DCLcV.png" alt="enter image description here" /></a></p>
  <p>I think maybe I can just use <strong>ListView</strong> to build a tab bar and make it works like origin <strong>TabBar</strong>, so as <strong>TabBarView</strong>.
  But this way will heavily change the project files, so I consider that is there a proper(or easy) way to do it.</p>
  <pre><code>Container(
            alignment: Alignment.topCenter,
            child: SizedBox(
              width: tabBarWidth! ? null : 315.w,
              height: toolbarHeight,
              child: Scaffold(
                backgroundColor: Colors.transparent,
                resizeToAvoidBottomInset: false,
                appBar: AppBar(
                  elevation: 0,
                  toolbarHeight: toolbarHeight,
                  backgroundColor: Colors.transparent,
                  automaticallyImplyLeading: false,
                  flexibleSpace: SafeArea(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Expanded(
                          child: TabBar(
                            labelPadding: EdgeInsets.all(0),
                            indicatorPadding: indicatorLengthNormal!
                                ? EdgeInsets.zero
                                : EdgeInsets.only(left: 8.0, right: 8.0),
                            indicator: CustomUnderlineTabIndicator(
                              borderSide: BorderSide(
                                color: widget.indicatorColor == null
                                    ? AppColor.main_color!
                                    : widget.indicatorColor!,
                                width: indicatorWeight!,
                              ),
                              lineStroke: strokeStyle!,
                            ),
                            labelColor: widget.labelColor == null
                                ? AppColor.main_color
                                : widget.labelColor,
                            labelStyle: TextStyle(
                              fontSize: 12.sp,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'MicrosoftYaHei',
                              color: widget.labelColor == null
                                  ? AppColor.main_color
                                  : widget.labelColor,
                            ),
                            unselectedLabelColor:
                                widget.unselectedLabelColor == null
                                    ? AppColor.main_text_color
                                    : widget.unselectedLabelColor,
                            unselectedLabelStyle: TextStyle(
                              fontSize: 12.sp,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'MicrosoftYaHei',
                              color: widget.unselectedLabelColor == null
                                  ? AppColor.main_text_color
                                  : widget.unselectedLabelColor,
                            ),
                            tabs: [
                              for (int i = 0; i &lt; widget.tabBarList.length; i++)
                                widget.isNeedTranslate!
                                    ? Offstage(offstage:i &gt; 4 &amp;&amp; widget.isPromoPage!, child:Tab(text: Translations.of(context)!.text(widget.tabBarList[i])))
                                    : Offstage(offstage:i &gt; 4 &amp;&amp; widget.isPromoPage!, child:Tab(text: widget.tabBarList[i]))
                            ],
                            controller: widget.tabController,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )
  </code></pre>