如何从函数中更改 Flutter 中 Elevated Button 的背景颜色？

Question

我是 Flutter 的新手，我上周开始使用 Flutter，现在我想制作一个简单的木琴应用程序。我成功地创建了 UI 并创建了一个函数 playSound(int soundNumber) 但是当我调用这个函数来播放声音时，它给了我这个错误。

**The following _TypeError was thrown building Body(dirty, state: _BodyState#051c2):
type '_MaterialStatePropertyAll<dynamic>' is not a subtype of type 'MaterialStateProperty<Color?>?'**

这是我为 playSound(int soundNumber) 函数编写的代码。

void playSound(int soundNumber) {
final player = AudioCache();
player.play('note$soundNumber.wav');}

Expanded buildPlayButton({MaterialStateProperty color, int soundNumber}){
return Expanded(
  child: ElevatedButton(
    onPressed: () {
      playSound(soundNumber);
    },
    style: ButtonStyle(
      backgroundColor: color,
    ),
  ),
);}

这里是我调用这个函数的地方。

Widget build(BuildContext context) {
return Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: <Widget>[
    buildPlayButton(color: MaterialStateProperty.all(Colors.red), soundNumber: 1),
    buildPlayButton(color: MaterialStateProperty.all(Colors.orangeAccent), soundNumber: 2),
    buildPlayButton(color: MaterialStateProperty.all(Colors.yellow), soundNumber: 3),
    buildPlayButton(color: MaterialStateProperty.all(Colors.indigo), soundNumber: 4),
    buildPlayButton(color: MaterialStateProperty.all(Colors.blue), soundNumber: 5),
    buildPlayButton(color: MaterialStateProperty.all(Colors.lightGreenAccent), soundNumber: 6),
    buildPlayButton(color: MaterialStateProperty.all(Colors.green), soundNumber: 7),
  ],
);
}

如何调用这个函数，因为它给我上面提到的错误？

Answer 1

将颜色作为参数传递并使用 MaterialStateProperty.all(color) 指定颜色。

buildPlayButton(color: Colors.red, soundNumber: 1)

Expanded buildPlayButton({Color color, int soundNumber}){
return Expanded(
  child: ElevatedButton(
    onPressed: () {
      playSound(soundNumber);
    },
    style: ButtonStyle(
      backgroundColor: MaterialStateProperty.all<Color>(color),
    ),
  ),
);}

示例按钮

一般

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // background
    onPrimary: Colors.yellow, // foreground
  ),
  onPressed: () {},
  child: Text('ElevatedButton with custom foreground/background'),
)

示例按钮

参考：

ElevatedButton class

Answer 2

ElevatedButton(onPressed: resetHandler,
               child: Text("button"),
               style: ElevatedButton.styleFrom(primary: Colors.amber),),

Answer 3

您可以使用 styleFrom 静态方法或 ButtonStyle class 设置 ElevatedButton 的样式。第一个比第二个方便

使用 styleFrom 设置 ElevatedButton 的样式：

ElevatedButton(
      child: Text('Button'),
      onPressed: () {},
      style: ElevatedButton.styleFrom({
           Color primary, // set the background color 
           Color onPrimary, 
           Color onSurface, 
           Color shadowColor, 
           double elevation, 
           TextStyle textStyle, 
           EdgeInsetsGeometry padding, 
           Size minimumSize, 
           BorderSide side, 
           OutlinedBorder shape, 
           MouseCursor enabledMouseCursor, 
           MouseCursor disabledMouseCursor, 
           VisualDensity visualDensity, 
           MaterialTapTargetSize tapTargetSize, 
           Duration animationDuration, 
           bool enableFeedback
     }),
),

示例：

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(
                primary: Colors.purple,
                padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
                textStyle: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold)),
),

使用 ButtonStyle 设置 ElevatedButton 的样式：

