Testing Text overflow etc

Help General
1

So, we often have issues with Text widget and it’s content which is longer than expected etc, is overflowing, is not surrounded with Flexible or Expanded etc.

What do you people do to prevent that?

I am thinking about creating a redirecting proxy widget that would duplicate the text passed by set or flexible number of times. Aka duplicate text 1-4x so testers can use this and see themselves how it behaves.

2

You have to contain (restrict) your Text.

You can do it by using Expanded when it is inside a Flex (which Column and Row inherits) or, if your layout is not like that (for instance: a Text inside a column, since Expand in this case will expand vertically), restrict your Text by maximum number of lines.

For instance:

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Home()));
}

final longText = "This is a really really long text " * 4;

final class Home extends StatelessWidget {
  const Home();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox(
          width: 200,
          child: Column(
            children: [
              Text("Rows:"),
              Row(
                children: [
                  Text("Hi"),
                  // This will restrict the text horizontally, so overflow works
                  Expanded(
                    child: Text(longText, overflow: TextOverflow.ellipsis),
                  ),
                ],
              ),
              Divider(),
              Text("Columns:"),
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  // Expanded would not work here because the restriction
                  // would be vertical (and texts are horizontal)

                  // maxLines will restrict your text, applying the overflow
                  Text(longText, overflow: TextOverflow.ellipsis, maxLines: 1),
                  Divider(),
                  Text(longText, overflow: TextOverflow.ellipsis, maxLines: 2),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

image
image494×350 9.13 KB

3

I know how to do it, as mentioned in my post. The question was how you or your testers test it? Aka if somebody have some good way how to make text times 2-4, so instead of “abc” I see i.e. “abcabcabcabc” so testers can properly test whether longer texts do not break anything or if they work properly

4

Rude. :unamused:

Because of this I’m proposing a very bad solution:

(yes, it works. * duplicates a string x times)

5

Rude. :unamused:

What do you mean?

("This is a really really long text " * (kDebugMode ? 1 : 4))

Haha, I would rather create a proxy Text2 or something widget than this, so I can also turn it on/off from config (that can be also done here, true) + without having to write * (kDebugMode ? 1 : 4)) everywhere.

6

Out of topic but you can also use the lorem package for long text generation and use this in your widget tests:

1 Like
7

Thanks for this tip. I would love to do this and more, but we do not have budget for proper UI widget tests. :smiley:

So I want to choose some more practical solution within our scope. That “Text2” sounds the best so far. Doing this + adding a simple config to debug menu sounds as the simplest and fastest way.