firebase - Flutter problem size icon in tabbar in appbar?

Question

I have a little problem I can't find the solution. I created a TABBAR in an APPBAR, but I cannot resize it so that my icon of my tabbar is visible.

My tabbar its ok, but size of icon and tab not good...

I tried several ways but none worked ...

My problem: My probleme

My code:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabcontroller;
  @override
  void initState() {
    super.initState();
    _tabcontroller = new TabController(length: 3, vsync: this);
    _tabcontroller.addListener(() {
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar:  AppBar(
          backgroundColor: Colors.white,
          automaticallyImplyLeading: false,
          elevation: 1,
          title: new TabBar(
              indicatorColor: Colors.transparent,
              controller: _tabcontroller,
              tabs: [
                new SafeArea(
                  child: new Container(
                    padding: EdgeInsets.all(ScreenUtil().setWidth(20.0)),
                    child: Center(
                      child: new Icon(
                        Icons.icecream,
                        color: _tabcontroller.index == 0
                            ? Theme.of(context).primaryColor
                            : Colors.grey,
                        size: ScreenUtil().setSp(80.0),
                      ),
                    ),
                  ),
                ),
                new SafeArea(
                  child: new Container(
                    padding: EdgeInsets.all(ScreenUtil().setWidth(20.0)),
                    child: Center(
                      child: new Icon(
                        Tinder_clone.iconfinder_338_tinder_logo_4375488__1_,
                        color: _tabcontroller.index == 1
                            ? Theme.of(context).primaryColor
                            : Colors.grey,
                        size: ScreenUtil().setSp(80.0),
                      ),
                    ),
                  ),
                ),
                new SafeArea(
                  child: new Container(
                    padding: EdgeInsets.all(ScreenUtil().setWidth(20.0)),
                    child: Center(
                      child: new Icon(
                        Tinder_clone.iconfinder_message_01_186393,
                        color: _tabcontroller.index == 2
                            ? Theme.of(context).primaryColor
                            : Colors.grey,
                        size: ScreenUtil().setSp(80.0),
                      ),
                    ),
                  ),
                ),
              ]),
        ),
           

question from:https://stackoverflow.com/questions/65946373/flutter-problem-size-icon-in-tabbar-in-appbar

Answer 1

When placing TabBar within the AppBar, you should use the bottom property.

// ... other lines

return new Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        automaticallyImplyLeading: false,
        elevation: 1,
        bottom: new TabBar(
            indicatorColor: Colors.transparent,
            controller: _tabcontroller,

// ... other lines