Как добавить новый виджет при нажатии кнопки

Question

    class CustomFlatButton extends StatefulWidget {
  String ButtonName="";
  CustomFlatButton(String ButtonName){
    this.ButtonName=ButtonName;
  }
  @override
  _CustomFlatButtonState createState() => _CustomFlatButtonState(ButtonName);
}

class _CustomFlatButtonState extends State<CustomFlatButton> {
  String ButtonName="";
  _CustomFlatButtonState(String ButtonName){
    this.ButtonName=ButtonName;
  }
  @override
  Widget build(BuildContext context) {
    return FlatButton(
                                  color: Colors.blue,
                                  textColor: Colors.white,
                                  disabledColor: Colors.grey,
                                  disabledTextColor: Colors.black,
                                  padding: EdgeInsets.all(8.0),
                                  splashColor: Colors.blueAccent,
                                  onPressed: () {
                                    ListWheelScrollView(itemExtent: 31,useMagnifier: true,magnification: 1.5,children: <Widget>[
                                      Container(color: Colors.red,height: 200,width: 200)
                                    ],);
                                  },
                                  child: Text(
                                    ButtonName,
                                    style: TextStyle(fontSize: 20.0),
                                  ),
                                );
  }
}

---

Как отобразить виджет, когда пользователь нажимает кнопку. Здесь в коде

onPressed: () {
                                ListWheelScrollView(itemExtent: 31,useMagnifier: true,magnification: 1.5,children: <Widget>[
                                  Container(color: Colors.red,height: 200,width: 200)
                                ],);
                              }

Я хочу отобразить виджет ListWheelScrollView при нажатии кнопки означает, что при нажатии кнопки должен отображаться ListWheelScrollView.

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

Answer 1

Вы можете создать переменную, которая говорит, что если кнопка нажата, мы назовем это hasPressed, и если это правда, отобразить ListWheelScrollView, но если это ложь, отобразить пустое Container(height: 0, width: 0). При нажатии кнопки setState() вызывается для перестройки виджета. Это будет выглядеть примерно так:

Row(
      children: <Widget>[
        FlatButton(
          color: Colors.blue,
          textColor: Colors.white,
          disabledColor: Colors.grey,
          disabledTextColor: Colors.black,
          padding: EdgeInsets.all(8.0),
          splashColor: Colors.blueAccent,
          onPressed: () {
            setState(() {
              isPressed = true;
            });
          },
          child: Text(
            ButtonName,
            style: TextStyle(fontSize: 20.0),
          ),
        ),
        (isPressed)
            ? ListWheelScrollView(
                itemExtent: 31,
                useMagnifier: true,
                magnification: 1.5,
                children: <Widget>[
                  Container(color: Colors.red, height: 200, width: 200)
                ],
              )
            : Container(
                height: 0,
                width: 0,
              )
      ],
    );

Вы объявите bool isPressed = false, где вы объявите ButtonName. Надеюсь, это поможет, и если да, пожалуйста, проголосуйте, в противном случае оставьте комментарий.