Flutter wrap to end of next line

user_4751645 0
Viewed 623

I have a widget containing two (text) items, one of which has variable length. I want the second item to wrap to the end of the next line if space runs out.

illustration of the desired behavior

Flutter has a widget named Wrap which allows for wrapping content if space runs out, however I have not been able to get the desired result using all kinds of combinations of Wrap, Expanded, Row and Spacer widgets. The closest I got was the second element wrapping to the start of the second row, but I want it to go to the end of the second row.

I am fairly new to Flutter but have found ways to do it in CSS by placing the variable width element in a container and applying flex: 1 0 auto to the container and flex-wrap: wrap and flex-justify: flex-end to the flexbox containing both elements.

I tried putting the first element in an Expanded, but apparently putting an Expanded directly inside a Wrap is not allowed so that gave me errors and no results.

flutter-layout flutter
1 Answers

Put the two sentences into a list like so:

List<TextSpan> reasonList = [TextSpan(text: 'sentence1'), TextSpan(text: 'sentence2') ];

Then:

              Container(
                    child: RichText(
                      text: TextSpan(
                          children: reasonList,
                          style: TextStyle(
                              color: Colors.black, fontSize: 16)),
                    ),
                  );

This not only wraps but gives you more control over every sentence, like gesture detection and color changing.

user_158077800
Related