How to set width of CupertinoButton in Flutter?

Question

Am I missing something obvious here? Setting minSize on CupertinoButton button sets width and height (see image).

How do I set only the width?

Thanks in advance.

Solution 1

Wrap it in a SizedBox and set width and height.

Example

SizedBox(
   width: 500,
   height: 200
   child: CupertinoButton(
       onPressed: (){},
       child: Text("Click Me", style: TextStyle(color: Colors.white)),
       color: Colors.green
   )
)

NOTE: It is best practice to use SizedBox as it is more efficient since you only need to change the width and height.

Check this. Flutter: SizedBox Vs Container, why use one instead of the other?

Solution 2

To give your CupertinoButton a specific width and height.

You can do one of the following:

1) Wrap it in a SizedBox and give it a Width and Height

Check code below for example:

 SizedBox(
   // set your width property here
   width: 100,
   // set your width property here
   height: 100
   child: CupertinoButton(
     ......  
   ),
);

2) Wrap it in a Container and give it a Width and Height

Check code below for example:

Container(
   // set your width property here
   width: 100,
   // set your width property here
   height: 100
   child: CupertinoButton(
     ......  
   ),
);

NOTE: for better performance, it is advised to pick Widgets according to the properties to be used. If you need some properties of the Container, go for the Container widget.

If you don't need most of the properties the Container has, go for the SizedBox widget.