Flutter: How layout like spaceBetween of Tabbar

user_10883334 0
Viewed 3548
    final List<Tab> myTabs = <Tab>[
    new Tab(text: 'a'),
    new Tab(text: 'b'),
    new Tab(text: 'c'),
    new Tab(text: 'd'),
    new Tab(text: 'e'),
  ];

then

    appBar: new AppBar(
          elevation: 0,
          title: _barSearch(),
          backgroundColor: Colors.white,
          bottom: TabBar(
            isScrollable: true,
            tabs: myTabs,
            labelColor: Color(0xffFF645C),
            labelStyle:TextStyle(fontSize: 14.0),
            unselectedLabelStyle:TextStyle(fontSize: 14.0),
            unselectedLabelColor: Color(0xff343434),
            indicatorColor: Color(0xffFF645C),
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.only(bottom: 8.0),
          ),
        ),

It shows how I use tabbar. But now, I find that my Tabbar layout is like to that of spaceAround. enter image description here

But our project manager asked me to use spaceBetween. enter image description here

dart flutter
3 Answers

There is no way of doing Space-between in TabBar but here's my approach of achieving your goal:

  1. I wrap tab to Align Widget since tabs is a list of Widget and do the corresponding changes. You can modify based on your need or even use Positioned Widget to achieve the same

     tabs: [

       Align(alignment: Alignment.centerLeft,child: 
         Tab(icon: Icon(Icons.directions_transit)),
       ),
       Tab(icon: Icon(Icons.directions_transit)),
       Align(alignment: Alignment.centerRight,child: 
         Tab(icon: Icon(Icons.directions_transit)),
       ),
      ],
user_140456350

you should set your isScrollable: false,

i hope it works for you .

user_91678060

AppBar Widget can be very restricting at times. Every time this degree of customization is required, you should prefer building this Widget separately and simply adding it under the Scaffold.

You can super easily achieve this result with the following lines of code:

final List<Widget> myTabs = <Widget>[
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'a'),
  ),
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'b'),
  ),
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'c'),
  ),
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'd'),
  ),
  Padding(
    padding: const EdgeInsets.only(right: 30),
    child: new Tab(text: 'e'),
  ),
];

class CustomAppBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          child: Center(child: Text('Coding24h')),
        ),
        Container(
          height: 50,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: myTabs,
          ),
        )
      ],
    );
  }
}

In this way, you can get the fully customizing result you want without having AppBar's restrictions.

user_142162240
Related