I'm trying to add TabBar in my Flutter application. I will use 5 tabs with long names. For now, I added them like this;

DefaultTabController(
                  length: 5, // length of tabs
                  initialIndex: 0,
                  child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
                    Container(
                      child: TabBar(
                        labelColor: Color(0xffd17842),
                        unselectedLabelColor: Color(0xff52555a),
                        indicator: DotIndicator(
                          color: Color(0xffd17842),
                          distanceFromCenter: 16,
                          radius: 3,
                          paintingStyle: PaintingStyle.fill,
                        ),
                        indicatorColor: Colors.transparent,
                        tabs: [
                          Tab(text: 'Cappuccino'),
                          Tab(text: 'Espresso'),
                          Tab(text: 'Latte'),
                          Tab(text: 'Espresso'),
                          Tab(text: 'Cappuccino'),
                        ],
                      ),
                    ),
                    Container(
                        height: 250, //height of TabBarView
                        decoration: BoxDecoration(
                            border: Border(top: BorderSide(color: Colors.grey, width: 0.5))
                        ),
                        child: TabBarView(children: <Widget>[
                          Container(
                            child: Center(
                              child: Text('Display Tab 1', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                          Container(
                            child: Center(
                              child: Text('Display Tab 2', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                          Container(
                            child: Center(
                              child: Text('Display Tab 3', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                          Container(
                            child: Center(
                              child: Text('Display Tab 4', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                          Container(
                            child: Center(
                              child: Text('Display Tab 5', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                        ])
                    )
                  ])
              )

But the output is this;

I want it to act like Horizontal SingleChildScrollView with BouncingScrollPhysics with full long names. I can't fix it... Can you help me?

CodePudding user response：

On your TabBar set isScrollable: true,

child: TabBar(
  labelColor: Color(0xffd17842),
  unselectedLabelColor: Color(0xff52555a),
  indicatorColor: Colors.transparent,
  isScrollable: true, // this
  tabs: [

CodePudding user response：

I solved the problem by reducing the space between tabs. enter image description here