flutter - MaterialButton 内的颤振容器宽度

Question

我尝试了几个小时将我的容器宽度设置为其父级，即 MaterialButton。我希望容器填充 MaterialButton 的整个宽度。

我尝试将容器宽度设置为“double.infitiy”或“MediaQuery.of(context).size.width”。还玩了“扩展”等。它都不起作用。不知道我做错了什么，谢谢。

@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

我建议您将 Material Button 替换为 InkWell，您可以包装任何小部件并获取 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，那么您应该删除 Container 并使用 Material Button 的属性，如下所示：

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,
                ),
              ],
            ),
          ),