Динамически добавлять селектор на флаттер

Question

Я пытаюсь динамически добавить ChoiceChip / InputChip внутри контейнера. Я выбираю варианты из списка, и они добавляются в контейнер. Но я получаю ошибку горизонтального переполнения при добавлении вариантов. Я использовал виджет Wrap, но он не работает. Я хочу использовать перенос, чтобы следующий выбранный чип находился на следующей строке. Может кто-нибудь, пожалуйста, помогите?

List<Widget> _specialWidget = List<Widget>();
                         DropdownButtonHideUnderline(
                            child: DropdownButton<String>(
                              hint: Text(Strings.searchJob),
                              value: _jobTitle == null
                                  ? null
                                  : Lists.jobCatagories[_jobTitle],
                              items: Lists.jobCatagories.map((String value) {
                                return new DropdownMenuItem<String>(
                                  value: value,
                                  child: new Text(value),
                                );
                              }).toList(),
                              onChanged: (value) {
                                setState(() {
                                  _jobTitle =
                                      Lists.jobCatagories.indexOf(value);
                                  _specialWidget.add(Special());
                                });
                              },
                            ),
                          ),

Здесь добавляются фишки из StatefulWidget

                     Container(
                        child: Row(
                          children: List.generate(
                            _specialWidget.length,
                            (i) {
                              return _specialWidget[i];
                            },
                          ),
                        ),
                      ),

class Special extends StatefulWidget {
  @override
  _SpecialState createState() => _SpecialState();
}

class _SpecialState extends State<Special> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      children: <Widget>[
        InputChip(
          label: Text(
            _jobTitle == null ? null : Lists.jobCatagories[_jobTitle],
          ),
        ),
      ],
    );
  }
}

https://i.stack.imgur.com/8KD8M.png

Answer 1

Вы должны заменить Row в своем коде на Wrap.

 Container(
    child: Row( // REPLACE THIS WITH Wrap
    children: List.generate(
      _specialWidget.length,
      (i) {
        return _specialWidget[i];
      },
    ),
  ),
 ),

В настоящее время ваш виджет Wrap s единственный и добавляет его как дочерние элементы Row, который побеждает цель Wrap. Wrap должен заменить Row в вашем случае, потому что, как вы уже знаете, его задача - разорвать строку виджетов, если они переполнятся - точно так же, как Text виджет сделает с длинной строкой.

Подробнее о виджете Wrap: https://api.flutter.dev/flutter/widgets/Wrap-class.html