CODEWITHSUNDEEP
androidflutterflutter-layoutflutter-dependenciesflutter-animation
user3831831
user3831831

Reputation:

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

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

            ],
          ),

Upvotes: 37

Views: 103938

Answers (7)

Kalpesh Khandla
Kalpesh Khandla

Reputation: 1

You can try with a below solution

Scaffold(
 appBar: appBarWidget(),
);



 PreffredSizedWidget appBarWidget() {
  return AppBar(
   title:Text(''),
   actions: [
    IconButton(
    icon: Image.asset(AppImages.logoutImg),
    onPressed: () {
     // To do
    },
  ),
],
),
}

Define all appImages like a below :

class AppImages {
// Base ImagePath

 static const String baseImagePath = AppConstants.baseImagePath;
 static const String profileImg = '$baseImagePath/profile.jpg';
}

Upvotes: 0

SopheapITPROO
SopheapITPROO

Reputation: 1

you can fix path:

From icon: Image.asset('assets/images/icons/logout.png'),

To: icon: Image.asset('images/icons/logout.png'),

will be like this:

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

Upvotes: 0

Deepya
Deepya

Reputation: 107

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

Upvotes: 2

sajid
sajid

Reputation: 215

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

Upvotes: 2

Bostrot
Bostrot

Reputation: 6033

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

Upvotes: 5

Dhrumil Shah - dhuma1981
Dhrumil Shah - dhuma1981

Reputation: 15789

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

Upvotes: 69

Roman Traversine
Roman Traversine

Reputation: 928

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 '

Upvotes: 1

Related Questions