CODEWITHSUNDEEP
flutter
Surya Prakash
Surya Prakash

Reputation: 13

Flutter: A RenderFlex overflowed by 34 pixels on the right

I am getting Error when try to run below script. I am using Expanded widget for showing user followers. 

Expanded(
                      flex: 1,
                      child: Column(
                        children: <Widget>[
                          Row(
                            mainAxisSize: MainAxisSize.max,
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              buildCountColumn("posts", postCount),
                              buildCountColumn("followers", followerCount),
                              buildCountColumn("following", followingCount),
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              buildProfileButton(),
                            ],
                          ),
                        ],
                      ),
                    ),

Upvotes: 0

Views: 456

Answers (2)

akash maurya
akash maurya

Reputation: 656

your **buildProfileButton() or row ** is creating more size widgets then the space available in screen;

Two solutions:

  1. you can put your row in listview to make it scrollable

  2. put each one in Expanded like:

    Expanded( child:buildCountColumn("posts", postCount), ) to take limited available size in screen -> divided equally within all childs :: always use expanded/listview/scrollable/widget size less than total screen width you can get it by mediaQuery.of(context).size.width for flexible row

Upvotes: 1

user11378426
user11378426

Reputation:

Remove the Expanded parentWidget and get an Expanded Widget for every Widget

Column(
    children: <Widget>[
      Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.blue,
              child: Text("Hello"),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.red,
              child: Text("Hello"),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.yellow,
              child: Text("Hello"),
            ),
          ),
        ],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.green,
              child: Text("Hello"),
            ),
          ),
        ],
      ),
    ],
  ),

Upvotes: 1

Related Questions