Flutter: Text overflow in appbar

user_9175247 0
Viewed 598

I have an appbar that looks like this:

appbar

The user can change the text in the appbar. However, a text that is too long causes an overflow error:

appbar overflow

I figured wrapping the specific Text inside a Flexible widget would solve this issue but I get an error that I could not fix when using the Flexible approach:

RenderBox was not laid out: RenderFlex#0ac34 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Here is the working code from the screenshots:

PreferredSize(
        preferredSize: const Size.fromHeight(kToolbarHeight + 60),
        child: Container(
          color: getAppBarColor(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      children: [
                        Visibility(
                          visible: hasBack,
                          child: IconButton(
                            onPressed: () {
                              Navigator.pop(context);
                            },
                            icon: Icon(Icons.arrow_back_ios,
                                color: getContentColor()),
                          ),
                        ),
                        Text(
                          title,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: fontSize,
                            color: getContentColor(),
                            fontWeight: FontWeight.w600,
                          ),
                        )
                      ],
                    ),
                  ),
                  const Spacer(),
                  Visibility(
                    visible: hasSettings,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: getIconButton(context),
                    ),
                  ),
                  ...getExtraIconButton()
                ],
              ),
            ],
          ),
        ),
      )

I want the text to be dynamically abbreviated with "..." if he is too long. A dirty fix was to use a SizedBox, however, I would somehow need the SizedBox to have a non-static width for it to work on every device. How do I achieve the desired behaviour?

flutter-layout dart flutter
1 Answers

Your Text widget is inside a Row, therefore wrap it inside an Expanded widget. You already have the TextOverflow.ellipsis on it so this should work. What this does is devote most of the horizontal space to it (without having to add a fixed width SizedBox or Container around it).

Therefore, remove the nested Row containing the Text and the back button, and just keep the outer Row; no need for the Spacer widget, so just use an Expanded widget around the Text widget and that should work. This gist should point you in the right direction. gist.github.com/romanejaquez/8f9c7b0cf2ceb873ddef5dd7a625b4ec

user_8713640
Related