我想知道如何设置一个宽度，以匹配父布局宽度
new Container(
width: 200.0,
padding: const EdgeInsets.only(top: 16.0),
child: new RaisedButton(
child: new Text(
"Submit",
style: new TextStyle(
color: Colors.white,
)
),
colorBrightness: Brightness.dark,
onPressed: () {
_loginAttempt(context);
},
color: Colors.blue,
),
),
我知道一点点关于扩展小部件，但扩展扩展视图到两个方向，我不知道如何做到这一点。
当前回答
最简单的方法是使用一个包装在容器中的FlatButton，默认情况下，按钮接受其父的大小，并为容器分配所需的宽度。
Container(
color: Colors.transparent,
width: MediaQuery.of(context).size.width,
height: 60,
child: FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {},
color: Colors.red[300],
child: Text(
"Button",
style: TextStyle(
color: Colors.black,
fontFamily: 'Raleway',
fontSize: 22.0,
),
),
),
)
输出:
其他回答
在Flutter 2.0中，RaisedButton已弃用，并被ElevatedButton取代。
ElevatedButton小部件的minimumSize属性正是这样做的。
示例代码:
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
onPrimary: Colors.white,
shadowColor: Colors.greenAccent,
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
minimumSize: Size(100, 40), //////// HERE
),
onPressed: () {},
child: Text('MyButton'),
)
你可以用MaterialButton来做
MaterialButton(
padding: EdgeInsets.all(12.0),
minWidth: double.infinity,
onPressed: () {},
child: Text("Btn"),
)
new SizedBox(
width: 100.0,
child: new RaisedButton(...),
)
这个方法对我很管用
width: MediaQuery.of(context).size.width-100,
OutlineButton(
onPressed: () {
logInButtonPressed(context);
},
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: Text(
“Log in”,
textAlign: TextAlign.center,
),
),
)
这样的东西对我很有用。
