'divide the spaces evenly IF items fit within the device's screen
I have a top section that contains codes : "A" "B" "C" "D" "E"
If I simply use these text, I could just use Row widget and wrap each widget with Expanded.
However, when I click in each of these letters, they expand to their corresponding value.
e.g. when A is clicked, it will change to Anonymous.
The top section will now become : "Anonymous" "B" "C" "D" "E"
If the screen isn't wide enough, it will cause overflow error.
What I want to happen is that if the device's screen is wide enough, it would fit all of the Text widget evenly. If not, it would scroll horizontally.
Solution 1:[1]
Using either CustomMultiChildLayout or write your own custom render object, would be the most efficient way to handle this situation.
A slightly sub-optimal but still very good method is to use TextPainter to figure out the width of each of the texts, and use LayoutBuilder to obtain the total available width, then do your own calculation to decide if they will fit or not, and then design your layout accordingly.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | WSBT |