如何在 flutter appBar 中构建有状态的“动作图标”

Question

I'm a new learner of flutter, and I meet a problem when I create my appBar for Android apps. There should be a button of the "camera flashlight" icon on the action area of appBar, and users can tap on this icon to choose flashlight options (on/off/auto) from a popupmenu, I finished this step.

But if I want the flashlight icon on the action area of appBar changes with the change of users' choice (eg if the user chooses auto, then the appBar icon should display an"auto flashlight"), how should I achieve it?

Thank you so much in advance.

I had tried using an "if" in the appBar action icon widget, and it failed.

Now my code in appBar.dart is

`Icon flashIcon = Icon(Icons.flash_auto);
FlashMode flashstate;

setIcon([Icon Function() param0]) {
  if (flashstate == FlashMode.off) {
    setIcon(() => flashIcon = Icon(Icons.flash_off));
  } else if (flashstate == FlashMode.torch) {
    flashIcon = Icon(Icons.flash_on);
  } else if (flashstate == FlashMode.always) {
    flashIcon = Icon(Icons.flash_on);
  } else {
    flashIcon = Icon(Icons.flash_auto);
  }
}`

and for the Action button codes is：`

PopupMenuButton<String>(
              icon: setIcon(),

              onSelected: widget.isFlash,
              itemBuilder: (context) {
                List<PopupMenuEntry<String>> menuEntries2 = [
                  const PopupMenuItem<String>(
                    child: Icon(
                      Icons.flash_auto,
                      color: Colors.black,
                    ),
                    value: 'auto',
                  ),
                  const PopupMenuItem<String>(
                    child: Icon(Icons.flash_off, color: Colors.black),
                    value: 'off',
                  ),
                  const PopupMenuItem<String>(
                    child: Icon(Icons.flash_on, color: Colors.black),
                    value: 'torch',
                  ),
                ];
                return menuEntries2;
              },
            ),`    

But the issue is still not resolved...The icon becomes three dots, and if I choose flashlight status in the popup menu, nothing change. enter image description here

enter image description here

Answer 1

try code below and you got the exact output which is you describe

Output:-

Code:-

import 'package:flutter/material.dart';

class OptionMenuExample extends StatefulWidget {
  const OptionMenuExample({Key? key}) : super(key: key);

  @override
  State<OptionMenuExample> createState() => _OptionMenuExampleState();
}

class _OptionMenuExampleState extends State<OptionMenuExample> {
  int selectedValue = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Appbar"),
        actions: [
          PopupMenuButton(
            initialValue: selectedValue,
            onSelected: (int value) => setState(() {
              selectedValue = value;
            }),
            child: Icon(
                selectedValue == 1
                    ? Icons.flash_off
                    : selectedValue == 2
                        ? Icons.flash_auto
                        : Icons.flash_on,
                color: Colors.black),
            itemBuilder: (context) => const [
              PopupMenuItem(
                child: Icon(Icons.flash_on, color: Colors.black),
                value: 0,
              ),
              PopupMenuItem(
                child: Icon(Icons.flash_off, color: Colors.black),
                value: 1,
              ),
              PopupMenuItem(
                child: Icon(Icons.flash_auto, color: Colors.black),
                value: 2,
              ),
            ],
          ),
          const SizedBox(width: 16.0)
        ],
      ),
    );
  }
}

Answer 2

Since you haven't posted any code, here is my suggestion. You can write a code like this:

Icon icon = Icon(Icons./*icon name*/);

And then create a function like:

setIcon() {
   //here you use the value of your popup(or whatever you are using to let the user choose the state of flash) to change icon
   //example 
   if(value == **condition**) {
       setState(() => icon = /*new icon*/);
   } else {...} //and so on for all conditions 
   //or use a switch case if you prefer 
}

Now you call the function in the callback of your popup(or whatever) and use variable icon in your appBar button.