Align(
                            alignment: Alignment(0.0, -0.275),
                              child: InkWell(
                                child: SizedBox(
                                  width: 30.0,
                                  height: 30.0,
                                  child: Image.asset(
                                      'assets/images/App/exchange_ICONS.png'),
                                ),
                              ),
                          ),

                          Align(
                            alignment: Alignment(-0.700, -0.477),
                            child: SizedBox(
                              width: 60,
                              height: 60,
                              child: Image.asset(
                                  'assets/images/App/exchange_USDT.png'),
                            ),
                          ),
                          Align(
                            alignment: Alignment(0.700, -0.477),
                            child: SizedBox(
                              width: 60,
                              height: 60,
                              child: Image.asset(
                                  'assets/images/App/exchange_TRX.png'),
                            ),
                          ),

Hello everyone. I hope you all are okay. I'm a newbie in Flutter development.

Please need your help and advice. I have 3 images on application. I just want to implement that the images on the left and right would switch their position every time get clicked on the middle image. I would much appreciate your advice and answer on this. Thank you.enter image description here

CodePudding user response：

Define a bool as bool as bool switch = true; and on click of center image change the value of bool to switch the images.

                   Align(
                        alignment: switch ? Alignment.centerRight : Alignment.centerLeft,
                          child: InkWell(
                            child: SizedBox(
                              width: 30.0,
                              height: 30.0,
                              child: Image.asset(
                                  'assets/images/App/exchange_ICONS.png'),
                            ),
                          ),
                      ),
                     InkWell(
                      onTap : (){
                      switch = !switch;
                      setState((){});
                      },
                      Align(
                        alignment: Alignment.center,
                        child: SizedBox(
                          width: 60,
                          height: 60,
                          child: Image.asset(
                              'assets/images/App/exchange_USDT.png'),
                        ),
                      ),
                       )
                      Align(
                        alignment: !switch ? Alignment.centerRight : Alignment.centerLeft,
                        child: SizedBox(
                          width: 60,
                          height: 60,
                          child: Image.asset(
                              'assets/images/App/exchange_TRX.png'),
                        ),
                      ),

CodePudding user response：

An easy way would be to switch the image source based on clicks. Something like:

String imageSource1="Path to image 1";
String imageSource2="Path to image 2";
     Row(children: [
              Image.network(imageSource1), //Can be changed to other types
              ElevatedButton(
                onPressed: () {
                  String temp = imageSource1;
                  imageSource1 = imageSource2;
                  imageSource2 = temp;
                  setState(() {}); //Need to force a rebuild
                },
                child: Text(""),
              ),
              Image.network(imageSource2), //Can be changed to other types
            ])

Basically swap the location based on clicks.