'Large text in tab is not showing completely Flutter

I am working on a Flutter project that requires tabs, but one of the tab name is large, the name is not showing completely, as demonstrated in picture, How can I resolve this issue, I want the TabBar text to be multiline, I am new to Flutter so any help will be appreciated.

Current tab situation

Here is the code

TabBar(
  tabs: [
    Tab(
      text: "Clock",
      icon: Icon(Icons.access_time),
    ),
    Tab(
      text: "Alarm",
      icon: Icon(Icons.access_alarm),
    ),
    Tab(
      text: "Stopwatch",
      icon: Icon(Icons.av_timer),
    ),
    Tab(
      text: "Countdown Timer",
      icon: Icon(Icons.timer_rounded),
    )
  ],
),
fluttertabsflutter-layouttabbar


Solution 1:[1]

I solved it, instead of using text attribute I used

child: Text(
  "Countdown Timer",
  textAlign: TextAlign.center,
),

Adding textAlign to it solved my problem

Solution 2:[2]

put Tab Text into Expanded widget

child:Expaned(
child : Text(
  "Countdown Timer",
  textAlign: TextAlign.center,
)),

Solution 3:[3]

Add labelPadding or make the tabs scrollable using isScrollable

TabBar(
  isScrollable: true,
  labelPadding: EdgeInsets.symmetric(horizontal: 10.0),
  tabs: [
Tab(
  text: "Clock",
  icon: Icon(Icons.access_time),
),
Tab(
  text: "Alarm",
  icon: Icon(Icons.access_alarm),
),
Tab(
  text: "Stopwatch",
  icon: Icon(Icons.av_timer),
),
Tab(
  text: "Countdown Timer",
  icon: Icon(Icons.timer_rounded),
)
],),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Rishita Joshi
Solution 3 Junaid Khalid

Related Questions