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

【问题标题】：How to set the background color of a Flutter OutlineButton?如何设置 Flutter OutlineButton 的背景颜色？
【发布时间】：2019-03-27 06:19:28
【问题描述】：

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？

【问题讨论】：

请访问以下link我认为这与您的问题有关...

标签： flutter

【解决方案1】：

要修改OutlineButton 的背景颜色，您可以使用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: () => {},
        ),
      ),
    );
  }
}

【讨论】：

我添加了一个FlatButton 示例，我推荐它，因为它更简单。
非常有帮助。我需要一个正方形，所以使用 ContinuousRectangleBorder() 而不是 CircleBorder()
所以 OutlineButton 被 OutlinedButton 折旧，并且架构不同。

【解决方案2】：

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

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

   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 和 ElevatedButton 和 OutlinedButton）替换了前 3 种按钮类型（FlatButton、RaisedButton 和 OutlineButton），以保持与 Material Design 的同步，并且还因为使用MaterialStateProperty 提供了最大的灵活性来实现任何特定于状态的用户界面。你可以阅读更多关于它的信息here。

【讨论】：

【解决方案3】：

这很简单，只需使用

backgroundColor: MaterialStateProperty.all(Colors.colorname),

【讨论】：

您好，我看到您是新来的，请在回答问题时更加具体，并添加更多关于如何解决问题的说明

【解决方案4】：

如果你需要改变轮廓边框的颜色

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

【讨论】：

【解决方案5】：

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

【讨论】：

我认为 OutlineButton 似乎有其原始行为并且很难配置它。本质上，OutlineButton 扩展了 MaterialButton，那你为什么不试试 MaterialButton 呢？