Comma separated in AutoCompleteTextField in flutter - flutter

Question

I am using a code which is working well and giving suggestion in dropdown menu by send a HTTP GET request.
import 'package:http/http.dart' as http;
import 'user.dart';
import 'dart:convert';
import 'package:autocomplete_textfield/autocomplete_textfield.dart';
class AutoCompleteDemo extends StatefulWidget {
AutoCompleteDemo() : super();
final String title = "AutoComplete Demo";
#override
_AutoCompleteDemoState createState() => _AutoCompleteDemoState();
}
class _AutoCompleteDemoState extends State<AutoCompleteDemo> {
AutoCompleteTextField searchTextField;
GlobalKey<AutoCompleteTextFieldState<User>> key = new GlobalKey();
static List<User> users = new List<User>();
bool loading = true;
void getUsers() async {
try {
final response =
await http.get("https://jsonplaceholder.typicode.com/users");
if (response.statusCode == 200) {
users = loadUsers(response.body);
print('Users: ${users.length}');
setState(() {
loading = false;
});
} else {
print("Error getting users.");
}
} catch (e) {
print("Error getting users.");
}
}
static List<User> loadUsers(String jsonString) {
final parsed = json.decode(jsonString).cast<Map<String, dynamic>>();
return parsed.map<User>((json) => User.fromJson(json)).toList();
}
#override
void initState() {
getUsers();
super.initState();
}
Widget row(User user) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
user.name,
style: TextStyle(fontSize: 16.0),
),
SizedBox(
width: 10.0,
),
Text(
user.email,
),
],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
loading
? CircularProgressIndicator()
: searchTextField = AutoCompleteTextField<User>(
key: key,
clearOnSubmit: false,
suggestions: users,
style: TextStyle(color: Colors.black, fontSize: 16.0),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(10.0, 30.0, 10.0, 20.0),
hintText: "Search Name",
hintStyle: TextStyle(color: Colors.black),
),
itemFilter: (item, query) {
return item.name
.toLowerCase()
.startsWith(query.toLowerCase());
},
itemSorter: (a, b) {
return a.name.compareTo(b.name);
},
itemSubmitted: (item) {
setState(() {
searchTextField.textField.controller.text = item.name;
});
},
itemBuilder: (context, item) {
// ui for the autocompelete row
return row(item);
},
),
],
),
);
}
}
Requirement:
I want to take the input something like this so that every selected item is separated and the drop-down list shown after an item selected.The user could be able to add its own new item which isn't from the list.