Colors of Image Icon

[TitikshaDaga]

I wanted to use a multi color image as my icon the way it was. But when i made it an image icon it got decolorized. How do I restore the original colors?

[eseidelGoogle]

Can you provide some example code (even if not your image)?

[TitikshaDaga]

Hey @eseidelGoogle sorry for the late reply. This is the code and image that I have used

new ListTile(
          title: new Text("Saved Searches"),
          leading: new ImageIcon(new AssetImage('assets/SaveMenu.png')),
          onTap: () {
            Navigator.popAndPushNamed(context, '/SavedSearches');
          },
        )

[Hixie]

Try wrapping the ImageIcon in an IconTheme whose color is null. We should offer a way to opt-out of the colourising, though.

[HansMuller]

Unfortunately, the same issue exists with ImageIcon's width, height, and opacity parameters. I don't think we'd want to gradually introduce overrides for them, since ImageIcon really doesn't do very much.

It might be simpler to just use Image directly, if the ImageIcon class is getting in the way.

    Semantics(
      label: mySemanticLabel,
      child: Image(
        image: myImage,
        width: myIconSize,
        height: myIconSize,
        fit: BoxFit.scaleDown,
        alignment: Alignment.center,
        excludeFromSemantics: true,
      ),
    );

[Hixie]

The whole point of using ImageIcon is to honour the height and width, so I'm not too worried about that. The opacity... maybe. I'd have to see specific examples where that's an issue.

[VardanMelkonyan]

I have the same issue, and I need to use the image in NavigationBar. https://stackoverflow.com/questions/61915579/how-to-display-an-image-in-the-bottomnavigationbar-in-flutter/61938732#61938732

[pedromassangocode]

This issue is reproducible in 1.20.0-7.1.pre.

flutter doctor -v

``` [✓] Flutter (Channel dev, 1.20.0-7.1.pre, on Mac OS X 10.15.5 19F101, locale en-AO) • Flutter version 1.20.0-7.1.pre at /Users/pedro/dev/SDKs/flutter_dev • Framework revision 7736f3bc90 (5 days ago), 2020-07-10 16:33:05 -0700 • Engine revision d48085141c • Dart version 2.9.0 (build 2.9.0-21.2.beta) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0) • Android SDK at /Users/pedro/Library/Android/sdk • Platform android-30, build-tools 30.0.0 • Java binary at: /Users/pedro/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 11.5) • Xcode at /Applications/Xcode.app/Contents/Developer • Xcode 11.5, Build version 11E608c • CocoaPods version 1.9.3 [✓] Chrome - develop for the web • CHROME_EXECUTABLE = /Applications/Google Chrome.app/Contents/MacOS/google-chrome-unsafe [✓] Android Studio (version 4.0) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin version 47.1.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) [✓] Android Studio (version 4.0) • Android Studio at /Users/pedro/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6514223/Android Studio.app/Contents • Flutter plugin version 47.1.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593) [✓] VS Code (version 1.47.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.12.1 [✓] Connected device (4 available) • AOSP on IA Emulator (mobile) • emulator-5554 • android-x86 • Android 9 (API 28) (emulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.5 19F101 • Web Server (web) • web-server • web-javascript • Flutter Tools • Chrome (web) • chrome • web-javascript • Google Chrome 83.0.4103.116 • No issues found! ```

[mriaz764]

I'm using these red rounded icons and it got decolorized,

child: IconButton( icon: ImageIcon(AssetImage("assets/icons/library.png")), onPressed: (){

          },
        ),

library.png look like black

[YeungKC]

I'm interested in resolving this issue, does anyone have any suggestions for improvements to the API?

[AlexV525]

IMO ImageIcon is a wrapper for semantics and other properties, especially when you're using it in BottomNavigationBar. The item should change color according to your configuration in the bar. So it can be use to sync properties with parent's theme, otherwise you don't need to use the ImageIcon.

[exaby73]

I can reproduce this issue with Master (3.7.0-4.0.pre.48). Updating labels to reflect the same

Code Sample

```dart import 'package:flutter/material.dart'; const Color darkBlue = Color.fromARGB(255, 18, 32, 47); void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.dark().copyWith( scaffoldBackgroundColor: darkBlue, ), debugShowCheckedModeBanner: false, home: Scaffold( body: Center( child: MyWidget(), ), ), ); } } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ImageIcon( NetworkImage('https://cdn-icons-png.flaticon.com/512/458/458842.png'), ); } } ```