在MaterialButton内部颤振容器宽度

Question

我尝试了几个小时来设置我的容器宽度到它的父，这是一个MaterialButton。我想让这个容器填充材质按钮的整个宽度。

我尝试将容器宽度设置为"double. infinity "或到MediaQuery.of(context).size.width。也玩过"Expanded"等。这些都不起作用。我不知道我做错了什么，谢谢。

@override
Widget build(BuildContext context) {
return Material(
**child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
onPressed: onPressed,
child: Container(
width: double.infinity,**
margin: EdgeInsets.all(8.0),
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10.0)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(text),
SizedBox(
height: 8.0,
),
SvgPicture.asset(
'images/medaillen.svg',
width: 80,
),
SizedBox(
height: 15.0,
),
Text(
textTopThree,
maxLines: 3,
),
],
),
),
),
);

Answer 1

我建议你用InkWell代替Material Button，你可以包装任何小部件并获得onTap。

这个应该可以工作:

InkWell(
onTap: () {},
child: Container(
width: double.infinity,
padding: EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(10.0),
),
child: Column(
children: [
Text('Button Text'),
SizedBox(
height: 8.0,
),
Image.asset(
'images/medaillen.svg',
width: 80,
),                    
SizedBox(
height: 15.0,
),
Text(
'textTopThree',
maxLines: 3,
),
],
),
),
),

如果出于某种原因你需要使用材质按钮，那么你应该删除容器并使用材质按钮的属性，像这样:

MaterialButton(
onPressed: () {},
color: Colors.greenAccent,
minWidth: double.infinity,
padding: EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
child: Column(
children: [
SizedBox(
height: 8.0,
),
Text('Button Text'),
SizedBox(
height: 8.0,
),
Image.asset(
'images/medaillen.svg',
width: 80,
),           
SizedBox(
height: 15.0,
),
Text(
'textTopThree',
maxLines: 3,
),
SizedBox(
height: 8.0,
),
],
),
),