如何在Flutter上设置材质小部件的宽度？

Question

我有一个Material小部件来包装一个MaterialButton来制作边界半径，但我不能设置width属性。我尝试使用SizedBox但不起作用，Material小部件继续使用屏幕的所有空间。

码：

return new SizedBox(
              width: 40,
              child: Material(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22.0)),
                elevation: 18.0,
                color: Color(0xFF801E48),
                clipBehavior: Clip.antiAlias, 
                child: MaterialButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  height: 30.0,
                  child: new Text('Sair',
                      style:
                          new TextStyle(fontSize: 16.0, color: Colors.white)),
                ),
              ),
            );

结果：

显然它没有40.0的宽度尺寸。

Answer 1

你找到了一个解决方法，但这里有一个提示。总是当您需要更改宽度，高度或添加某些窗口小部件的填充时，将窗口小部件包装到Container中。容器小部件用于此类工作。

Container(
  width: myWidthValue, // Container child widget will get this width value
  height: myHeghtValue, // Container child widget will get this height value
  padding: allowPaddingToo, // padding is allowed too
  child: Material(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22.0)),
                elevation: 18.0,
                color: Color(0xFF801E48),
                clipBehavior: Clip.antiAlias, // Add This
                child: MaterialButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  height: 30.0,
                  child: new Text('Sair',
                      style:
                          new TextStyle(fontSize: 16.0, color: Colors.white)),
                  onPressed: () {
                    setState(() {
                      _isNeedHelp = false;
                    });
                  },
                ),
              ),
);

Answer 2

使用Padding解决：

return Padding(
              padding: EdgeInsets.fromLTRB(50, 0, 50, 0),
              child: Material(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(22.0)),
                elevation: 18.0,
                color: Color(0xFF801E48),
                clipBehavior: Clip.antiAlias, // Add This
                child: MaterialButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  height: 30.0,
                  child: new Text('Sair',
                      style:
                          new TextStyle(fontSize: 16.0, color: Colors.white)),
                  onPressed: () {
                    setState(() {
                      _isNeedHelp = false;
                    });
                  },
                ),
              ),
            );

结果：