Flutter tab bar inside Appbar bottom give bottom overflow exception

Question

I am using the below code. I got the bottom navigation bar to give an overflow exception. Please anyone help me to solve this problem.

return DefaultTabController(
        length: 2,
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            backgroundColor: Theme.of(context).primaryColor,
            actions: [
              IconButton(
                onPressed: () {
                  openUrl("https://www.trustdidi.com/help");
                },
                icon: Icon(Icons.help_outline),
              ),
              IconButton(
                onPressed: () {
                  showComingSoonToast();
                },
                icon: Icon(Icons.notifications),
              ),
            ],
            bottom: TabBar(
              tabs: [
                Tab(
                    icon: Icon(
                  Icons.directions_car,
                  color: Colors.white,
                )),
                Tab(icon: Icon(Icons.directions_transit)),
              ],
            ),
          ),
          body: SafeArea(
            child: TabBarView(
              children: [
                Icon(
                  Icons.directions_car,
                  color: Colors.redAccent,
                ),
                Icon(Icons.directions_transit),
              ],
            ),
          ),
        ));

Buts it gives below error

Answer 1

you should try with tabbar controller.And then initial it

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>  with TickerProviderStateMixin {

  TabController _tabController;

  @override
  void initState() {
    _tabController = new TabController(length: 2, vsync: this, initialIndex: 0);
    super.initState();
  }
  

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            backgroundColor: Theme.of(context).primaryColor,
            actions: [
              IconButton(
                onPressed: () {
                 // openUrl("https://www.trustdidi.com/help");
                },
                icon: Icon(Icons.help_outline),
              ),
              IconButton(
                onPressed: () {
                 // showComingSoonToast();
                },
                icon: Icon(Icons.notifications),
              ),
            ],
            bottom: TabBar(
              controller: _tabController,
              tabs: [
                Tab(
                    icon: Icon(
                  Icons.directions_car,
                  color: Colors.white,
                )),
                Tab(icon: Icon(Icons.directions_transit)),
              ],
            ),
          ),
          body: SafeArea(
            child: TabBarView(
              children: [
                Icon(
                  Icons.directions_car,
                  color: Colors.redAccent,
                ),
                Icon(Icons.directions_transit),
              ],
            ),
          ),
        ));
  }
}

Output: