Flutter Add Image Icon in AppBar - Shopping Cart, Settings

Hello friends, In today's tutorial we will learn about displaying Image Icon in AppBar of flutter application. The AppBar widget has a property actions which supports multiple widget array. We can create IconButton as child widget of AppBar. It's very easy to integrate. Basically we have seen in shopping apps the Shopping Cart icon is present at the AppBar or in many apps the settings icon also present in the AppBar.

Flutter Add Image Icon in AppBar

1. Defining AppBar widget with actions property and here we will show the Shopping Cart Icon with Icon onPressed event integrated.

AppBar(
              title: const Text('Flutter AppBar'),
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.shopping_cart),
                  tooltip: 'Shopping Cart',
                  onPressed: () {
                    print("Button Clicked...");
                  },
                ),
              ],
            ),

Screenshot:

2. Creating another AppBar with Settings Icon integrated.

AppBar(
              title: const Text('Flutter AppBar'),
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.settings),
                  tooltip: 'Shopping Cart',
                  onPressed: () {
                    print("Button Clicked...");
                  },
                ),
              ],
            ),

Screenshot:

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Flutter AppBar'),
              actions: <Widget>[
                IconButton(
                  icon: const Icon(Icons.settings),
                  tooltip: 'Shopping Cart',
                  onPressed: () {
                    print("Button Clicked...");
                  },
                ),
              ],
            ),
            body: SafeArea(
                child: Center(
              child: Text(
                'Flutter App With Settings Icon on AppBar',
                style: TextStyle(fontSize: 24),
                textAlign: TextAlign.center,
              ),
            ))));
  }
}