Telegram API Question posted in
A comprehensive official documentation can be found here.

track which container was clicked on in flutter – Telegram API

I have 3 containers and in each picture, when you click on which an icon appears. How to assign a value to each container, so that when you click it, you can change it too. Or how to track which container was clicked on

class _EditAccountScreenState extends State<EditAccountScreen> {
bool checkboxValue = false;
...
                          child: GestureDetector(
                            onTap: () { 
                              setState(() {
                                checkboxValue = !checkboxValue;
                              });
                            },
                            child: Padding(
                                child: Row(
                                children: <Widget> [
                                  Container( 
                                    child: Stack(
                                      children: <Widget>[
                                        Image.asset('assets/images/telegram-512.png',fit: BoxFit.fill),
                                        Positioned(
                                          bottom: 0, right: 15, //give the values according to your requirement
                                          child: checkboxValue
                                              ? Container(
                                                  decoration: BoxDecoration(
                                                      color: Colors.green,
                                                      borderRadius:BorderRadius.circular(100)
                                                    ),
                                                    child: Icon(
                                                      Icons.check,
                                                      color: Colors.white,
                                                      size: 15,
                                                    )
                                                  )
                                              : Container(),),],),),
                                  Container(
                                    child: Stack(
                                      children: <Widget>[
                                        Image.asset('assets/images/Viber-Logo.png',fit: BoxFit.fill),
                                        Positioned(
                                          bottom: 0, right: 15, //give the values according to your requirement
                                          child: checkboxValue
                                              ? Container(
                                              decoration: BoxDecoration(
                                                  color: Colors.green,
                                                  borderRadius:BorderRadius.circular(100)
                                              ),
                                              child: Icon(
                                                Icons.check,
                                                color: Colors.white,
                                                size: 15,
                                              )
                                          )
                                              : Container(),),],),),
Tags:

2

Answers


  1. 0

    Use Gesture Detector to detect Taps on containers.

    Here is an example related to this:

        Container(
  alignment: FractionalOffset.center,
  color: Colors.white,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Icon(
          Icons.lightbulb_outline,
          color: _lights ? Colors.yellow.shade600 : Colors.black,
          size: 60,
        ),
      ),
      GestureDetector(
        onTap: () {
          setState(() {
            _lights = true;
          });
        },
        child: Container(
          color: Colors.yellow.shade600,
          padding: const EdgeInsets.all(8),
          child: const Text('TURN LIGHTS ON'),
        ),
      ),
    ],
  ),
)
    Login or Signup to reply.
  2. 0

    First of All Make a Integer Variable and then set its value to -1 by default

    int selectedContainerIndex = -1;

    Now, You Can Wrap each of your Container in seperate GestureDetector, and then on the onTap method you can set the selectedContainerIndex value of your container according to you.

    See the below Code

       Stack(
      children: [
        //First Container
        GestureDetector(
          onTap: () {
            selectedContainerIndex = 0;
            setState(() {});
          },
          child: new Container(),
        ),
        //Second Container
        GestureDetector(
          onTap: () {
            selectedContainerIndex = 1;
            setState(() {});
          },
          child: new Container(),
        ),
        //Third Container
        GestureDetector(
          onTap: () {
            selectedContainerIndex = 2;
            setState(() {});
          },
          child: new Container(),
        ),
      ],
    ),

    Now To know which Container was tapped you can always use the selectedContainerIndex Value

    print(selectedContainerIndex);

    NOTE: If your containers are more in numbers say 4 or 5, then I would recommend you to use good practice and show those using some dynamic listview builder, instead of hardcoding them each.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search