如何使颤动的标签栏展开？答案

【问题标题】：how to make flutter tab bar expanded?如何使颤动的标签栏展开？
【发布时间】：2022-01-05 13:09:14
【问题描述】：

我正在尝试制作一个彩色的标签视图，如果标签中有更多项目，它看起来会扩大，但如果它是单个项目，它看起来并不好。我的标签现在如下所示

我怎样才能让它看起来像这样？

这是我的代码，我尝试过扩展小部件，但它不起作用。请帮忙

PreferredSizeWidget _buildAppBar() {
return AppBar(
  bottom: PreferredSize(
    preferredSize: const Size.fromHeight(50),
    child: _buildTabBar(),
  ),
  title: Text(AppLocalizations.of(context).translate('dash_board')),
  actions: _buildActions(context),
);}


Widget _buildTabBar() {
return Observer(builder: (context) {
  var items = _dashStore.dashData?.data?.dashboardShopsModels;
  if (items == null) {
    return Container(
      color: Colors.green,
    );
  } else {
    return Expanded(
      child: ColoredBox(
        color: Color.fromARGB(255, 9, 26, 74),
        child: TabBar(
          labelColor: Colors.white,
          indicatorWeight: 4,
          indicatorColor: Color.fromARGB(255, 255, 0, 105),  
          unselectedLabelColor: Colors.white,             
          tabs: [
            for (var item in items) Tab(text: '${item.shopName}'),
          ],
          isScrollable: true,
          labelPadding: EdgeInsets.only(left: 50, right: 50),
        ),
      ),
    );
  }
});}

【问题讨论】：

标签： flutter dart flutter-layout flutter-design

【解决方案1】：

用 SizedBox 包裹 TabBar

ColoredBox(
  color: Color.fromARGB(255, 9, 26, 74),
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: TabBar(..),
  ),
)

【讨论】：