How to change icon in AppBarWidget in flutter?

21 min read

You can change the icon in the AppBarWidget in flutter by using the following steps:

  1. Add an Icon widget in the AppBar widget and give its value as Icons.ac_unit (or any other icon you want to use).

  2. Wrap the Icon widget with the IconButton widget and set the onPressed property to null.

  3. Use the setState() method to update the value of the Icon widget when it is pressed.

Example:

class _MyAppState extends State<MyApp> {
  IconData _icon = Icons.ac_unit;

  void _changeIcon() {
    setState(() {
      if (_icon == Icons.ac_unit) {
        _icon = Icons.favorite;
      } else {
        _icon = Icons.ac_unit;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Change Icon'),
          actions: <Widget>[
            IconButton(
              icon: Icon(_icon),
              onPressed: null,
            ),
          ],
        ),
        body: Center(
          child: RaisedButton(
            onPressed: _changeIcon,
            child: Text('Change Icon'),
          ),
        ),
      ),
    );
  }
}

In this example, the Icon widget is wrapped with the IconButton widget and the onPressed property is set to null so that the icon doesn't become interactive. The _icon variable is used to hold the current icon value, and the _changeIcon() method is called when the RaisedButton widget is pressed. The setState() method is used to update the value of the _icon variable, which in turn updates the icon displayed in the AppBar widget.