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),
          ),

            ],
          ),

Answer 1

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),
      ),
    ],
  ),
)

Answer 2

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')

Answer 3

Here's an example code of AppBar in Flutter with an icon

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(
      title: new Text('App Name'),
      actions: [
        // action button
        IconButton(
          icon: Image.asset('assets/images/icons/logout.png'),
          onPressed: () { },
        ),

      ],
    ),
  );
}

Don't forget to add asset for your mobile app logo in the pubspec.yaml like this, and add your image named logo.png inside the assets directory.

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

Note: The assets subsection of the flutter section specifies files that should be included with the app. Each asset is identified by an explicit path (relative to the pubspec.yaml file) where the asset file is located. The order in which the assets are declared doesn’t matter. The actual directory name used (assets in first example or directory in the above example) doesn’t matter.

During a build, Flutter places assets into a special archive called the asset bundle that apps read from at runtime.

Answer 4

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 '

Answer 5

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