I'm having a screen wrapped inside SingleChildScrollView and there are lots of widgets inside of it. I created detailBuilder function that return a TabBarView inside my singleChildScrollView.
I manage to achieve the layout like the image below but the problem is I can't make my tabBar to have a fully dynamic height. I tried applying nestedScrollView, but it didn't work
Here's the image:
How can I change my code so that the tabBar will have dynamic height value but the at the same time I can scroll of the content simultaneously ?
Here's the current code for the tab bar:
return Column(
children: [
Container(
height: 40,
decoration: BoxDecoration(
color: formBackgroundColor,
borderRadius: BorderRadius.all(Radius.circular(15))
),
child: TabBar(
controller: collabTabController,
indicator: ShapeDecoration(
shape: RoundedRectangleBorder(
borderRadius:
const BorderRadius.only(
bottomRight: Radius.circular(15),
topRight: Radius.circular(15),
)
),
color: Colors.orange,
),
tabs: [
Tab(text:'main'.tr()),
Tab(text:'solver'.tr()),
],
),
),
const SizedBox(height: 10),
SizedBox(
height: 700, -- Here's the problem I want it to be dynamic depending on my Container 1
and Container 2 size (both of them aren't fixed size)
child: TabBarView(
controller: collabTabController,
children: [
/// Container 1
/// Container 2
]
),
),
],
);
Main body code:
SingleChildScrollView(
child: Column(
children: [
// Content 1
// Content 2 -- detailBuilder() #Which contain my TabBar
// Content 3
// Content 4
]
),
),