Можно ли показать / скрыть текстовые поля во флаттере на основе флажка

Question

Я пытаюсь использовать флажок, чтобы показать / скрыть 2 текстовых поля во флаттере. Я попробовал приведенный ниже код, думая, что он будет использовать состояние флажка для отображения полей. но это не работает.

Сам флажок выполняет переключение между истиной и ложью, но в макете нет изменений.

CheckboxListTile(
                              title: Text("Do you want to update your price?"),

                      controlAffinity: ListTileControlAffinity.leading,
                          value: priceupdate_value,
                          onChanged: (bool priceupdateValue) {
                            setState(() {


                              priceupdate_value = priceupdateValue;

                            });
                            if(priceupdate_value == true){

                              Column(
                                children: <Widget>[
                                  TextFormField(
                                    decoration: InputDecoration(
                                      labelText: 'New Price',
                                    ),

                                  ),
                                  TextFormField(
                                    decoration: InputDecoration(
                                      labelText: 'Update Other Information',
                                    ),

                                  ),

                                ],
                              );

                            }

                          },

                    ),

Answer 1

Я сделал несколько небольших изменений, и все в порядке. Я надеюсь, что он подойдет вам.

Column(
    children: <Widget>[
      if (priceupdate_value)
        Column(
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                labelText: 'New Price',
              ),
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Update Other Information',
              ),
            ),
          ],
        ),
      CheckboxListTile(
        title: Text("Do you want to update your price?"),
        controlAffinity: ListTileControlAffinity.leading,
        value: priceupdate_value,
        onChanged: (bool priceupdateValue) {
          setState(() {
            priceupdate_value = priceupdateValue;
          });
        },
      ),
    ],
  ),

Вы можете скопировать код здесь в dartpad.dev и проверить его сразу: https://gist.github.com/malibayram91/0ba5c3c5fbdb89f9c2a6a4ec3333d070

Answer 2

Оберните его виджетом видимости:

Visibility(
    visible: priceupdate_value,
    child: TextFormField(...),
)

И вы должны создать свой виджет столбца вне метода onPressed (например, оберните ваш CheckBoxTileListWidget виджетом столбца, а затем в дочерние элементы добавьте и ваш CheckBoxTileList, и ваш TextInputField)

Что-то вроде

Column(
    children: <Widget>[
        Visibility(
            visible: priceupdate_value,
            child: TextFormField(
                decoration: InputDecoration(
                    labelText: 'Update Other Information',
                ),
            ),
        ), 
        CheckBoxTileList(
            title: Text("Do you want to update your price?"),
            controlAffinity: ListTileControlAffinity.leading,
            value: priceupdate_value,
            onChanged: (bool priceupdateValue) {
                setState(() {
                    priceupdate_value = priceupdateValue;
                });
            },
        ),
    ],
),