如何设置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已被弃用并已替换为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));
          }),
        ),
      ),
    );

扑取代了以前的3种键类型（FlatButton，RaisedButton和OutlineButton）以及新的按钮类型（TextButton，ElevatedButton和OutlinedButton），以保持同步与材质的设计，也因为使用MaterialStateProperty提供了最大的灵活性，以实现任何状态特定的UI一个需求。您可以在此处阅读更多相关信息。

Answer 2

要修改OutlineButton的backgroundColor，可以使用DecoratedBox和Theme小部件。在此答案的结尾，您将找到一个简单的示例。

无论如何，我仍然建议仅使用FlatButton及其color属性。

把你包在OutlinedButton里面DecoratedBox。将shape您的设置为与您DecoratedBox的形状相同的形状OutlinedButton。现在，您可以使用您的color属性DecoratedBox更改颜色。结果仍会在周围有少量填充OutlinedButton。要删除这一点，你可以包装DecoratedBox内的Theme在其中调整ButtonTheme。在ButtonTheme您要设置的内部materialTapTargetSize: MaterialTapTargetSize.shrinkWrap。

在Flutter内部添加了填充，以将按钮周围的点击区域增加到最小尺寸48x48 （源）。设置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 3

这非常简单，只需使用

backgroundColor: MaterialStateProperty.all(Colors.colorname),