我想知道如何设置一个宽度，以匹配父布局宽度
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,
),
),
我知道一点点关于扩展小部件，但扩展扩展视图到两个方向，我不知道如何做到这一点。
当前回答
最基本的方法是通过将容器的宽度定义为无穷大来使用容器。参见下面的代码示例
Container(
width: double.infinity,
child:FlatButton(
onPressed: () {
//your action here
},
child: Text("Button"),
)
)
其他回答
更新:
在Flutter 2.0中，RaisedButton已弃用，并被ElevatedButton取代。你可以像这样使用minimumSize:
ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: Size.fromHeight(40), // fromHeight use double.infinity as width and 40 is the height
),
onPressed: () {},
child: Text('Text Of Button'),
)
颤振小于2.0的旧答案:
正确的解决方案是使用sizebox。扩展小部件，它强制其子部件与其父部件的大小相匹配。
SizedBox.expand(
child: RaisedButton(...),
)
有很多选择，允许或多或少的定制:
SizedBox(
width: double.infinity,
// height: double.infinity,
child: RaisedButton(...),
)
或者使用ConstrainedBox
ConstrainedBox(
constraints: const BoxConstraints(minWidth: double.infinity),
child: RaisedButton(...),
)
TextButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.blue),
fixedSize: MaterialStateProperty.all(
Size(double.maxFinite, 50.0),
),
),
onPressed: () {},
child: Text('Upgrade to Premium'),
),
@Mohit Suthar,
找到了一个最好的解决方案，匹配父宽以及高度如下
new Expanded(
child: new Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.all(16.0),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(const Radius.circular(8.0)),
border: new Border.all(color: Colors.black, width: 1.0)),
child: new Text("TejaDroid")),
),
在这里，您可以检查扩展控制器获得完整的宽度和高度。
OutlineButton(
onPressed: () {
logInButtonPressed(context);
},
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: Text(
“Log in”,
textAlign: TextAlign.center,
),
),
)
这样的东西对我很有用。
这对我很有用。
SizedBox(
width: double.maxFinite,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: new Text("Button 2"),
color: Colors.lightBlueAccent,
onPressed: () => debugPrint("Button 2"),
),
),
