У меня есть два изображения, которые используются для закрепления или открепления данных во флаттере

Question

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

вот мой демонстрационный код

class PinUnpinData extends StatefulWidget {
  @override
  _PinUnpinDataState createState() => _PinUnpinDataState();
}

class _PinUnpinDataState extends State<PinUnpinData> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "Pin-Unpin",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            InkWell(
                onTap: () {
                  
                },
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: Image.asset(
                    "assets/images/pin.png",
                    height: 20,
                    width: 20,
                  ),
                )),
            InkWell(
                onTap: () {},
                child: Padding(
                  padding: const EdgeInsets.all(20),
                  child: Image.asset(
                    "assets/images/unpin.png",
                    height: 20,
                    width: 20,
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

Answer 1

Создайте локальную переменную, чтобы отслеживать pinnedгосударство. Затем обновите состояние этой переменной нажатием кнопки, используяsetState()метод. Кроме того, для отображения соответствующего изображения просто проверьте значение параметраpinned переменную и покажите соответствующее изображение, если это правда, то покажите открепленное изображение, иначе закрепите изображение.

class _PinUnpinDataState extends State<PinUnpinData> {

  bool pinned = false; // to keep track if it's pinned or not

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          "Pin-Unpin",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
      backgroundColor: Colors.white,
      body: Center(
        child: InkWell(
            onTap: () {
              setState(() {
                pinned = pinned ? false : true; // check if pinned is true, if its true then set it false and voice versa
              });
            },
            child: Padding(
              padding: const EdgeInsets.all(20),
              child: Image.asset(
                pinned
                    ? "assets/images/unpin.png" //show this image when it's pinned
                    : "assets/images/pin.png", // show this image when it not pinned
                height: 20,
                width: 20,
              ),
            )),
      ),
    );
  }
}