Как добавить виджет по позиции во время выполнения в флаттере?

Question

Я пытаюсь добавить кнопку на изображении в положении крана. Мне удалось получить позицию при нажатии с помощью параметра детализации onTapUp.

Однако я не могу добавить значок кнопки, когда пользователь нажимает на изображение.

Ниже приведен код моего образца.

class ArticlesShowcase extends StatelessWidget {
  final commentWidgets = List<Widget>();
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
          child: new Center(
            child: Image.network(
              'https://via.placeholder.com/300x500',
            ),
          ),
          onTapUp: (detail) {
            final snackBar = SnackBar(
                content: Text(detail.globalPosition.dx.toString() +
                    " " +
                    detail.globalPosition.dy.toString()));
            Scaffold.of(context).showSnackBar(snackBar);
            new Offset(detail.globalPosition.dx, detail.globalPosition.dy);
            var btn = new RaisedButton(
              onPressed: () => {},
              color: Colors.purple,
              child: new Text(
                "Book",
                style: new TextStyle(color: Colors.white),
              ),
            );
            commentWidgets.add(btn);
          },
        );          
  }
}

Я пытался добавить кнопку в список, но без шансов.

Answer 1

Итак, есть пара вещей, которые вам не хватает.Во-первых, вы не можете обновить состояние StatelessWidget, поэтому вам нужно использовать StatefulWidget.

Во-вторых, при использовании StatefulWidget вам нужно вызвать setState для обновления состояния.Вам также нужно будет использовать виджеты Stack и Positioned, чтобы расположить кнопки в определенном месте.Ваш код должен заканчиваться и выглядеть следующим образом.

class ArticlesShowcaseState extends State<ArticlesShowcase> {
  final commentWidgets = List<Widget>();
  void addButton(detail) {
    {
      final snackBar = SnackBar(
          content: Text(
              "${detail.globalPosition.dx.toString()} ${detail.globalPosition.dy.toString()}"));
      Scaffold.of(context).showSnackBar(snackBar);
      var btn = new Positioned(
          left: detail.globalPosition.dx,
          top: detail.globalPosition.dy,
          child: RaisedButton(
            onPressed: () => {},
            color: Colors.purple,
            child: new Text(
              "Book",
              style: new TextStyle(color: Colors.white),
            ),
          ));

      setState(() {
        commentWidgets.add(btn);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
            GestureDetector(
              child: new Center(
                child: Image.network(
                  'https://via.placeholder.com/300x500',
                ),
              ),
              onTapUp: (detail) => addButton(detail),
            )
          ] +
          commentWidgets,
    );
  }
}