right overflowed by 88 pixel in tab bar flutter tabbar

Question

I'm working on mobile app using flutter and I made a tabbar of icon and text but the result is right overflowed by 88 pixel Here is an screenshot f the result

and this is the code

        bottom: new TabBar(controller: controller,
          tabs: <Widget>[
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.local_hospital,color: Colors.white),
                    new Text ( "كلام",
                        style:TextStyle(color: Colors.white,
                        )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.school,color: Colors.white),
                    new Text ( "كلام",style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.account_balance,color: Colors.white),
                    new Text ( "كلام" ,style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.account_balance,color: Colors.white),
                    new Text ( "كلام" ,style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.account_balance,color: Colors.white),
                    new Text ( "كلام" ,style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
            new Tab(
              child: new Row(
                  children: <Widget>[
                    new Icon(Icons.account_balance,color: Colors.white),
                    new Text ( "كلام" ,style:TextStyle(
                        color: Colors.white
                    )),
                  ]),
            ),
          ],),
      ),

How can I handle it ?? I tried to make a horizontal scroll but I failed! Can anyone help me ?

Answer 1

Can you try with isScrollable: true on TabBar widget. As follow

            TabBar(
              indicatorSize: TabBarIndicatorSize.tab,
              isScrollable: true,
              tabs: [
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.local_hospital, color: Colors.white),
                    Text("كلام",
                        style: TextStyle(
                          color: Colors.white,
                        )),
                  ]),
                ),
                Tab(
                    child: Row(children: <Widget>[
                  Icon(Icons.account_balance, color: Colors.white),
                  Text("كلام", style: TextStyle(color: Colors.white)),
                ])),
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.account_balance, color: Colors.white),
                    Text("كلام", style: TextStyle(color: Colors.white)),
                  ]),
                ),
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.mail, color: Colors.white),
                    Text("كلام", style: TextStyle(color: Colors.white)),
                  ]),
                ),
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.access_alarm, color: Colors.white),
                    Text("كلام", style: TextStyle(color: Colors.white)),
                  ]),
                ),
                Tab(
                  child: Row(children: <Widget>[
                    Icon(Icons.add_to_photos, color: Colors.white),
                    Text("كلام", style: TextStyle(color: Colors.white)),
                  ]),
                ),
              ],
            )

Hope this help.

Answer 2

Overflow happens when the isn't enough space for the Widget. Here the space available for Icon and Text in a Row exceeds the space available.

Try putting the text below the icon, replace Row with Column

 new Tab(
          child: new Column(
              children: <Widget>[
                new Icon(),
                new Text (),
              ],
           ),
        ),

---

Other suggestion might be reducing the size of Icon and/or the font size of Text.