A RenderFlex overflowed by 99888 pixels on the bottom

Question

I have met some issue on my "HomeScreen" but it's work before not sure what's going on it's not working right now. Also have a doubt there because I've been add a container and the column also inside of the container why the column will overflow?

I would like to have a "Container" for display image on left side and right side for display "UserInformation" that fetch from database however it's showing column issue even though have been added "Flexible" or "Expanded" also not working.

"HomeScreen Display"

  @override
  Widget build(BuildContext context) {
    final profile = Provider.of<UserProfileLogic>(context, listen: false);
    return Container(
      color: Colors.blue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            padding: EdgeInsets.all(40),
            child: CircleAvatar(
              backgroundImage: AssetImage(
                "assets/images/Materials-25.png",
              ),
              radius: 70,
              child: FittedBox(
                fit: BoxFit.fitHeight,
              ),
            ),
          ),
          Flexible(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ListView.builder(
                  shrinkWrap: true,
                  itemCount: profile.items.length,
                  itemBuilder: (_, i) => Column(
                    children: <Widget>[
                      Text(profile.items[i].username),
                      Text(profile.items[i].age.toString()),
                      Text(profile.items[i].gender),
                      Text(profile.items[i].bio),
                      SizedBox(
                        height: 50,
                      ),
                      UserProfileItem(profile.items[i].userprofileid),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

"UserProfileItem.dart" The reason why creating this because I have to pass argument of "ID" to make sure once user click for the button and it will get the ID so once going for "ProfileScreen" could see his own profile.

    class UserProfileItem extends StatelessWidget {
  final String id;

  UserProfileItem(this.id);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("Profile"),
      elevation: 6,
      onPressed: () => Navigator.of(context).pushNamed(
        ProfileScreen.routeName,
        arguments: id,
      ),
    );
  }
}

"After Used Solution " May I know why it will display out? Thank you for your help

Answer 1

Overflow is not the problem. overflow is caused by the error widget in flutter.

 @override
  Widget build(BuildContext context) {
    final profile = Provider.of<UserProfileLogic>(context, listen: false);
    return Container(
      color: Colors.blue,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            padding: EdgeInsets.all(40),
            child: CircleAvatar(
              backgroundImage: AssetImage(
                "assets/images/Materials-25.png",
              ),
              radius: 70,
              child: FittedBox(
                fit: BoxFit.fitHeight,
              ),
            ),
          ),
          Expanded(
            child: ListView.builder(
                  itemCount: profile.items.length,
                  itemBuilder: (_, i) => Column(
                    children: <Widget>[
                  Text(profile?.items[i]?.username ?? "No user name"),
                  Text(profile?.items[i]?.age?.toString()  ?? "No age"),
                  Text(profile?.items[i]?.gender ?? "No gender"),
                  Text(profile?.items[i]?.bio ?? "No bio"),
                      SizedBox(
                        height: 50,
                      ),
                      UserProfileItem(profile.items[i].userprofileid),
                    ],
                  ),
                ),
          ),
        ],
      ),
    );
  }
}

The problem is that you have null value in your items fields. To solve this change your text widgets as above.

Answer 2

The problem is that you have your ListView.builder as the child of a Column() and Columns does not scroll, change that column for a ListView and your issue sould be solved.

Also check if you are trying to access a null value and provide a default value for the text widget, a text widget's data can not be null.

      Flexible(
        child: ListView(
          children: <Widget>[
            ListView.builder(
              shrinkWrap: true,
              itemCount: profile.items.length,
              itemBuilder: (_, i) => Column(
                children: <Widget>[
                  Text(profile?.items[i]?.username ?? "No username"),
                  Text(profile?.items[i]?.age?.toString()  ?? "No age"),
                  Text(profile?.items[i]?.gender ?? "No gender"),
                  Text(profile?.items[i]?.bio ?? "No bio"),
                  SizedBox(
                    height: 50,
                  ),
                  UserProfileItem(profile.items[i].userprofileid),
                ],
              ),
            ),
          ],
        ),
      ),

Regarding the duplicate list you get, check hat the value of profile.items.length is, because you are using that as the itemCount.