Quick Tip – Add action buttons to AppBar in Flutter

How to add action buttons to AppBar in Flutter

You can read more about AppBar in this post:

Flutter Basics – How to Customize AppBar in Flutter

You can find more about buttons in Flutter in another post:

Flutter Basics – Different types of Flutter Buttons

Actions buttons usually are on the right-hand side of the AppBar. Most of the time we will use the IconButtons but you can use any button you like.

appBar: AppBar(
        title: Text("Title"),
        actions: [
          IconButton(
              icon: Icon(
                  Icons.login,
                  color: const Color(0xFF0000FF),
                  size: 34.0),
              onPressed: (){}
          ),
          IconButton(
              icon: Icon(
                  Icons.favorite,
                  color: const Color(0xFFFF0000),
                  size: 34.0),
              onPressed: (){}
          ),
          IconButton(
              icon: Icon(
                  Icons.settings,
                  color: const Color(0xFF00FF00),
                  size: 34.0),
              onPressed: (){}
          ),
        ],
      ),

AppBar home button, title, and action buttons in Flutter

appBar: AppBar(
        centerTitle: true,
        title: Text('Title'),
        leading: IconButton(
          onPressed: () {},
          icon: Icon(Icons.home),
        ),
        actions: [
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.call),
          ),
          IconButton(
            onPressed: () {},
            icon: Icon(Icons.more_vert),
          ),
        ],
      ),