A RenderFlex overflowed by 1.9 pixels on the bottom - flutter

Question

I am getting a A RenderFlex overflowed by 1.9 pixels on the bottom error in my flutter app.
I wrapped all the ROW's in Expanded and I wrapped the main Column in a SingleChildScrollView but still have the issue. As you can see from the screenshots the view on the bottom scrolls up. The item on the top squishes down as it goes off screen. I am not even sure which Row is causing the issue?
UPDATE:
Seeing this now.
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 2) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a Semantics widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
Column ← Expanded ← Semantics ← Align ← ConstrainedBox ← Container ← LayoutBuilder ← DefaultTextStyle ← Align ← Transform ← ⋯
.enter image description here
CODE:
import 'package:animation_wrappers/animation_wrappers.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:qvid/BottomNavigation/Explore/explore_page.dart';
import 'package:qvid/Components/profile_page_button.dart';
import 'package:qvid/Components/row_item.dart';
import 'package:qvid/Components/sliver_app_delegate.dart';
import 'package:qvid/Components/tab_grid.dart';
import 'package:qvid/Locale/locale.dart';
import 'package:qvid/Routes/routes.dart';
import 'package:qvid/BottomNavigation/MyProfile/followers.dart';
import 'package:qvid/Theme/colors.dart';
import 'package:qvid/BottomNavigation/MyProfile/following.dart';
class UserProfilePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return UserProfileBody();
}
}
class UserProfileBody extends StatefulWidget {
#override
_UserProfileBodyState createState() => _UserProfileBodyState();
}
class _UserProfileBodyState extends State<UserProfileBody> {
bool isFollowed = false;
var followText;
final key = UniqueKey();
#override
Widget build(BuildContext context) {
var locale = AppLocalizations.of(context);
return Scaffold(
backgroundColor: darkColor,
body: DefaultTabController(
length: 2,
child: SafeArea(
child: NestedScrollView(
headerSliverBuilder:
(BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
expandedHeight: 400.0,
floating: false,
actions: <Widget>[
PopupMenuButton(
color: backgroundColor,
icon: Icon(
Icons.more_vert,
color: secondaryColor,
),
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(12.0),
borderSide: BorderSide.none),
itemBuilder: (BuildContext context) {
return [
PopupMenuItem(
child: Text(locale!.report!),
value: locale.report,
textStyle: TextStyle(color: secondaryColor),
),
PopupMenuItem(
child: Text(locale.block!),
value: locale.block,
textStyle: TextStyle(color: secondaryColor),
),
];
},
)
],
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Column(
children: <Widget>[
Spacer(flex: 10),
FadedScaleAnimation(
child: CircleAvatar(
radius: 28.0,
backgroundImage:
AssetImage('assets/user/user1.png'),
),
),
Spacer(),
Expanded(
flex: 2,
child: Row(
children: [
Spacer(flex: 12),
Text(
'Emili Williamson',
style: TextStyle(fontSize: 16),
),
Spacer(),
Image.asset(
'assets/icons/ic_verified.png',
scale: 4,
),
Spacer(flex: 8),
],
),
),
Text(
'#emilithedancer',
style:
TextStyle(fontSize: 10, color: disabledTextColor),
),
Spacer(),
FadedScaleAnimation(
child: Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ImageIcon(
AssetImage(
"assets/icons/ic_fb.png",
),
color: secondaryColor,
size: 10,
),
SizedBox(
width: 15,
),
ImageIcon(
AssetImage("assets/icons/ic_twt.png"),
color: secondaryColor,
size: 10,
),
SizedBox(
width: 15,
),
ImageIcon(
AssetImage("assets/icons/ic_insta.png"),
color: secondaryColor,
size: 10,
),
],
),
),
),
Spacer(),
Text(
locale!.comment7!,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 10, fontWeight: FontWeight.w500),
),
Spacer(),
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ProfilePageButton(
locale.message,
() => Navigator.pushNamed(
context, PageRoutes.chatPage)),
SizedBox(width: 16),
isFollowed
? ProfilePageButton(locale.following, () {
setState(() {
isFollowed = false;
});
})
: ProfilePageButton(
locale.follow,
() {
setState(() {
isFollowed = true;
});
},
color: mainColor,
textColor: secondaryColor,
),
],
),
),
Spacer(),
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RowItem(
'1.2m',
locale.liked,
Scaffold(
appBar: AppBar(
title: Text('Liked'),
),
body: TabGrid(
food + lol,
),
)),
RowItem('12.8k', locale.followers, FollowersPage()),
RowItem('1.9k', locale.following, FollowingPage()),
],
),
),
],
)),
),
),
SliverPersistentHeader(
delegate: SliverAppBarDelegate(
TabBar(
labelColor: mainColor,
unselectedLabelColor: lightTextColor,
indicatorColor: transparentColor,
tabs: [
Tab(icon: Icon(Icons.dashboard)),
Tab(
icon: ImageIcon(AssetImage(
'assets/icons/ic_like.png',
)),
),
],
),
),
pinned: true,
),
];
},
body: TabBarView(
children: <Widget>[
FadedSlideAnimation(
child: TabGrid(dance),
beginOffset: Offset(0, 0.3),
endOffset: Offset(0, 0),
slideCurve: Curves.linearToEaseOut,
),
FadedSlideAnimation(
child: TabGrid(food + lol),
beginOffset: Offset(0, 0.3),
endOffset: Offset(0, 0),
slideCurve: Curves.linearToEaseOut,
),
],
),
),
),
),
);
}
}

Answer 1

The error is caused in this row. Remove this row and see if you still see the same problem in the Row above it. If you do then i guess it has something to do with the code below it. Is the code below this one also in singlechildscrollview or expanded? if its not then add it. i'm on phone so it's hard for me to clearly see the syntax.
Spacer(),
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RowItem(
'1.2m',
locale.liked,
Scaffold(
appBar: AppBar(
title: Text('Liked'),
),
body: TabGrid(
food + lol,
),
)),
RowItem('12.8k', locale.followers, FollowersPage()),
RowItem('1.9k', locale.following, FollowingPage()),
],
),
),
],
)),
),
),

Answer 2

As document says, You cannot use the Expanded widget inside the child of FadedScaleAnimation
You should only use the Expanded Widget as the direct child of Row/Column/Flex because these are flex widgets
Try putting FadedScaleAnimation inside Expanded Widget in your Column widget, the Expanded widget should be the direct child of your Column