如何拥有一个与 appbar 宽度相同的按钮？答案

【问题标题】：How to have a button with the same width as appbar?如何拥有一个与 appbar 宽度相同的按钮？
【发布时间】：2019-10-04 03:37:33
【问题描述】：

总结：
目前我有这个结果：

我的目标是得到这个结果（所有元素都对齐）：

说明：
我定义了一个标准的 appBar、FlatButton 和 textField。我希望所有元素具有相同的宽度并垂直对齐。默认 appBar 和 TextField 具有相同的宽度，但不是我的按钮。那么，如何拥有一个与其他元素宽度相同的按钮呢？

代码：

    import 'package:flutter/material.dart';

/// Styles
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Test", style: TextStyle(color: Colors.white)),
        centerTitle: true,
        backgroundColor: Colors.black,
      ),

      body: Stack(children: <Widget>[
        new Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,

          child: SingleChildScrollView(
            child: Container(
              child: Center(
                child: Column(
                  children: <Widget>[
                    SizedBox(
                      height: 50,
                    ),

                     new ButtonTheme(
                      //minWidth: 300,
                      child: FlatButton(
                      color: Colors.black,
                      child: Text('Play', style: TextStyle(fontSize: 18, color: Colors.white)),
                      onPressed: () {
                        // Perform some action
                      },
                    ),

                ),
                    SizedBox(
                      height: 50,
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person),
                      title: new TextField(
                        decoration: new InputDecoration(
                          hintText: "Name Player 1",
                        ),
                      ),
                    ),                    
                  ],
                ),
              ),
            ),
          ),
        ),
      ]),
    );
  }
}

【问题讨论】：

发现 Widget 正在使用填充/边距等空间的一个好方法是在 Flutter Inspector 中启用“显示调试绘制”

标签： flutter

【解决方案1】：

使用无限宽度的SizedBox 使您的FlatButton 填充水平空间，然后将其包裹在Padding 中（AppBar 填充为 16）：

Padding(
  padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
  child: SizedBox(
    width: double.infinity,
    child: FlatButton(
      onPressed: null,
      child: Text('Play'),
    ),
  ),
);

【讨论】：