CODEWITHSUNDEEP
flutterdart
LegendWK
LegendWK

Reputation: 194

Text overflowing and cannot be controlled

I've got an issue where text inside a Column inside a Row overflows the other things in the Row. This is what it looks like when the description is short.

No overflow

But if the description gets longer it overflows and hides the settings button:

overflow

I've tried using the overflow: TextOverflow.ellipsis, and TextOverflow.clip properties in the Text widget, this does nothing.tried to change the Column and Row to Wrap widgets

child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          CircleAvatar(
                            backgroundImage: NetworkImage(
                                userData.profilePic ?? kBackupProfilePic),
                            radius: 40.0,
                          ),
                          SizedBox(width: 20.0),
                          Column(
                            children: <Widget>[
                              SizedBox(height: 20.0),
                              Text(
                                userData.name ?? "Cannot find name",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontSize: 20.0,
                                ),
                              ),
                              SizedBox(height: 5.0),
                              Text(
                                userData.description ??
                                    "Cannot find description",
                                overflow: TextOverflow.ellipsis,
                                maxLines: 5,
                                style: TextStyle(),
                              ),
                            ],
                          ),
                          SizedBox(width: 40.0),
                          IconButton(
                            icon: Image.asset('assets/cogwheel.png'),
                            iconSize: 50,
                            onPressed: () {
                              openSettings();
                            },
                          ),
                        ],
                      ),

I've tried placing the the Row in a Container with a Flexible, but that causes red screen Flutter error.

When I replace the Row and Columns with Wrap widgets I get:

wrap


child: Wrap(
                        direction: Axis.horizontal,
                        children: <Widget>[
                          CircleAvatar(
                            backgroundImage: NetworkImage(
                                userData.profilePic ?? kBackupProfilePic),
                            radius: 40.0,
                          ),
                          SizedBox(width: 20.0),
                          Wrap(
                            direction: Axis.vertical,
                            children: <Widget>[
                              SizedBox(height: 20.0),
                              Text(
                                userData.name ?? "Cannot find name",
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontSize: 20.0,
                                ),
                              ),
                              SizedBox(height: 5.0),
                              Text(
                                //"brobbi",
                                userData.description ??
                                    "Cannot find description",
                                overflow: TextOverflow.clip,
                                maxLines: 5,
                                style: TextStyle(),
                              ),
                            ],
                          ),
                          SizedBox(width: 40.0),
                          IconButton(
                            icon: Image.asset('assets/cogwheel.png'),
                            iconSize: 50,
                            onPressed: () {
                              PopupLayout(top: topMarginPopupLayout).showPopup(
                                  context, SettingsScreen(), 'Cibus Settings');
                            },
                          ),
                        ],
                      ),

This cannot be too hard. I just want my text to linebreak or cut if it's so long that it'll cause overflows.

Upvotes: 0

Views: 60

Answers (1)

HasilT
HasilT

Reputation: 2609

For TextOverflow to the framework should know where is the current widget's bounds are. Inside Column widget framework cant determine cross axis (horizontal) bounds.

To make ellipsis work you have to wrap that text widget inside an Expanded widget with a parent Row. or wrapping your Column inside Expanded would do fine.

Row(children:[
        //Circle Avatar here
        Expanded( // Wrap Expanded here
         child:Column(
           children: <Widget>[
             SizedBox(height: 20.0),
            Text(
              "Cannot find name",
            overflow: TextOverflow.ellipsis,
            maxLines:1,
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
          SizedBox(height: 5.0),
          Text(
             "Cannot find description",
            overflow: TextOverflow.ellipsis,
            maxLines: 5,
            style: TextStyle(),
          ),
        ],
      ),
    ),
      ])

Upvotes: 1

Related Questions