Bottom overflow due to bottom navigation bar and tab Bar - flutter

Question

#override
Widget build(BuildContext context) {
super.build(context);
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
),
child: Scaffold(
key: _scaffoldKeyProfilePage,
body: DefaultTabController(
length: 2,
child:RefreshIndicator(
onRefresh: _onRefresh,
child: NestedScrollView(
headerSliverBuilder: (context, _) {
return [
SliverList(
delegate: SliverChildListDelegate(
[ BuildMainProfile(
....//
),
Padding(
...//another design
),
];
},
// You tab view goes here
body: Column(
children: <Widget>[
TabBar(
tabs: [
Tab(text: 'A'),
Tab(text: 'B'),
],
),
Expanded(
child: TabBarView(
children: [
BuildPost(,
),
BuildWings()
],
),
),
],
),
),),
),
}
Above is the example of error which I am getting
error:A RenderFlex overflowed by 48 pixels on the bottom.
How to solve this issue? Tried using expanded on TabBar and giving flex of 1 to tab bar and flex of 10 to tabView , but with that tab bar shrinks on scrolling down.
Here below is the code for tabBar view A and B is even similar
class BuildPost extends StatefulWidget {
final String uid;
const BuildPost({
Key key,
#required this.uid,
}) : super(key: key);
#override
_BuildPostState createState() => _BuildPostState();
}
class _BuildPostState extends State<BuildPost> {
List<Post> _post = [];
getUsersPost() async {
final database = FirestoreDatabase();
List<Post> _postModel = await database.getUsersPost(widget.uid);
setState(() {
_post = _postModel.toList();
});
}
#override
void initState() {
getUsersPost();
super.initState();
}
#override
Widget build(BuildContext context) {
return _post.isEmpty
? Container(
height: 500,
width: double.infinity,
)
: GestureDetector(
child: Directionality(
textDirection: TextDirection.ltr,
child: AnimationLimiter(
child: StaggeredGridView.countBuilder(
padding: EdgeInsets.all(10),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
crossAxisCount: 3,
itemCount: _post.length,
itemBuilder: (context, index) {
return AnimationConfiguration.staggeredGrid(
position: index,
duration: const Duration(milliseconds: 500),
columnCount: 3,
child: SlideAnimation(
verticalOffset: 50.0,
child: FadeInAnimation(
duration: Duration(milliseconds: 1000),
child: BuildData(
totalPost: _post.length,
postList: _post,
index: index,
post: _post[index],
)),
),
);
},
staggeredTileBuilder: (index) => StaggeredTile.count(
index % 7 == 0 ? 2 : 1,
index % 7 == 0 ? (2.1) : (1.05)),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
),
)),
);
}
}

Answer 1

It is because the body height of NestedScrollView is from 0 to MediaQuery.of(context).size.height, while your TabBar inside the column make it layout a minimal height of TabBar.
Move TabBar inside builder
Form the example of NestedScrollView, you can see the TabBar is inside headerSliverBuilder. You can simply move the TabBar inside it (wrap a SliverToBoxAdapteror SliverAppBar to make it sliver).
Then you can remove the Column and Expand Widget above the TabBarView
child: NestedScrollView(
headerSliverBuilder: (context, _) {
return [
SliverList(
...
),
SliverAppBar(
pinned: true,
primary: false, // no reserve space for status bar
toolbarHeight: 0, // title height = 0
bottom: TabBar(
tabs: [
Tab(text: 'A'),
Tab(text: 'B'),
],
),
)
];
}
body: TabBarView(
children: [
...

Answer 2

The body property of NestedScrollView gets a tight height constraint equal to the space left over by headerSliverBuilder (considering the scroll position). In your code, you've as body a Column widget with a fixed height (the TabBar) widget in there. So when the height constraint of body gets smaller than the TabBar height, it will overflow the Column.
So in body, there must be a widget that can shrink to zero height, most likely a scrollable (ListView, CustomScrollView). In your case, you can move the TabBar to the bottom of headerSliverBuilder, wrapping it with:
SliverPersistentHeader(
pinned: true,
delegate: SimpleHeaderDelegate(
child: TabBar(...),
),
)
using:
class SimpleHeaderDelegate extends SliverPersistentHeaderDelegate {
SimpleHeaderDelegate({#required this.child});
final PreferredSizeWidget child;
#override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => child;
#override
double get maxExtent => child.preferredSize.height;
#override
double get minExtent => child.preferredSize.height;
#override
bool shouldRebuild(covariant SimpleHeaderDelegate oldDelegate) => oldDelegate.child != child;
}

Answer 3

See SingleChildScrollView class, Expanding content to fit the viewport:
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html