Home > Mobile >  Flutter Change Colour Of Icon
Flutter Change Colour Of Icon

Time:07-05

I am trying to change the colour of an icon so black so that it matches the rest of the text. I use the following statement to determine which icon to use based on the theme:

class ChangeThemeButtonWidget extends StatelessWidget {
  const ChangeThemeButtonWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Provider.of<ThemeProvider>(context).isDarkMode
          ? dark_mode_icon()
          : Icons.light_mode),
      onPressed: () {
        final provider = Provider.of<ThemeProvider>(context, listen: false);
        provider.toggleTheme(!provider.isDarkMode);
      },
    );
  }

And

  IconData dark_mode_icon() {
    //return IconData(0xe37a, fontFamily: 'MaterialIcons');
    IconData dark_mode_i = IconData(Icons.dark_mode, color: Colors.black);
    return dark_mode_i;
  }

My issue is that this returns the error "The argument type 'IconData' can't be assigned to the parameter type 'int'."

How can I edit the style of this icon so that it will change the color correctly?

Many thanks for the help

CodePudding user response:

Simply use this code:

    IconButton(
  onPressed: () {},
  color: Colors.blue,
  iconSize: 100,
  icon: Icon(
    Icons.train,
  ),
)

That is how you can apply color to the iconbutton.

CodePudding user response:

Icons.darkmode is the icon data. IconData() will take an integer so yiu have to write IconData(Icons.darkmode.codePoint)

CodePudding user response:

You are applying color on wrong place. IconData is just widget that describes Icon based on font data. It has nothing to do with color. You have to put those IconData into Icon widget and change color there.

class ChangeThemeButtonWidget extends StatelessWidget {
  const ChangeThemeButtonWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Provider.of<ThemeProvider>(context).isDarkMode
          ? Icons.dark_mode
          : Icons.light_mode,
          color: #HERE 
          ),
      onPressed: () {
        final provider = Provider.of<ThemeProvider>(context, listen: false);
        provider.toggleTheme(!provider.isDarkMode);
      },
    );
  }
  • Related