'Insert Input Chips From List<String> into TextFormField Flutter on Button Click

I am having a List<String> of cities below

List<String> cities = ["Nairobi", "Tokyo", "Moscow", "Bogota",
 "Helsinki", "Denver", "Stockholm", "Oslo"];

I am taking the cities list and just setting the text to TextFormField using TextEditingController upon a city being selected in showCityPickerDialog which updates the cities string list. Below is the code


TextFormField(
                    cursorHeight: 20,
                    enableInteractiveSelection: false,
                    readOnly: true,
                    focusNode: FocusNode(),
                    controller: TextEditingController(
                        text:
                            cities.isEmpty ? null : "$cities"),
                    onTap: () {
                      showCityPickerDialog();
                    },
                    decoration: InputDecoration(
                      isDense: true,
                      labelText: "Select Cities",
                      border: const OutlineInputBorder(),
                      suffixIcon: IconButton(
                          onPressed: () {
                            showCityPickerDialog();
                          },
                          icon: const Icon(Icons.location_city)),
                    ),
                    validator: (phoneNo) {},
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                  )

What i would like to achieve is instead of just setting the text using TextEditingController(text: cities.isEmpty ? null : "$cities") i would like to use Chips like in below code where the number of chips inside the TextFormField will depend on the length of the list


Chip(
  avatar: CircleAvatar(
    backgroundColor: Colors.grey.shade800,
    child: Text('City Initial'),
  ),
  label: Text('City'),
)
listflutterdartflutter-textformfield


Solution 1:[1]

Maybe you can add chips inside your TextFormField decoration as prefix Widget like this:

          prefix: Row(
                    children: cities
                        .map(
                          (e) => Chip(
                            avatar: CircleAvatar(
                              backgroundColor: Colors.grey.shade800,
                              child: Text('City Initial'),
                            ),
                            label: Text(e),
                          ),
                        )
                        .toList(),
                  )

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ante Bule

Related Questions