How to split a user inputted string with a comma - string

Question

so my teammate asked me to fix something. But the problem is I don't have any idea what to do.
He asked me to divide the address output with commas -
Ex. Barangay, House Number, Municipality, Street.
But I don't know how to seperate the contents of a string.
The address string contains all the user input data.
This is the code:
Widget buildUserAddress() {
return Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.only(top: 10, bottom: 20),
child: Text(
address,
maxLines: 3,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
),
),
);
}

Answer 1

below the complete Widget class. As you can see:
I split the string and I got a List
I put all in column (be free to change how to display)
For each element in the list, make a Text widget with label the address element
toList() -> list of Text widgets containing each one a part of address
... -> spread operator in order to display each element of the widget list
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return buildUserAddress();
}
Widget buildUserAddress() {
var address = "Barangay, House Number, Municipality, Street";
List<String> addressList = address.split(',');
return Container(
width: 500,
padding: const EdgeInsets.only(top: 10, bottom: 20),
child: Column(children: [
...addressList
.map(
(addressElement) => Text(
addressElement,
maxLines: 3,
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 15,
),
),
)
.toList(),
]),
);
}
}

Answer 2

List<String> components = address.split(',');
This will split the address and you will get the component list.
And use splitted components to build UI like this.
ListView.builder(
itemCount: components.length,
itemBuilder: (context, index) => Text(components[index])
)