Flutter 改变 FloatingActionButton 的子图标颜色

Question

I'm new to Flutter and was trying to change the child icon color of FloatingActionButton. Child icon color is white by default.

How can i change that??

Given below is the code that i have worked on.

floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
        backgroundColor: Colors.yellow,

      ), // This trailing comma makes auto-formatting nicer for build methods.
    ); 

Thank you.

Answer 1

You can wrap in an IconTheme

child: new IconTheme(
    data: new IconThemeData(
        color: Colors.yellow), 
    child: new Icon(Icons.add),
),

or a Theme where iconTheme is set the way you want it

(not tested)

Answer 2

To change the color of child Icon, You have to set the color in the Icon() widget.

Here I am sharing the code snippet where I have set the red color.

floatingActionButton: FloatingActionButton(
        tooltip: 'Increment',
        child: new Icon(Icons.add, color: Colors.red,),
        backgroundColor: Colors.yellow,
      ),

Answer 3

Flutter v17.4

This worked for me, if you just want to change to colour of icon.

floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add,
      color: Colors.black, //The color which you want set.
    ),
    onPressed: () => {},
  ),

Answer 4

MaterialApp theme: ThemeData

If using ThemeData in your MaterialApp to color your app like:

    return MaterialApp(
        title: 'Flutter Demo',
        theme: lightThemeData, // this guy
        darkTheme: darkThemeData, // and perhaps this guy
        home: MyHomePage()
    );

... you have 2 ways to color your FloatingActionButton (FAB) Icon color in ThemeData :

1. floatingActionButtonTheme: const FloatingActionButtonThemeData(foregroundColor: myColor)
2. onSecondary: myColor (used only if ↑↑↑ is missing)

final lightThemeData = ThemeData.from(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
      primary: blue,
      secondary: blue,
      onSecondary: white, // FAB Icon color if FABTheme not provided like below
    ),
).copyWith(
  floatingActionButtonTheme: const FloatingActionButtonThemeData(foregroundColor: Colors.green), // this guy works
  iconTheme: const IconThemeData(color: white), // DOES NOT affect FAB Icon
  accentIconTheme: const IconThemeData(color: purpleRain), // argumentFormerlyKnownAsFabIconColor - deprecated, DON'T USE THIS
);

In the above themeData example, the FAB Icon would be colored green .

Because onSecondary is used to color the FAB icon only if floatingActionButtonTheme is missing.

If neither of the above theme colors are provided, the FAB Icon will fallback to black color.

iconTheme and accentIconTheme both have no effect on FAB icon color.

FAB accentIconTheme change happened in Flutter 1.17 .