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

Question

1.问题背景

我想改变按钮的背景颜色，保持图标原来的颜色。在我的程序中，我的按钮颜色是蓝色的。因为我想去除蓝色，所以我尝试了几种方法。但是一切都没有用。

2。我已经尝试过的

主题：主题数据

主题：主题数据( 配色方案：const ColorScheme.light( 初级：Colors.lime， ), ),
背景颜色：Theme.of()

背景颜色：Theme.of(上下文).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, ,),
      ),
    );}
}

Result

4.问题

我想用 icon 的原始颜色更改具有 lime（或 red）背景颜色的按钮。或者只是删除蓝色。还有没有其他我没试过的方法？

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

这个static ThemeData变量（在其他class中创建，我命名为AppTheme），你可以把它写在main.dart 在 MaterialApp 中像这样：

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

在FloatingActionButton中设置backgroundColor属性:

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

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

Flutter : how to change theme color of button in floating action button?

button

background-color

flutter

flutter-animation