Break and wrap widget to next line in a row but start from extreme left of parent widget

Question

I want to achieve this layout

I used RichText to do this earlier(Flutter- wrapping text) but now I need to use a custom Text Widget (which a library returns) with a inbuilt Text widget but unfortunately the TextSpan used with RichText accepts only TextSpan as children and not any other type of Widgets.

When using row this happens D: which i dont need

and when i use a Wrap Widget this happens which i dont need either

I think it would be impossible to do – Ivo Jul 01 '22 at 08:03 — Ivo, Jul 01 '22 at 08:03
Wrapping the `Row` inside a `Column` widget might work – Priyaank Jul 01 '22 at 08:34 — Priyaank, Jul 01 '22 at 08:34

score 2 · Accepted Answer · answered Jul 01 '22 at 08:37

try this way,

  RichText(text: TextSpan(
                 children: [
                      WidgetSpan(child: Container()),
                      TextSpan(text: 'hs dhjfb jkwbfkjw hkjfhkwjk jwjbjfwkj wb')
                           ]
                        ))

score 1 · Answer 2 · answered Jan 25 '23 at 16:07

Wrap(
  children: [
      ...splitToManyWidgets(text1),
      ...splitToManyWidgets(text2),
  ],
),

///////

List<Widget> splitToManyWidgets(String str) {
    List<Widget> result = [];
    List<String> list = str.split(" ");
    for (var element in list) {
      result.add(
        Text("$element ")
      );
    }
    return result;
  }

Break and wrap widget to next line in a row but start from extreme left of parent widget

2 Answers2