flutter - 删除行首不需要的填充
问题描述
我的Row
容器中的左侧包含填充(我认为)。我想与Column
. 在过去的两个小时里,我一直在玩填充,并找出如何消除填充......
登录应该从左边垂直对齐,上面有按钮
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
height: MediaQuery.of(context).size.height,
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/img/signin.png'),
fit: BoxFit.cover,
),
),
),
Container(
padding: EdgeInsets.only(top: 100),
child: Opacity(
opacity: _showProgressIndicator ? 1 : 0,
child: CircularProgressIndicator(),
),
),
Container(
// height: MediaQuery.of(context).size.height - 180,
padding:
EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 60),
child: Form(
key: formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
verticalDirection: VerticalDirection.up,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
new FlatButton(
padding: EdgeInsets.zero,
child: new Text('SIGN IN',
style: Theme.of(context).textTheme.body1),
onPressed: () {
Navigator.push(
context, SignInPage(widget.onSignedIn));
},
),
Opacity(
opacity: _showMessage ? 1 : 0,
child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
new FlatButton(
padding: new EdgeInsets.all(0.0),
child: new Text(
'SIGN UP WITH EMAIL',
style: Theme.of(context).textTheme.body1,
),
onPressed: () {
Navigator.push(
context, SignUpPage(widget.onSignedIn));
},
),
]),
new Container(
// padding: EdgeInsets.all(10),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new RaisedButton(
color: Colors.blue[800],
padding: EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(4))),
child: new Text('CONNECT WITH FACEBOOK',
style: new TextStyle(
fontSize: 16,
letterSpacing: 0.5,
color: Colors.white)),
onPressed: loginWithFb,
),
new SizedBox(height: 20),
new RaisedButton(
color: Colors.red,
padding: EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(4))),
child: new Text('CONNECT WITH GOOGLE',
style: new TextStyle(
fontSize: 16,
letterSpacing: 0.5,
color: Colors.white)),
onPressed: loginWithGoogle,
),
],
),
),
],
),
))
],
),
),
);
}
解决方案
ButtonTheme
如果我理解正确你的意思,我可以通过更改默认值来解决这个问题,因为你说:
登录应该从左边垂直对齐,上面有按钮
你不是说从左边水平,如果是这样的话试试这个:
用和 new包裹Flatbutton
在 Theme 中,然后用你自己的改变 padding 和 minWidth (当我只改变 padding 或 width 时它不起作用)。这会从 ButtonTheme
示例中删除默认值:ThemeData
ButtonTheme
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Theme(
data: ThemeData(buttonTheme: ButtonThemeData(minWidth: 20.0,padding: EdgeInsets.all(0.0))),
child: new FlatButton(
child: new Text('SIGN IN',
style: Theme.of(context).textTheme.body1),
onPressed: () {
},
),
),
Opacity(
opacity: true ? 1 : 0,
child: Text('CONSIDER GOOGLE', style:Theme.of(context).textTheme.body1)),
new FlatButton(
padding: new EdgeInsets.all(0.0),
child: new Text(
"SIGN UP WITH EMAIL ",
style: Theme.of(context).textTheme.body1,
),
onPressed: () {
},
),
]),
结果:
推荐阅读
- ruby-on-rails - Rails - `:start_date` 和 `:end_date` 的 DB 级别验证
- azure - Azure RHEL - 未按照 smp_affinity 中的指定分配中断
- python - 神经网络中反向传播的困惑
- mongodb - 带有查找和计数的 MongoDB 聚合很慢
- spring - Spring Boot MockMVC 测试 - 启用前后注释
- python - 带有 BERT 分词器的 CUDA 并行 for 循环
- android - 如何解码 android 中风格的 url?
- python - Odoo14 如何在模板中使用变量
- javascript - 我需要在我的代码中更改哪些模式才能在我的登录按钮上工作?
- vue.js - Vue apollo 将结果添加到数组