TabBarView with variable height inside a ListView

Question

I have a ListView with multiple type of items, one of which is a widget of TabBar and TabBarView.
The problem is each tab page's height is different and I want the ListView to wrap the tab widget dynamically according to it's height

But the TabBarView doesn't accept unbounded height and ListView can't provide a height for it's children.
Is there anyway this can be done? Or must I use the TabBar with something that can wrap it's content like a Column and sacrifice the ability to swipe between tabs?

Answer 1

You don't need to have TabView to show Tabs content. the minus of this approcach that you are loosing animations and swipes, so you will need to do it by your self if you realy will need it.

class MyHomePage extends StatefulWidget {   @override   _MyHomePageState createState() => _MyHomePageState(); }  class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {   final List<Widget> myTabs = [     Tab(text: 'one'),     Tab(text: 'two'),     Tab(text: 'three'),   ];    TabController _tabController;    @override   void dispose() {     _tabController.dispose();     super.dispose();   }    @override   void initState() {     _tabController = TabController(length: 3, vsync: this);     _tabController.addListener(_handleTabSelection);     super.initState();   }    _handleTabSelection() {     if (_tabController.indexIsChanging) {       setState(() {});     }   }    _listItem() {     return Container(       decoration: BoxDecoration(         border: Border.all(           width: 1,           color: Colors.blueAccent,         ),       ),       height: 120,       child: Center(         child: Text('List Item', style: TextStyle(fontSize: 20.0)),       ),     );   }    @override   Widget build(BuildContext context) {     return Scaffold(       body: ListView(         children: <Widget>[           _listItem(),           TabBar(             controller: _tabController,             labelColor: Colors.redAccent,             tabs: myTabs,           ),           Center(             child: [               Text('first tab'),               Column(                 children: [                   Text('second tab'),                   ...List.generate(10, (index) => Text('line: $index'))                 ],               ),               Column(                 children: [                   Text('third tab'),                   ...List.generate(20, (index) => Text('line: $index'))                 ],               ),             ][_tabController.index],           ),           _listItem(),           _listItem(),         ],       ),     );   } }