Search code examples
flutterdartflutter-layout

How can I fix this "right Overflowed by 39 Pixels error" in the middle of a row?


I tried alining two rows within a SizedBox-widget and it doesn't look like that there should be an overflow right now, but there is one.

This is the code, and the picture of how it looks like right now is down below.

SizedBox(
          height: MediaQuery.of(context).size.height * 0.1,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [

              //Profile
              Expanded(
                child: Row(
                  children: [
                    OutlinedButton(
                        onPressed: () => {Navigator.push(context,
                            MaterialPageRoute(builder: (_) => const Profile()))
                        },
                        style: OutlinedButton.styleFrom(
                            shape: const CircleBorder(),
                            padding: const EdgeInsets.all(2)
                        ),
                        child: CircleAvatar(
                          backgroundColor: primary,
                          backgroundImage: NetworkImage(profilePath),
                          radius: 24,
                        )
                    ),
                    //rowSpacer,
                    Text(profileName, style: categoryNF),
                  ],),
              ),

              // Likes
              Expanded(
              child: Row (
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  IconButton(
                    onPressed: () => {},
                    icon: const Icon(
                      Icons.favorite_border,
                      size: 32,
                      color: Colors.redAccent,
                    ),
                  ),
                  //rowSpacer,
                  Text("$likes Likes", style: categoryNF),
                ],)
              ),

            ],
          ),
        ),

enter image description here


Solution

  • Try wrap your name Text with Expanded widget like this:

    Expanded(child: Text(profileName, style: categoryNF),),
    

    enter image description here