How to add buttons on AppBar in Flutter(Awesome Simple Explanation in 2024)

Hello guys, In this article, let’s discuss How to add buttons on AppBar in Flutter. Basically, It’s a really easy process in Flutter. First, you have to create a new flutter project.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

Next, add title, leading, and actions widgets inside the AppBar.

How to add buttons on AppBar

The leading argument of the AppBar use to display widget on the leading side of the app bar.

The actions argument of the app bar specifies a list of widgets that have to be displayed on the trailing side of the AppBar.

add buttons on AppBar — Add leading and actions widgets

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.account_circle),
        ),
        actions: [
          IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.door_back_door,
              ))
        ],
      ),
    );
  }
}

Extra: We can create a method to display an Alert Dialog.

Full Source Code:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  Future<void> showMyAlertDialog(
      {required BuildContext context, required String content}) {
    return showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: Text(content),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text("OK"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          onPressed: () async {
            await showMyAlertDialog(
                context: context, content: "My Account Button Clicked");
          },
          icon: const Icon(Icons.account_circle),
        ),
        actions: [
          IconButton(
            onPressed: () async {
              await showMyAlertDialog(
                  context: context, content: "Logout Button Clicked");
            },
            icon: const Icon(
              Icons.door_back_door,
            ),
          )
        ],
      ),
    );
  }
}

Have a nice day.