How do you dynamically add widgets to a row?

Question

I have a DropdownButton (entries of type String) and an IconButton in a Row widget. Each time an entry from the DropdownButton is selected and the IconButton is tapped, an InputChip with the selected entry as its child should be created in a Row widget below the initial Row. How can this be done?

Answer 1

class _MyHomePageState extends State<MyHomePage> {
  List<String> templist = new List();

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
        body: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Wrap(
          children: templist
              .map(
                (f) => Chip(
                  label: Text(f),
                  deleteIcon: CircleAvatar(
                    minRadius: 10.0,
                    child: Icon(
                      Icons.clear,
                      color: Colors.white,
                      size: 20,
                    ),
                  ),
                  deleteIconColor: Colors.red,
                  onDeleted: () {
                    setState(() {
                      templist.remove(f);
                    });
                  },
                ),
              )
              .toList(),
        ),
        new DropdownButton<String>(
          isExpanded: true,
          hint: Text("Click here"),
          items: <String>['A', 'B', 'C', 'D'].map((String value) {
            return new DropdownMenuItem<String>(
              value: value,
              child: new Text(value),
            );
          }).toList(),
          onChanged: (value) {
            setState(() {
              templist.add(value);
            });
          },
        )
      ],
    ));
  }
}