我是 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.
);
谢谢你。
你可以包起来
IconTheme
child: new IconTheme(
data: new IconThemeData(
color: Colors.yellow),
child: new Icon(Icons.add),
),
或
Theme
,其中 iconTheme
按您想要的方式设置
(未测试)
要更改子图标的颜色,您必须在 Icon() 小部件中设置颜色。
这里我分享我设置红色的代码片段。
floatingActionButton: FloatingActionButton(
tooltip: 'Increment',
child: new Icon(Icons.add, color: Colors.red,),
backgroundColor: Colors.yellow,
),
颤振v17.4
如果您只想更改图标的颜色,这对我有用。
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add,
color: Colors.black, //The color which you want set.
),
onPressed: () => {},
),
如果在
ThemeData
中使用 MaterialApp
为您的应用程序着色,例如:
return MaterialApp(
title: 'Flutter Demo',
theme: lightThemeData, // this guy
darkTheme: darkThemeData, // and perhaps this guy
home: MyHomePage()
);
...您有 2 种方法为 FloatingActionButton (FAB) 图标颜色着色
ThemeData
:
floatingActionButtonTheme: const FloatingActionButtonThemeData(foregroundColor: myColor)
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 中发生了变化。
floatingActionButton: FloatingActionButton(
tooltip: 'Increment',
child: new Icon(Icons.add, color: Colors.red,),
backgroundColor: Colors.yellow,
),