CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-design
Favaz
Favaz

Reputation: 73

how to make flutter tab bar expanded?

I'm trying to make a colorful tab view, it look expanded if there are more items in tab, but if it is single item it doesn't look good. my tab look like below now

enter image description here

how can I make it look like this?

enter image description here

this is my code, I've tried expanded widget but it didn't work. please help

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

Upvotes: 2

Views: 2398

Answers (1)

Kherel
Kherel

Reputation: 16225

wrap TabBar with SizedBox

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

Upvotes: 2

Related Questions