flutter tabbar Margin/padding between label

user_17653156 0
Viewed 874

im tired with tabbar and didn't find the answer. I have 3 tabbar and i want to place the label to left like categories how ?

tabbar i want enter image description here

my tabbar enter image description here

my code

       // BOTTOM
      bottom: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            width: MediaQuery.of(context).size.width / 1.1,
            child: TabBar(
              labelPadding: EdgeInsets.all(0),
              labelColor: Colors.white,
              labelStyle: poppins.copyWith(
                fontSize: 15,
                fontWeight: bold,
              ),
              unselectedLabelColor: Color(0xff585861),
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.label,

              // TABS
              tabs: [
                Tab(
                  text: 'Following',
                ),
                Tab(
                  text: 'Trending',
                ),
                Tab(
                  text: 'Search',
                ),
              ],
            ),
          ),
        ),
      ),
flutter-layout dart flutter
3 Answers

I'm able to find the solution to this.

Just by adding isScrollable: true parameter to TabBar() all tabs shrink to one side.

Without setting isScrollable: true all tabs items were taking all the space they have in the given widget.

user_163885530

try to add isScrollable: true, inside TabBar() widget

Refer Tabbar here

Refer isScrollable here

   bottom: PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            width: MediaQuery.of(context).size.width / 1.1,
            child: TabBar(
              labelPadding: EdgeInsets.all(5),
              labelColor: Colors.white,
              isScrollable: true,// add this property
              unselectedLabelColor: Color(0xff585861),
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.label,

              // TABS
              tabs: [
                Tab(
                  text: 'Following',
                ),
                Tab(
                  text: 'Trending',
                ),
                Tab(
                  text: 'Search',
                ),
              ],
            ),
          ),
        ),
      ),

Your result screen-> image

user_139972100 
bottom:  PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight),
        child: Align(
          alignment: Alignment.centerLeft,
          child: Container(
            width: MediaQuery.of(context).size.width / 1.1,
            child: TabBar(
              isScrollable: true,
              labelPadding: EdgeInsets.all(0),
              labelColor: Colors.white,
              labelStyle: poppins.copyWith(
                fontSize: 15,
                fontWeight: bold,
              ),
              unselectedLabelColor: Color(0xff585861),
              indicatorColor: Colors.white,
              indicatorSize: TabBarIndicatorSize.label,

              // TABS
              tabs: [
                Tab(
                  text: 'Following',
                ),
                Tab(
                  text: 'Trending',
                ),
                Tab(
                  text: 'Search',
                ),
              ],
            ),
          ),
        ),
      )
user_150596830
Related