如何在 Flutter 上为 Material 小部件设置宽度？

Question

我有一个Material小部件来包装 aMaterialButton以制作边框半径，但我无法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(
  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;
                    });
                  },
                ),
              ),
            );

结果：