flutter - 如何使 flutter 标签栏展开？

Question

我正在尝试制作一个彩色选项卡 View ，如果选项卡中有更多项目，它看起来会扩展，但如果它是单个项目，它看起来不太好。 我的选项卡现在如下所示

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

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

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

Answer 1

用 SizedBox 包裹 TabBar

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