0

enter image description here

How can I detect if a Row will overflow, to hide the overflowing elements and replace them with a single button "+X" to indicate how many elements have been hidden?

Mocking Bird
  • 157
  • 1
  • 1
  • 9

1 Answers1

0

You can check the size of the screen by using

MediaQuery.of(context).size.width

then do the math (divide the widget by the size width then get rounded down. Using below the Truncating Division operator)

<Widget Width> ~/ MediaQuery.of(context).size.width

to find out how many components fit in and check how many will be left out of screen.

For example:

If my Widget width is 20 and my screen (or Parent Widget) width is 110, the above operation will result in 5

which means 5 elements will be rendered and the others should be factored in your "+ button"

If you want to know your Parent Widget Width and it is variable, check this answer here: https://stackoverflow.com/a/41558369/5666202

Fernando Rocha
  • 2,416
  • 3
  • 15
  • 28
  • How do you do that if the children can have different sizes ? – Mocking Bird Nov 17 '22 at 08:46
  • @MockingBird you should have a way of calculating that widget, for example a container width should be set as per example “number of characters * X” and then add that number to some variable that you can access – Fernando Rocha Nov 17 '22 at 12:40
  • @MockingBird did that solve your problem? – Fernando Rocha Dec 04 '22 at 03:56
  • I've found a package name RowOverflowCount (or something like that) and after some fixes (didn't work for some reason), it does exactly what I was looking for. But yeah, internally it does exactly what you said, it takes a LayoutBuilder and from that it calculates how many elements it can fit in accounting for the inherent length of the element (given its words). – Mocking Bird Dec 05 '22 at 08:35