How to make the text in the tab bar to show in a same line?

user_11330275 0
Viewed 2330

I was trying to clone an app named stucor but the tab bar in that app is different, when i tried to implement in flutter all the texts in the tab bar were of the same size and the text in it were in many lines likeenter image description here

So, i tried wrapping the texts in FittedBox widget but then the font size got reduced as seen in the above image. What i am trying to achieve is enter image description here

  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 7,
          child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [

              Tab(child: FittedBox(child: Text('HOME', style: TextStyle(color: Colors.black),)) ),
              Tab(child: Text('RESULTS', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('INTERNALS', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('NOTES', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('EVENTS', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('QUESTION PAPERS', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('JOBS', style: TextStyle(color: Colors.black),) )]),```
flutter-layout flutter
1 Answers

As mentioned in the comment, you can acheive the TabBar behaviour by setting the isScrollable property of the TabBar to true.

Posting it as an answer here so other can see:

I added an example using your widget tree:

 Widget build(BuildContext context) {
    return DefaultTabController(
      length: 7,
          child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            isScrollable: true, // new line
            tabs: [

              Tab(child: FittedBox(child: Text('HOME', style: TextStyle(color: Colors.black),)) ),
              Tab(child: Text('RESULTS', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('INTERNALS', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('NOTES', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('EVENTS', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('QUESTION PAPERS', style: TextStyle(color: Colors.black),) ),
              Tab(child: Text('JOBS', style: TextStyle(color: Colors.black),) )]),
user_134526400
Related