How to move tabs to beneath the app title - flutter

Question

Im creating a page which has a few tabs to sort food into categories. For some reason theres a large white section between the top app bar where the title is and the actual tabs. I want to move the tabs up so they're below the app bar and there is not a large white space there! Does anyone know how or why this is the case? Thank you!
I am using flutter.
class FoodPage extends StatefulWidget {
#override
_FoodPageState createState() => _FoodPageState();
}
class _FoodPageState extends State<FoodPage> {
#override
Widget build(BuildContext context){
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
//primarySwatch: Colors.teal,
),
home:DefaultTabController(
length:4,
child: Scaffold(
backgroundColor:Color.fromRGBO(51, 171, 160, 100),
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 5,
bottom: TabBar(
isScrollable: true,
unselectedLabelColor: Color.fromRGBO(51, 171, 160, 100),
indicatorPadding: EdgeInsets.only(left: -30,right: -30),
indicatorSize: TabBarIndicatorSize.label,
indicator: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
color: Color.fromRGBO(51, 171, 160, 100),
),
tabs: [
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
),
child: Align(
alignment: Alignment.center,
child: Text('ALL'),
),
),
),
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
),
child: Align(
alignment: Alignment.center,
child: Text('FRIDGE'),
),
),
),
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
),
child: Align(
alignment: Alignment.center,
child: Text('FREEZER'),
),
),
),
Tab(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10)),
),
child: Align(
alignment: Alignment.center,
child: Text('CUPBOARD'),
),
),
),
],),
),
body: TabBarView(children: [
Text('ALL FOOD HERE'),
Text('FRIDGE FOOD HERE'),
Text('FREEZER FOOD HERE'),
Text('CUPBOARD FOOD HERE')
]),
)
)
) ;
}
}

Answer 1

Simply you can adjust tabbar height by changing below parameter.
toolbarHeight
...
appBar: AppBar(
toolbarHeight: 50,
backgroundColor: Colors.white,
elevation: 5,
bottom: TabBar(
isScrollable: true,
...