1

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),
    )
  ],
),
6
  • show the code a little bit. you can use \n for next line.
    – Mahi
    Jan 8, 2022 at 12:30
  • Text( maxlines:2
    – Mahi
    Jan 8, 2022 at 12:33
  • As only one letter is hidden, you can decrease the font size Jan 8, 2022 at 12:55
  • @Mahi I am not using Text widget, secondly after \n the text allignment does not remain centered Jan 8, 2022 at 13:01
  • okay. whatever it is.. you have solved it. good.
    – Mahi
    Jan 8, 2022 at 13:53

3 Answers 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),
)
],),
0
3

put Tab Text into Expanded widget

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

I solved it, instead of using text attribute I used

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

Adding textAlign to it solved my problem

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.