flutter - 如何设置Flutter Outline Button的背景颜色？

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的背景色，可以使用DecoratedBox和Theme小部件。在这个答案的最后，你会找到一个快速的例子。
不管怎样，我还是建议您使用带有color属性的FlatButton来代替。
将你的OutlinedButton包裹在一个DecoratedBox内。将shape的DecoratedBox设置为与OutlinedButton相同的形状。现在可以使用color的DecoratedBox属性更改颜色。结果仍然会在OutlinedButton周围有一个小填充。要删除此项，可以将DecoratedBox包装在调整Theme的ButtonTheme中。在ButtonTheme中，您要设置materialTapTargetSize: MaterialTapTargetSize.shrinkWrap。
在颤振内部添加填充物，以将按钮周围的抽头区域增加到最小尺寸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: () => {},
        ),
      ),
    );
  }
}