How to add asset image in app bar as an action icon in Flutter application?

Question

Problem I am trying to add a logout image icon in appbar of flutter screen. I have created a asset folder and created directories images/icons/ and placed icons in them. I have mentioned them in pubspec.yaml file. I tried to implement a asset image in appbar but its not working.

Code

pubspe.yaml


    name: mtrack_notifications
    description: Flutter application for MTrack Notifications 

    dependencies:
      flutter:
        sdk: flutter
      # The following adds the Cupertino Icons font to your application.
      # Use with the CupertinoIcons class for iOS style icons.
      cupertino_icons: ^0.1.2
      http: ^0.11.3+16
      shared_preferences: "^0.4.2"


    dev_dependencies:
      flutter_test:
        sdk: flutter


    # For information on the generic Dart part of this file, see the
    # following page: https://www.dartlang.org/tools/pub/pubspec

    # The following section is specific to Flutter.
    flutter:

      # The following line ensures that the Material Icons font is
      # included with your application, so that you can use the icons in
      # the material Icons class.
      uses-material-design: true

      # To add assets to your application, add an assets section, like this:
      # assets:
      #  - images/a_dot_burr.jpeg
      #  - images/a_dot_ham.jpeg
      assets:
      - assets/images/icons/like.png
      - assets/images/icons/logout.png
      # An image asset can refer to one or more resolution-specific "variants", see
      # https://flutter.io/assets-and-images/#resolution-aware.

      # For details regarding adding assets from package dependencies, see
      # https://flutter.io/assets-and-images/#from-packages

      # To add custom fonts to your application, add a fonts section here,
      # in this "flutter" section. Each entry in this list should have a
      # "family" key with the font family name, and a "fonts" key with a
      # list giving the asset and other descriptors for the font. For
      # example:
      # fonts:
      #   - family: Schyler
      #     fonts:
      #       - asset: fonts/Schyler-Regular.ttf
      #       - asset: fonts/Schyler-Italic.ttf
      #         style: italic
      #   - family: Trajan Pro
      #     fonts:
      #       - asset: fonts/TrajanPro.ttf
      #       - asset: fonts/TrajanPro_Bold.ttf
      #         weight: 700
      #
      # For details regarding fonts from package dependencies,
      # see https://flutter.io/custom-fonts/#from-packages

Click to see the IDE screenshot here

Appbar code




    @override
      Widget build(BuildContext context) {
        //build a form widget using the form key we created above
        return new Scaffold(
          appBar: new AppBar(
            title: new Text(StringRef.appName),
            actions: [

          new Center(
          child:new Text(
            userName,
            textScaleFactor: 1.5,
            style: new TextStyle(
              fontSize: 12.0,
              color: Colors.white,
            ),
          )),
          new IconButton(
            icon: new Icon(Icons.close),
            tooltip: 'Closes application',
            onPressed: () => exit(0),
          ),

          new IconButton(
            icon: new Image.asset('images/icons/logout.png'),
            tooltip: 'Closes application',
            onPressed: () => exit(0),
          ),

            ],
          ),

You need to include the code of your appbar too. – Bostrot Jul 05 '18 at 09:21 — Bostrot, Jul 05 '18 at 09:21
Please check the screenshot link and code updated. – Jul 05 '18 at 09:31 — , Jul 05 '18 at 09:31

score 66 · Answer 1 · edited Jan 25 '21 at 13:36

66

The problem is in your path you have supplied to your IconButton.

It should be like this.

Scaffold(
  appBar: AppBar(
    actions: [
      IconButton(
        icon: Image.asset('assets/images/icons/logout.png'),
        onPressed: () => exit(0),
      ),
    ],
  ),
)

edited Jan 25 '21 at 13:36

iDecode

22,623
19
99
186

answered Jul 05 '18 at 09:59

Dhrumil Shah - dhuma1981

15,166
6
31
39

score 5 · Answer 2 · edited May 23 '22 at 08:09

5

According to Flutter Documentation you need to include the full path like specified in pubspec.yaml of the asset in order to load it:

Image.asset('assets/images/icons/logout.png')

edited May 23 '22 at 08:09

pseusys

407
2
5
17

answered Jul 05 '18 at 09:34

Bostrot

5,767
3
37
47

This overflows everything above appbar (even a battery icon, a signal bar icon and a clock). – Watanabe.N May 13 '21 at 08:06
@Watanabe.N you have to restrict the view with something. e.g. a scaffold. – Bostrot May 13 '21 at 19:03
yeah, it is in scaffold. I solved it by putting `Image` in `Icon` or `IconButton`. – Watanabe.N May 14 '21 at 15:44

score 2 · Answer 3 · edited Jan 22 '23 at 04:39

2

you should give 2 space before '-' and 1 space after '-' for image location specification.

flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

   assets:
     - assets/images/icons/like.png
     - assets/images/icons/logout.png

edited Jan 22 '23 at 04:39

Luke Hutchison

8,186
2
45
40

answered Oct 12 '19 at 11:24

Deepya

107
1
4

score 2 · Answer 4 · answered Aug 30 '22 at 10:34

its working all "icon : " properties

icon: ImageIcon(AssetImage('images/list.png')),

child: BottomNavigationBar(
          //add background color
          backgroundColor: PrimaryColor,
          type: BottomNavigationBarType.fixed,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: ImageIcon(AssetImage('images/list.png')),
              label: 'List',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'Consultation',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: 'Lab',
            ),
           
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.white,
          onTap: _onItemTapped,
        ),

score 1 · Answer 5 · answered Apr 09 '19 at 02:57

dont try to register all of your images in pubspec.yaml if you place the image inside folders folder, then you should register all folder. like this

you put an image : hero.png in folder Images inside folder Assets. Assets>Images>hero.png

then you should write them in 'pubspec.yaml' under: 'flutter: assets: -Assets/Images/hero.png '

How to add asset image in app bar as an action icon in Flutter application?

5 Answers5