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.
Screenshot#1:
Screenshot#2:
Defintion of 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,
),)```