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

Question

我正在尝试构建一个 whatsapp 克隆，当我正在从正面和背面更换相机时。我试图更改图标按钮中的图标，但它没有更改

我将在下面附上我的代码文件


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

我怀疑在 if 中我可以在 if 语句中比较两个图标。

Answer 1

您可以定义一个布尔变量

//定义

bool _isFront = true;

//用法

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

Answer 2

我这样试过，结果是对的

//定义


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

//内码


    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

你可以将前置摄像头是否打开存储在shared_prefernces或数据库中，使用provider/stream/bloc将此值暴露给UI。现在您可以使用 this package 来改变带有动画的图标。将这个包安装到你的 flutter 项目中，将其导入到文件中，然后将相机按钮的 icon 属性替换为以下代码：

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

现在图标会根据前置摄像头是否开启自动变化

如果您对这个问题的数据库或提供者部分有疑问，请告诉我。

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

How i can change the icon in the Icon button

icons

dart

flutter