flutter - 如何拥有一个与 appbar 宽度相同的按钮?
问题描述
说明:
我定义了一个标准的 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",
),
),
),
],
),
),
),
),
),
]),
);
}
}
解决方案
使用SizedBox
具有无限宽度的 a 来FlatButton
填充水平空间,然后将其包裹在 a 中Padding
(AppBar
填充为 16):
Padding(
padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
child: SizedBox(
width: double.infinity,
child: FlatButton(
onPressed: null,
child: Text('Play'),
),
),
);