Flutter 更改 FloatingActionButton 的子图标颜色

Question

我是 Flutter 的新手，正在尝试更改 FloatingActionButton 的子图标颜色。子图标颜色默认为白色。

我怎样才能改变它？？

下面给出的是我已经编写的代码。

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.
    ); 

谢谢你。

Answer 1

你可以包起来

IconTheme

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

或

Theme

，其中

iconTheme

按您想要的方式设置

（未测试）

Answer 2

要更改子图标的颜色，您必须在 Icon() 小部件中设置颜色。

这里我分享我设置红色的代码片段。

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

Answer 3

颤振v17.4

如果您只想更改图标的颜色，这对我有用。

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

Answer 4

MaterialApp 主题：ThemeData

如果在

ThemeData

中使用

MaterialApp

为您的应用程序着色，例如：

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

...您有 2 种方法为 FloatingActionButton (FAB) 图标颜色着色

ThemeData

:

1. floatingActionButtonTheme: const FloatingActionButtonThemeData(foregroundColor: myColor)

2. onSecondary: myColor

   （仅在 ↑↑↑ 缺失时使用）

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

在上面的

themeData

示例中，FAB图标的颜色为

绿色。

因为

onSecondary

 用于为 FAB 图标着色 

仅 如果 floatingActionButtonTheme

 缺失。

如果以上两种主题颜色均未提供，FAB 图标将回退为黑色。

iconTheme

 和 

accentIconTheme都对 FAB 图标颜色没有影响。

FAB

accentIconTheme

Flutter 1.17 中发生了变化。

Answer 5

尝试使用下面的代码片段

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