style: ButtonStyle({
  MaterialStateProperty<TextStyle> textStyle,    
  MaterialStateProperty<Color> backgroundColor,   
  MaterialStateProperty<Color> foregroundColor, 
  MaterialStateProperty<Color> overlayColor, 
  MaterialStateProperty<Color> shadowColor, 
  MaterialStateProperty<double> elevation, 
  MaterialStateProperty<EdgeInsetsGeometry> padding, 
  MaterialStateProperty<Size> minimumSize, 
  MaterialStateProperty<BorderSide> side, 
  MaterialStateProperty<OutlinedBorder> shape, 
  MaterialStateProperty<MouseCursor> mouseCursor,    
  VisualDensity visualDensity, 
  MaterialTapTargetSize tapTargetSize, 
  Duration animationDuration, 
  bool enableFeedback
})

例子

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),
                padding: MaterialStateProperty.all(EdgeInsets.all(50)),
                textStyle: MaterialStateProperty.all(TextStyle(fontSize: 30))),
),

Answer 4

style: ButtonStyle({  
  MaterialStateProperty.all(backgroundColor),   
),

同样，您可以将 MaterialStateProperty.all(<Value here>) 添加到提升按钮的大多数属性（高度、填充、边框等）。

Answer 5

style: ElevatedButton.styleFrom(primary : Colors.black),

Answer 6

截图：

代码：

class _MyState extends State<MyPage> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => setState(() => _flag = !_flag),
          child: Text(_flag ? 'Red' : 'Green'),
          style: ElevatedButton.styleFrom(
            primary: _flag ? Colors.red : Colors.teal, // This is what you need!
          ),
        ),
      ),
    );
  }
}

Answer 7

ElevatedButton(
          onPressed: (){},
          child: Text('comprar'),
          style: ElevatedButton.styleFrom(
            primary: Theme.of(context).primaryColor
          )
        )

Answer 8

确保添加 onPressed: () {},

否则颜色为灰色

Answer 9

您有 3 个选项来更改背景颜色：

ElevatedButton.styleFrom : 如果你只是想改变背景颜色和前景色而不考虑状态，那么你可以按照下面给出的方法进行操作。

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.red, // background
    onPrimary: Colors.white, // foreground
  ),
  onPressed: () { },
  child: Text('custom foreground/background'),
)

MaterialStateProperty.all : 覆盖所有状态的 ElevatedButtons 默认背景（text/icon）颜色。

 ElevatedButton(style:   
    ButtonStyle(
      backgroundColor: MaterialStateProperty.all(Colors.red),
    onPressed: () { },
    child: Text('custom foreground/background'),
    ));

MaterialStateProperty.resolveWith : 默认情况下，提升按钮继承蓝色。我们可以使用样式参数和 ButtonStyle class 调整默认样式。按钮有不同的状态，例如按下、禁用、悬停等。您可以更改每种状态的样式。在下面的代码片段中，按钮的默认颜色在按下时变为绿色。

ElevatedButton(
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.pressed))
          return Colors.green;
        return null; // Use the component's default.
      },
    ),
  ),
)

Answer 10

只需使用MaterialStateProperty.all(**YOUR COLOR**):

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),)
),

或者像这样：只需使用 ElevatedButton.styleFrom(primary: **YOUR COLOR**):

ElevatedButton(
            child: Text('Button'),
            onPressed: () {},
            style: ElevatedButton.styleFrom(primary: Colors.red),
)

Answer 11

 style: ElevatedButton.styleFrom(
                        shape: RoundedRectangleBorder(
                          borderRadius: new BorderRadius.circular(30.0),
                        ),
                          primary: HexColor(HexColor.primarycolor),
                          textStyle: TextStyle(fontWeight: FontWeight.bold)),

如何从函数中更改 Flutter 中 Elevated Button 的背景颜色？

How to change background color of Elevated Button in Flutter from function?

flutter

flutter-layout

android-studio-4.2

flutter-functional-widget

flutter-android