Question posted in 
As the title said, tabbar is over lapping widgets present before it when the screensize is small
I have wrapped stats in my app in Wrap so that they stil can be visible in smaller screen sizes
Now i have some multiple charts to be shown so i put each chart in a tab view and tab bar that has tabs in it to view the charts. When the screen size is small the tab bar is coming up(from screenshot#1 to screenshot#2) or overlapping the widgets present before it.
And also if there are better ways to do things than my current approach please educate me.
Screenshot#1:
Screenshot#2:
Defintion of tabs:
List<Widget> tabs = [
const Tab(
icon: Icon(Icons.local_gas_station_outlined),
text: "Mileage",
iconMargin: EdgeInsets.only(bottom: 5),
),
const Tab(
icon: Icon(Icons.pin_drop_outlined),
text: "Distance",
iconMargin: EdgeInsets.only(bottom: 5),
),
const Tab(
icon: Icon(Icons.timer_outlined),
text: "Duration",
iconMargin: EdgeInsets.only(bottom: 5),
),
];
return Scaffold(
body: DefaultTabController(
initialIndex: defaultGraphTabIndex,
length: views.length,
child: SafeArea(
child: Scrollbar(
controller: _scrollController,
child: SingleChildScrollView(
controller: _scrollController,
child: Container(
margin: const EdgeInsets.only(
top: 18, left: 18, right: 18),
child: Column(
children: [
// Stats Column:
Column(
children: [
SizedBox(
height: (MediaQuery.of(context)
.size
.height >=
MediaQuery.of(context)
.size
.width)
? MediaQuery.of(context)
.size
.height *
1 /
6
: MediaQuery.of(context)
.size
.width *
1 /
6,
child: Wrap(
spacing: 16,
children: [
SizedBox(
width: double.maxFinite,
child: Wrap(
spacing: 8,
alignment: WrapAlignment
.spaceBetween,
children: [
Text(
"Total money spent during",
style:
semiBold18()),
SizedBox(
width:
double.maxFinite,
child: Wrap(
crossAxisAlignment:
WrapCrossAlignment
.center,
alignment:
WrapAlignment
.spaceBetween,
children: [
DropdownButton(
value: dropDownItems[
dropDownMenuItemIndex],
items: dropDownItems
.map(
(value) {
return DropdownMenuItem(
value:
value,
child: Text(
value),
);
}).toList(),
onChanged:
(_) {
setState(
() {
dropDownMenuItemIndex =
dropDownItems
.indexOf(_!);
});
}),
Row(
mainAxisSize:
MainAxisSize
.min,
crossAxisAlignment:
CrossAxisAlignment
.center,
children: [
Text(NumberFormat(
"#,###.##")
.format(
moneySpent)),
IconButton(
onPressed:(){...}
icon: const Icon(
Icons
.edit))
],
)
],
),
),
]),
)
],
),
),
],
),
SizedBox(
height:
MediaQuery.of(context).size.height *
5 /
12,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
TabBar(
tabs: tabs,
isScrollable: true,
tabAlignment: TabAlignment.center,
),
Expanded(
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight:
MediaQuery.of(context)
.size
.height /
4),
child: TabBarView(
children: views,
),
),
),
],
),
),
const SizedBox(
height: 20,
),)```
2
Answers
Thanks to @Md. Yeasin Sheikh i removed height of the stats column and it is fixed.
the flexible widget is wrapped around the tabbar to allow it to take up only the necessary space.
the Expanded widget is wrapped around the Tabbar view to ensure that it takes up the remaining space below the tabbar.
here’s the example….