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).

i encounter this and my solution is store them on a textfield and made the textfield unable so user cant interact with it — Raine Dale Holgado, Sep 04 '20 at 00:29
@Reign textfield is for input. We are merely receiving and displaying static text from a JSON file onto the page. Nothing to do with textfields or modification. Merely want to display the fixed text in the same paragraph, formatted with styling for various words and parts of the paragraph. This is easy to do if we want them to be in a list, using listview...but that puts them in a separate line for each. We want them in the same paragraph. — d410, Sep 04 '20 at 00:32
yep i know that. but you can unable = false the textfield so you cant interact with it , it just like readonly function. because textfield can read, bold, italic, etc. And on mine i just use the initialvalue to store my data to the textfield. — Raine Dale Holgado, Sep 04 '20 at 00:38
if you find a way to do so, let me know i also need it hahahahah — Raine Dale Holgado, Sep 04 '20 at 00:39
yep, you need some builder, like [buildTextSpan](https://stackoverflow.com/a/59773962/2252830) for example — pskink, Sep 04 '20 at 03:45

score 2 · Accepted Answer · answered Sep 04 '20 at 07:23

2

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

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

answered Sep 04 '20 at 07:23

MickaelHrndz

3,604
1
13
23

Thanks for your response. Yeah, I was working with that yesterday - a for loop. Figured I need to loop through the data and create the list. Then pass the list to the children element of RichText or Text.rich. Will work on that today. Thanks again. – d410 Sep 04 '20 at 12:23
@pskink - Thanks. Gives me some ideas. Can create a list of InlineSpans, added to children, and return the list. Sounds good. Will explore that. THANKS! – d410 Sep 04 '20 at 12:30
Thanks @MickaelHmdz ...it worked perfectly! 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: [ for (var string in list) TextSpan(text: string, style: TextStyle(color: Colors.black)), ]), ), ), – d410 Sep 04 '20 at 13:10

d410 · Answer 2 · 2020-09-10T18:52:23.420

0

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:

edited Sep 10 '20 at 18:52

answered Sep 04 '20 at 13:16

d410

68
1
12

actually i dont know what you want to do here: if you wanted to show all of your strings from `list` in one widget (with the same styling) why didn't you simply concatenate them? – pskink Sep 04 '20 at 13:50
No, want to show with varying styles. Am merely proceeding one step at at time. So, this first step is done - How to display the separate strings in the same paragraph programmatically. Now comes the second step - How to handle the styling of each string. Have already moved from an array/list of strings to an array/list of objects/maps - {"text": " asdf adood", "style": "bold"}. Now working on that. Thanks. Will be interpreting the style element and seeking to assign a named TextStyle. Need to put the above InlineSpan code into a function (I imagine) and then pass it. – d410 Sep 04 '20 at 14:21
Am quite new to Flutter....discovered it two weeks ago. Very powerful SDK. Was doing ReactNative before. Enjoying the Flutter/Dart experience, so far. – d410 Sep 04 '20 at 14:23
Worked it out. Used tertiary operators to handle the style...PROBLEM TOTALLY SOLVED, including with styling. THANKS Guys !!! @MickaelHmdz and psink – d410 Sep 04 '20 at 14:51

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

2 Answers2