我如何更改图标按钮中的图标

Question

I am trying to build a whatsapp clone and when I was working on the changing the camera from front and back. I was trying to change the Icon in the Icon button but it was not changing

I will attach my code file below

    Widget bottomIcon({Icon icon,double size,Function onpress}){
        return IconButton(
          icon: icon,
          iconSize: size,
          color: Colors.white,
          onPressed: onpress,
        );
      }
    
    Icon iconForcam=Icon(Icons.camera_rear);
    
      @override
      Widget build(BuildContext context) {
        if (!controller.value.isInitialized) {
          return Container();
        }
        return MaterialApp(
          home: Padding(
            padding: const EdgeInsets.all(1.0),
            child: Stack(
              fit: StackFit.expand,
              children: [
                 CameraPreview(controller),
                Positioned(
                  bottom: 0,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      SizedBox(width: 20.0,),
                      bottomIcon(icon: Icon(Icons.flash_on_rounded),size: 50.0),
                      SizedBox(width: 20.0,),
                      bottomIcon(icon: Icon(Icons.fiber_manual_record_outlined),size: 100.0),
                      SizedBox(width: 30.0,),
                      bottomIcon(icon: iconForcam,size: 50.0,onpress: (){
                        setState(() {
                          if(iconForcam == Icon(Icons.camera_front)){
    
                            iconForcam = Icon(Icons.camera_rear);
                          }else if(iconForcam == Icon(Icons.camera_rear)){
                            print('rearcam');
                            iconForcam = Icon(Icons.camera_front);
                          }
                        });
                        //toggleCamera();
                      }),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
      }

I have the doubt that in the if I can comapre two icons in the if Statement.

Answer 1

You can define a boolean variable

//Define

bool _isFront = true;

//Usage

bottomIcon(
  icon: _isFront ? 
      Icons.camera_front : Icons.camera_rear, 
  size: 50.0, onpress: (){
      setState(() {
        _isFront = !_isFront;
      });
      //toggleCamera();
    })

Answer 2

I tried like this and got that correct

//Defint

    int _oldIndex=0;
    Icon iconForcam=Icon(Icons.camera_rear);

//Inside code

    bottomIcon(icon: iconForcam,size: 50.0,onpress: (){
                        setState(() {
                          if(_oldIndex == 0){
                            iconForcam = Icon(Icons.camera_rear);
                            _oldIndex = 1;
                          }else if(_oldIndex == 1){
                            //print('rearcam');
                            iconForcam = Icon(Icons.camera_front);
                            _oldIndex = 0;
                          }
                        });
                        toggleCamera(_oldIndex);
                      }),

Answer 3

You can store whether the front camera is on or not in shared_prefernces or database, use provider/stream/bloc to expose this value to UI. Now you can use this package to change icon with animation. Install this package to your flutter project, import it in the file, and then replace icon property of the camera button with the below code:

AdvancedIcon(
  icon: Icons.camera_front,
  secondaryIcon: Icons.camera_rear,
  state: isFrontCameraOn ? AdvancedIconState.primary : AdvancedIconState.secondary,
)

Now the icon will automatically change depending on whether the front camera is on or not.

If you have problem with the database or provider part of this question just let me know.