Flutter/Dart - How to process Json data which contains a comma separated list?

Question

I've got a PageViewBuilder which uses a Map<String> of json data containing a String called name and another called tagname . The problem is that the tagname string is actually a comma-separated list of three tags which print out as "boat,grass,toads"; But I'd like to separate this String so that I can make each item a clickable button. IE:

FlatButton( onPressed: () => boat(),
              text: "boat", 
            );

FlatButton( onPressed: () => grass(),
              text: "grass", 
            );

FlatButton( onPressed: () => toads(),
              text: "toads", 
            );

I tried to using Dart's split function like this;

var splitag = tagname.split(",");
var splitag1 = splitag[0];
var splitag2 = splitag[1];
var splitag3 = splitag[2];

But this gives an error if any of the three tag names are void.

So I tried this;

String splitagone = splitag1 ?? "";
String splitagtwo = splitag2 ?? "";
String splitagthree = splitag3 ?? "";

But this still gave me an error. So can anyone suggest a different way to accomplish what I need? Here's the full code;

  class SpeakContent {
  final String name, tagname;

  SpeakContent({
    this.name,
    this.tagname
  });

  factory SpeakContent.fromJson(Map<String, dynamic> jsonData) {
    return SpeakContent(
      name: jsonData['name'],
      tagname: jsonData['tagname'],
    );
  }
}

 class StageBuilder extends StatelessWidget {

  final List<SpeakContent> speakcrafts;
  StageBuilder(this.speakcrafts);

  @override
  Widget build(context) {
    return PageView.builder(
      itemCount: speakcrafts.length,
      itemBuilder: (context, int currentIndex) {
        return createViewItem(speakcrafts[currentIndex], context);
      },
    );
  }

  Widget createViewItem(SpeakContent speakcraft, BuildContext context) {

    return Column(
      children: <Widget>[
        Container(
          child: Text(
            speakcraft.name,
          ),
        ),
        Container(child:
            FlatButton( onPressed: () => boat(),
              child: Text('boat'),
            ),
        ),
        Container(child:
        FlatButton( onPressed: () => grass(),
          child: Text('grass'),
        ),
        ),
        Container(child:
        FlatButton( onPressed: () => toads(),
          child: Text('toads'),
        )
        ),
      ],
    );
  }
}

Answer 1

You can do something like this..

  Widget createViewItem(SpeakContent speakcraft, BuildContext context) {
    
    List<Widget> columnChildren = [];
    Text name = Text(speakcraft.name);
    columnChildren.add(name);

    speakcraft.tagname.split(',').forEach((String tag) {
      FlatButton tagButton = FlatButton(
        child: Text(tag),
        onPressed: (){},
      );
      columnChildren.add(tagButton);
    });

    return Column(
      children: columnChildren,
    );
    
  }

Answer 2

You can try:

var response = await http.get(
        Uri.encodeFull("...."),
        headers: {
          ...
        }
    );

this.setState(() {
  testList = json.decode (response.body) as List;
**testList[0];
testList[1];**