如何设置 Flutter OutlineButton 的背景颜色？

Question

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("..."),
      ),
      body: Container(
        color: Colors.green,
        child: OutlineButton(
          onPressed: () { },
          color: Colors.orange,
          highlightColor: Colors.pink,
          child: Container(
            color: Colors.yellow,
            child: Text("A"),
          ),
          shape: CircleBorder(),
        ),
      ),
    );
  }
}

上面的代码给出了一个透明的按钮。 我怎样才能得到一个橙色的 OutlineButton？

Answer 1

要修改OutlineButton的 backgroundColor，您可以使用DecoratedBox和Theme小部件。 在这个答案的末尾，你会找到一个简单的例子。

无论如何，我仍然建议简单地使用带有color属性的FlatButton 。

将您的OutlinedButton包裹在DecoratedBox 。 将DecoratedBox的shape设置为与OutlinedButton相同的形状。 现在您可以使用DecoratedBox的color属性来更改颜色。 结果仍然会在OutlinedButton周围有一个小的填充。 要删除它，您可以将DecoratedBox包装在一个Theme中，您可以在其中调整ButtonTheme 。 在ButtonTheme您要设置materialTapTargetSize: MaterialTapTargetSize.shrinkWrap 。

在 Flutter 内部添加了填充，以将按钮周围的点击区域增加到最小尺寸 48x48 (source) 。 将materialTapTargetSize设置为MaterialTapTargetSize.shrinkWrap会移除这个最小尺寸。

---

FlatButton示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: FlatButton(
            color: Colors.pinkAccent,
            shape: CircleBorder(),
            onPressed: () => {},
            child: Text('A'),
          ),
        ),
      ),
    );
  }
}

---

OutlinedButton示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyButton(),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration:
          ShapeDecoration(shape: CircleBorder(), color: Colors.pinkAccent),
      child: Theme(
        data: Theme.of(context).copyWith(
            buttonTheme: ButtonTheme.of(context).copyWith(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap)),
        child: OutlineButton(
          shape: CircleBorder(),
          child: Text('A'),
          onPressed: () => {},
        ),
      ),
    );
  }
}

Answer 2

OutlineButton已被弃用并已替换为OutlinedButton 。 （注意“d”。）

OutlinedButton的文档帮助我了解如何使用它。 以下是这些状态的示例：禁用（灰色）--> 正常（蓝色）--> 按下（红色）

   return Container(
      width: double.infinity,
      height: 48,
      child: OutlinedButton(
        child: Text(
          "This is an Outline\"d\"Button. (Not OutlineButton)",
          style: TextStyle(color: Colors.white),
        ),
        onPressed: () => print("Tapped"),
        //onPressed: null, //Uncomment this statement to check disabled state.
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith<Color>((states) {
            if (states.contains(MaterialState.disabled)) {
              return Colors.grey[100];
            }
            return Colors.blue;
          }),
          overlayColor: MaterialStateProperty.resolveWith<Color>((states) {
            if (states.contains(MaterialState.pressed)) {
              return Colors.red;
            }
            return Colors.transparent;
          }),
          side: MaterialStateProperty.resolveWith((states) {
            Color _borderColor;

            if (states.contains(MaterialState.disabled)) {
              _borderColor = Colors.greenAccent;
            } else if (states.contains(MaterialState.pressed)) {
              _borderColor = Colors.yellow;
            } else {
              _borderColor = Colors.pinkAccent;
            }

            return BorderSide(color: _borderColor, width: 5);
          }),
          shape: MaterialStateProperty.resolveWith<OutlinedBorder>((_) {
            return RoundedRectangleBorder(borderRadius: BorderRadius.circular(16));
          }),
        ),
      ),
    );

Flutter 用新的按钮类型（ TextButton 、 ElevatedButton和OutlinedButton ）替换了前 3 种按钮类型（ FlatButton 、 RaisedButton和OutlineButton ）以与 Material Design 保持同步，并且还因为使用MaterialStateProperty提供了实现任何特定状态的 UI 的终极灵活性需要。 您可以在此处阅读更多相关信息。

Answer 3

如果您需要更改轮廓边框的颜色

 OutlineButton(
borderSide: BorderSide(color: kPrimaryColor, width: 1),)

Answer 4

这非常简单，只需使用

backgroundColor: MaterialStateProperty.all(Colors.colorname),

Answer 5

您可以通过以下方式检查按钮的背景颜色。 去掉hightlightColor，尝试给OutlineButton的highlightElevation属性赋值，然后按下它，你可以看到它最初加载了橙色。

Answer 6

您可以使用FlatButton，并在那里设置颜色。