reason
The tabbarviewcomponent occupies as much space as the parent component. Generally, the outer layer of this layout is scrollable, similar to singlechildscrollview, but there is no clear height constraint in the column, that is, infinite height, so an error is reported.
Solution:
1. Fixed height
It directly solves the problem locally, but there is a big disadvantage. The components loaded by tabbarview may have different heights, so the predetermined height should be their maximum height, and the layout is not good-looking.
SingleChildScrollView(
child: Column(
children: [
MyTabBar(),
SizedBox(
height: 500,
child: TabBarView(
children:[
MyTabView1(),
MyTabView2(),
],
),
),
],
),
)
2. Do not use the tabbarview component
It is recommended to use the indexedstack component instead. The disadvantage is that it lacks the sliding animation of the original tabbarview component, but it can be customized with the animatedswitcher component. Click to learn more
SingleChildScrollView(
child: Column(
children: [
MyTabBar(),
IndexedStack(
index: currentIndex, //currentIndex is the value of my example, in reality it may come from TabController, or Provider, etc.
children:[
MyTabView1(),
MyTabView2(),
],
),
),
],
),
)
3. To be continued
