Flutter - How to display an array of strings in the same paragraph with varying styling using a builder of some sort?

Question

Any help you could provide would be BEYOND appreciated. I cannot figure this out.

I will be processing JSON datafiles containing varying arrays of strings that we would like all to be displayed within the same single paragraph. Will need to programmatically iterate through the array to dynamically create the widgets that are displayed.

The paragraph will include words that are to be displayed as normal text, bold, and italic. (We can provide the types in a second argument of a structure, but more on that later.)

I can do this manually in Flutter, as displayed here:

This is the code fragment that created this: (am dumming up a data array here...the real ones will be read in at runtime.)

List data = [
    "For example, ",
    "this(1)",
    " is bold. And ",
    "this(2)",
    " is italic. And, finally ",
    "this(3)",
    " is bold and italic."
];
                          
 return Text.rich(
             TextSpan(
                  text: '',
                  children: 
                      <InlineSpan>[
                         TextSpan(
                              text: data[0],
                           ),
                         TextSpan(
                              text: data[1],
                              style: TextStyle(fontWeight: FontWeight.bold,),
                        ),
                                TextSpan(
                                  text: data[2],
                                ),
                                TextSpan(
                                  text: data[3],
                                  style: TextStyle(fontStyle: FontStyle.italic),
                                ),
                                TextSpan(text: data[4]),

                                TextSpan(
                                    text: data[5],
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontStyle: FontStyle.italic)),

                                TextSpan(text: data[6]),
                      ],
                    ),
          );

But, I need to create the widgets programmatically at runtime (using some sort of builder function or something).

Have tried to use RichText and Tech.rich, but to no avail. Also, cannot find any helpful examples about ParagraphBuilder (found the class description, but that is not sufficiently helpful).

Does anyone know how to do something like this in a single paragraph in Flutter, coming from an array/List/Map)

Thanks so much, in advance?

An example of a data array and the code that works manually is displayed below (setting aside the issue of how exactly to provide the style type..which I can explore after I figure out how to even display the strings in the same paragraph from an array).

Answer 1

To generate widgets in a list, you can use a simple for loop :

<InlineSpan>[
  for(var string in data)
    TextSpan(text: string),
]

Answer 2

Thanks @MickaelHrndz and @psink

@MickaelHmdz - It worked perfectly!!! Thanks so much!

Here is the associated code for the first part - Putting the array/List of strings into the same paragraph:

var list = [
      "one asdfads",
      "two fasdf aeer",
      "three asdf 23v ar uppo  ",
      "four aspl ojv mepfif hepv,"
    ];      

...

body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: RichText(
          text: TextSpan(children: <InlineSpan>[
            for (var string in list)
              TextSpan(text: string, style: TextStyle(color: Colors.black)),
          ]),
        ),
      ),

And here is a screenshot of the result on the phone:

UPDATE: Used ternary operators to handle the styling within the .

Works perfectly, with styling!!!! Thanks Guys!

Here is the updated result: