如何设置Flutter OutlineButton的背景颜色? [英] How to set the background color of a Flutter OutlineButton?

问题描述

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?

The above code gives a transparent button. How can I get an orange OutlineButton?

推荐答案

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

To modify the backgroundColor of a OutlineButton you can use a DecoratedBox and a Theme widget. At the end of this answer you'll find a quick example.

无论如何，我仍然会推荐，只需使用 FlatButton 及其color属性.

Anyway I'd still recommend simply using the FlatButton with its color attribute instead.

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

Wrap your OutlinedButton inside a DecoratedBox. Set the shape of your DecoratedBox to the same shape your OutlinedButton. Now you can use the color attribute of your DecoratedBox to change the color. The result will still have a small padding around the OutlinedButton. To remove this you can wrap the DecoratedBox inside a Theme in which you adjust the ButtonTheme. Inside the ButtonTheme you want to set materialTapTargetSize: MaterialTapTargetSize.shrinkWrap.

在Flutter内部添加了填充，以将按钮周围的点击区域增加到最小48x48

The padding is added inside Flutter, to increase the tap area around the button to a minimum size of 48x48 (source). Setting materialTapTargetSize to MaterialTapTargetSize.shrinkWrap removes this minimum size.

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示例:

---

OutlinedButton example:

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: () => {},
        ),
      ),
    );
  }
}

这篇关于如何设置Flutter OutlineButton的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！