So this is my layout structure
This is the main screen
ListView(
children: <Widget>[
_buildCarousel(),
_buildHomeTabBar(),
],
)
And this is the HomeTabBar screen
SingleChildScrollView(
child:
DefaultTabController(
length: myTabs.length,
initialIndex: 0,
child: Column(
children: [
TabBar(
isScrollable: true,
tabs: myTabs,
),
Container(
height: 600,
child:
TabBarView(
children: [
ChildScreen(),
ChildScreen2(),
ChildScreen3(),
],
)
)
],
))
);
I want to get rid off that Container
height. How do we do this?
The ChildScreen
is getting the data from REST it is actually a GridView.Builder
so the height of Container
should be dynamic.
Sorry I missed layout for ChildScreen
actually like this
SingleChildScrollView(
// shrinkWrap: true,
child: Column(
children: <Widget>[
StreamBuilder(
stream: categoryBloc.categoryList,
builder: (context, AsyncSnapshot<List<Category>> snapshot){
if (snapshot.hasData && snapshot!=null) {
if(snapshot.data.length > 0){
return buildCategoryList(snapshot);
}
else if(snapshot.data.length==0){
return Text('No Data');
}
}
else if (snapshot.hasError) {
return ErrorScreen(errMessage: snapshot.error.toString());
}
return Center(child: CircularProgressIndicator());
},
),
]
)
);
So inside StreamBuilder
is GridView.Builder
.
The main thing I want to remove Container
height. It looks ugly on different devices…
So if I remove the height it will not show on screen and throw error
I/flutter ( 493): #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1578:12)
I/flutter ( 493): #3 RenderSliverList.performLayout.advance (package:flutter/src/rendering/sliver_list.dart:200:17)
I/flutter ( 493): #4 RenderSliverList.performLayout (package:flutter/src/rendering/sliver_list.dart:233:19)
I/flutter ( 493): #5 RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 493): #6 RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:182:11)
I/flutter ( 493): #7 RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 493): #8 RenderViewportBase.layoutChildSequence (package:flutter/src/rendering/viewport.dart:405:13)
I/flutter ( 493): #9 RenderViewport._attemptLayout (package:flutter/src/rendering/viewport.dart:1316:12)
I/flutter ( 493): #10 RenderViewport.performLayout (package:flutter/src/rendering/viewport.dart:1234:20)
I/flutter ( 493): #11 RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
I/flutter ( 493): #12 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:13)
I/flutter ( 493): #13 RenderObject.layout (package:flutter/src/rendering/object.dart:1634:7)
Best Answer
I had similar task at my project. The root of the problem is that you are trying to put
TabBarView
(scrollable widget that trying to be as big as possible), in a column widget, that have no height.One of solutions is get rid of scrollable widgets that wraps your
TabBarView
in this exampleListView
+Column
. And useNestedScrollView
instead of them. You need to put_buildCarousel()
andTabBar
in theheaderSliverBuilder
part, andTabBarView
inside the body ofNestedScrollView
.I don't know how is your design looks, but
NestedScrollView
by default opens up to 100% height of screen view. So if you want to make an effect that everything is on one screen, it easer to just block scrolling, by changeScrollController
behavior when it’s needed.In this example I’m blocking scrolling on third tab, but you can check visibility of the last item of the grid view. Just add the key to the last item, and check its position on the screen.
Hope it’s help.
.
Another way to get what you want could be creating custom
TabView
widget.