I have two images which is use for pin or unpin data in flutter

Question

I have two images in flutter which is use for pin and unpin the data in list view so my program is that when i click on pin image than unpin image should be hide and when i click unpin image than pin image should hide. so how to implement this thing in flutter.

here is my demo code

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,
                  ),
                ))
          ],
        ),
      ),
    );
  }
}

OMi Shah · Answer 1 · 2020-08-29T11:22:00.623

Create a local variable to keep the track of pinned state. Then update the state of that variable on tap of the button using the setState() method. Also, for showing the relevant image, just check the value of thepinned variable and show the relevant image, if it's true then show the unpin image else pin image.

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,
              ),
            )),
      ),
    );
  }
}

how do i use toastflutter to show pin and unpin in this code — Nikul Boharwal, Aug 29 '20 at 11:38
Call the toast method with your message in the ``onTap: () { ... }`` method. Also, mark my answer if it helped you achieve what you were looking for. :) — OMi Shah, Aug 29 '20 at 11:43

I have two images which is use for pin or unpin data in flutter

1 Answers1