Flutter FloatingActionButton 禁用初始颜色

在Flutter中，FloatingActionButton是一个非常流行的小部件，用于提供快速操作入口。但是默认情况下，它会使用一个漂亮的蓝色作为初始颜色。

如果您想禁用它的初始颜色，并使用您自己的颜色，那该怎么做呢？

禁用初始颜色

要禁用FloatingActionButton的默认颜色，您需要在创建它时指定一个背景颜色。例如，以下代码将创建一个红色的FloatingActionButton：

FloatingActionButton(
  backgroundColor: Colors.red,
  onPressed: () {},
  child: Icon(Icons.add),
)

使用动态颜色

如果您想在运行时动态地更改FloatingActionButton的颜色，则可以使用StatefulWidget。以下是一个简单的示例，演示如何使用StatefulWidget和ColorPicker小部件动态更改FloatingActionButton的颜色：

class ColorPickerButton extends StatefulWidget {
  @override
  _ColorPickerButtonState createState() => _ColorPickerButtonState();
}

class _ColorPickerButtonState extends State<ColorPickerButton> {
  Color _buttonColor = Colors.red;

  void _openColorPicker() async {
    Color newColor = await showDialog<Color>(
      context: context,
      builder: (_) => AlertDialog(
        title: Text('Pick a color'),
        content: SingleChildScrollView(
          child: BlockPicker(
            pickerColor: _buttonColor,
            onColorChanged: (color) => Navigator.of(context).pop(color),
          ),
        ),
      ),
    );
    if (newColor != null) {
      setState(() {
        _buttonColor = newColor;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: _buttonColor,
      onPressed: _openColorPicker,
      child: Icon(Icons.color_lens),
    );
  }
}

这里我们使用了一个称为ColorPickerButton的StatefulWidget。点击这个按钮会打开一个AlertDialog，带有一个颜色选择器。当用户选择一个新颜色后，我们通过调用setState()来更改按钮的背景颜色。

总结

通过使用上述代码片段，您可以轻松地禁用FloatingActionButton的默认颜色，并动态更改其颜色，以便适应您的应用程序外观和感觉。

返回的markdown代码片段：

# Flutter FloatingActionButton 禁用初始颜色

在Flutter中，FloatingActionButton是一个非常流行的小部件，用于提供快速操作入口。但是默认情况下，它会使用一个漂亮的蓝色作为初始颜色。

如果您想禁用它的初始颜色，并使用您自己的颜色，那该怎么做呢？

## 禁用初始颜色

要禁用FloatingActionButton的默认颜色，您需要在创建它时指定一个背景颜色。例如，以下代码将创建一个红色的FloatingActionButton：

```dart
FloatingActionButton(
  backgroundColor: Colors.red,
  onPressed: () {},
  child: Icon(Icons.add),
)

使用动态颜色

如果您想在运行时动态地更改FloatingActionButton的颜色，则可以使用StatefulWidget。以下是一个简单的示例，演示如何使用StatefulWidget和ColorPicker小部件动态更改FloatingActionButton的颜色：

class ColorPickerButton extends StatefulWidget {
  @override
  _ColorPickerButtonState createState() => _ColorPickerButtonState();
}

class _ColorPickerButtonState extends State<ColorPickerButton> {
  Color _buttonColor = Colors.red;

  void _openColorPicker() async {
    Color newColor = await showDialog<Color>(
      context: context,
      builder: (_) => AlertDialog(
        title: Text('Pick a color'),
        content: SingleChildScrollView(
          child: BlockPicker(
            pickerColor: _buttonColor,
            onColorChanged: (color) => Navigator.of(context).pop(color),
          ),
        ),
      ),
    );
    if (newColor != null) {
      setState(() {
        _buttonColor = newColor;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: _buttonColor,
      onPressed: _openColorPicker,
      child: Icon(Icons.color_lens),
    );
  }
}

这里我们使用了一个称为ColorPickerButton的StatefulWidget。点击这个按钮会打开一个AlertDialog，带有一个颜色选择器。当用户选择一个新颜色后，我们通过调用setState()来更改按钮的背景颜色。

总结

通过使用上述代码片段，您可以轻松地禁用FloatingActionButton的默认颜色，并动态更改其颜色，以便适应您的应用程序外观和感觉。