I am trying to toggle the IconButton icon when pressed on it. This is what I have so far:

class _AppsScreenState extends State<AppsScreen> {
  late Future<AllApps> activateApps;

  @override
  void initState() {
    super.initState();
    activateApps = getActivatedApps();
  }

  @override
  Widget build(BuildContext context) {
    IconData iconData = Icons.grid_view;

    void _toggleViewIcon() {
      setState(() {
        if (iconData == Icons.grid_view) {
          iconData = Icons.list;
        } else {
          iconData = Icons.grid_view;
        }
      });
    }

    return Scaffold(
        appBar: AppBar(
          title: const Text('Apps'),
          primary: false,
          toolbarHeight: 50,
          leading: IconButton(
            tooltip: 'Toggle view',
            icon: Icon(iconData),
            onPressed: _toggleViewIcon,
          ),
          actions: <Widget>[
            Padding(
                padding: const EdgeInsets.only(right: 20.0),
                child: IconButton(
                  tooltip: 'Refresh',
                  icon: const Icon(Icons.refresh),
                  onPressed: () {
                    setState(() {
                      activateApps = getActivatedApps();
                    });
                  },
                )),
            Padding(
                padding: const EdgeInsets.only(right: 20.0),
                child: IconButton(
                  tooltip: 'Add or remove apps',
                  icon: const Icon(Icons.add),
                  onPressed: () {
                    setState(() {
                      activateApps = getActivatedApps();
                    });
                  },
                )),
          ],
        ),
        primary: false,
        body: Column(children: []));
  }
}

The button never toggles. I am not sure what I am doing wrong here. Any help is appreciated.

CodePudding user response：

setState will rebuild the widget, i.e the build function will be called again, thus the iconData variable will be set again to Icons.grid_view

move the iconData declaration and the function _toggleViewIcon outside of the build function

CodePudding user response：

iconData variable will be set again to Icons.grid_view each time when you call set state if it put inside build method, so declare it outside build method

class _AppsScreenState extends State<AppsScreen> {
  late Future<AllApps> activateApps;
  IconData iconData = Icons.grid_view;

  @override
  void initState() {
    super.initState();
    activateApps = getActivatedApps();
  }

  @override
  Widget build(BuildContext context) {

    void _toggleViewIcon() {
      setState(() {
        if (iconData == Icons.grid_view) {
          iconData = Icons.list;
        } else {
          iconData = Icons.grid_view;
        }
      });
    }

    return Scaffold(
        appBar: AppBar(
          title: const Text('Apps'),
          primary: false,
          toolbarHeight: 50,
          leading: IconButton(
            tooltip: 'Toggle view',
            icon: Icon(iconData),
            onPressed: _toggleViewIcon,
          ),
          actions: <Widget>[
            Padding(
                padding: const EdgeInsets.only(right: 20.0),
                child: IconButton(
                  tooltip: 'Refresh',
                  icon: const Icon(Icons.refresh),
                  onPressed: () {
                    setState(() {
                      activateApps = getActivatedApps();
                    });
                  },
                )),
            Padding(
                padding: const EdgeInsets.only(right: 20.0),
                child: IconButton(
                  tooltip: 'Add or remove apps',
                  icon: const Icon(Icons.add),
                  onPressed: () {
                    setState(() {
                      activateApps = getActivatedApps();
                    });
                  },
                )),
          ],
        ),
        primary: false,
        body: Column(children: []));
  }
}

CodePudding user response：

You can use SteamBuilder instead, if you want to change a bit of space, but it will rebuild all widgets