1。问题背景
我想更改按钮的背景颜色,保持图标的原始颜色。在我的程序中,我的按钮颜色是蓝色。由于我想去除蓝色,所以我尝试了几种方法。但一切都行不通。
2。我已经尝试过的
主题:主题数据
主题:主题数据( colorScheme: const ColorScheme.light( 主要:颜色.石灰, ), ),
背景颜色:主题.of()
backgroundColor: Theme.of(context).primaryColor,
(等使用主题颜色修改)
3.我的代码和结果
body : Center(
child: Container(
height: 500,
color: Colors.lime[200],
child: ListView.builder(
itemCount :name.length,
itemBuilder: (c,i){
return Align(
alignment: Alignment.bottomRight,
child: ListTile(
leading: const Icon(Icons.shopping_bag),
title : Text(name[i]),
),
);
},
),
),
),
floatingActionButton: FloatingActionButton(
theme: ThemeData(
colorScheme: const ColorScheme.light(
primary : Colors.lime,
),
),
onPressed: (){
showDialog(context: context, builder: (context) {
//designate the developer made function into specific name
return DialogUI(usingaddOne:addOne, usingaddString : addString);
});
},
child : const Icon(Icons.shopping_cart, ,),
),
);}
}
4。问题
我想将带有石灰(或红色)背景颜色的按钮更改为图标的原始颜色。或者只是删除蓝色。还有其他我没尝试过的方法吗?
你做得对,只是在主题中有一个这样的属性:
static ThemeData get lightTheme {
return ThemeData(
primarySwatch: Colors.white, // your main color app
brightness: Brightness.light,
fontFamily: 'Segoe',
// * FLOATING ACTION BUTTON THEME
floatingActionButtonTheme: FloatingActionButtonThemeData(
elevation: 2, // elevation
backgroundColor: Colors.lime, // the background color
),
);
}
}
这个静态ThemeData变量(在其他类中创建它,我命名为AppTheme),你可以将它写在MaterialApp中的main.dart中,如下所示:
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: AppTheme.lightTheme, // here
initialRoute: PageNames.home,
);
并且在您的FloatingActionButton中,您无需执行任何其他操作
FloatingActionButton(
onPressed: () => onAction(),
child: Icon(
Icons.add,
color: Colors.white,
),
),
换句话说,删除您的 FloatingActionButton 小部件中的主题并将其放入您的 MaterialApp
中您可以通过两种方式完成:
定义您要在主题中使用的颜色:
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Colors.pink,
),
在
backgroundColor
中设置 FloatingActionButton
属性:
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.black,
child: Icon(Icons.check),
onPressed: () {},
),
尝试使用下面的代码片段
floatingActionButton: FloatingActionButton(
tooltip: 'Increment',
child: new Icon(Icons.add, color: Colors.red,),
backgroundColor: Colors.yellow,
),