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.
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),
)
],
),
CodePudding user response:
Add label padding or make the tabs scrollable:
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),
)
],),
CodePudding user response:
I solved it, instead of using text attribute I used
child: Text(
"Countdown Timer",
textAlign: TextAlign.center,
),
Adding textStyle to it solved my problem
