How to set width to Material widget on Flutter?

Question

I've a Material widget to wrap a MaterialButton to make border radius, but I can't set the width attribute to it. I tried use a SizedBox but not works, the Material widget keep using all space of screen.

Code:

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

Result:

Clearly it not have 40.0 of width size.

Answer 1

A better approach is using Container widget. When you need to change width, height or add padding/margin to any widget you should wrap the target widget into a container. The container widget is for this kind of job.

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;
                    });
                  },
                ),
              ),
);