I'm trying to add a tabBar with TabBarView in the middle of a page, the Content of the Tabs has Dynamic height (some Tabs are longer than others), I tried modifiyng that approach but it ended up making the start and end content fixed at the top and bottom of the page, so I used an External Package AutoScaleTabBarView and It basically did what I wanted but there was a bug
After I build the apk and run it on my phone Sometimes the TabBarView takes a Significantlly taller height than needed untill I change the tab once.
Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(),
body: SingleChildScrollView(
child: Column(
children: [
// Some widgets above the Tabs
Container(
height: 500,
color: Colors.red,
),
DefaultTabController(
initialIndex: 0,
length: 3,
child: Column(
children: [
const TabBar(
labelPadding: EdgeInsets.symmetric(horizontal: 23),
isScrollable: true,
indicatorColor: Color.fromARGB(255, 227, 6, 19),
indicatorWeight: 4,
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(
child: Text("1"),
),
Tab(
child: Text("2"),
),
Tab(
child: Text("2"),
),
],
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
AutoScaleTabBarView(children: [
Text(
"Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,",
),
Text(
"Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,"),
Text(
"Some Text",
),
]),
],
),
),
],
),
),
// More Widgets under the Tabs
Container(
height: 500,
color: Colors.red,
),
],
),
),
);
Thanks in advance
I found a Solution Using SliveList and CustomScrollView
class Details extends StatelessWidget {
Details({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildListDelegate(
[
//Widgets above tabs
Container(
height: 500,
color: Colors.red,
),
DefaultTabController(
initialIndex: 0,
length: 3,
child: Column(
children: [
const TabBar(
labelPadding: EdgeInsets.symmetric(horizontal: 23),
isScrollable: true,
indicatorColor: Color.fromARGB(255, 227, 6, 19),
indicatorWeight: 4,
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(
child: Text(
"1",
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
"1",
style: TextStyle(color: Colors.black),
),
),
Tab(
child: Text(
"1",
style: TextStyle(color: Colors.black),
),
),
],
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
AutoScaleTabBarView(children: [
Text(
"Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,Some Even Longer Text,",
),
Text(
"Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,Some Longer Text,"),
Text(
"Some Text",
),
]),
],
),
),
],
),
),
// More Widgets under the Tabs
Container(
height: 500,
color: Colors.red,
),
],
),
),
],
));
}
}