Flutter：如何更改浮动操作按钮中按钮的主题颜色？

Question

1。问题背景

我想更改按钮的背景颜色，保持图标的原始颜色。在我的程序中，我的按钮颜色是蓝色。由于我想去除蓝色，所以我尝试了几种方法。但一切都行不通。

2。我已经尝试过的

1. 主题：主题数据

   主题：主题数据（ colorScheme: const ColorScheme.light( 主要：颜色.石灰， ), ),

2. 背景颜色：主题.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。问题

我想将带有石灰（或红色）背景颜色的按钮更改为图标的原始颜色。或者只是删除蓝色。还有其他我没尝试过的方法吗？

Answer 1

你做得对，只是在主题中有一个这样的属性：

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

中

Answer 2

您可以通过两种方式完成：

• 定义您要在主题中使用的颜色：

  floatingActionButtonTheme: FloatingActionButtonThemeData(
    backgroundColor: Colors.pink,
  ),
  

• 在

  backgroundColor

  中设置

  FloatingActionButton

  属性：

  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.black,
    child: Icon(Icons.check),
    onPressed: () {},
  ),
  

Answer 3

尝试使用下面的代码片段

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

），