How to set the width of a RaisedButton in Flutter? 7 Methods Explained

Hello guys how are you all ? hope you are all fine. Today in this tutorial we are going to learn How to set the width of a RaisedButton in Flutter? many times we want to

How to set the width of a RaisedButton in Flutter?

You can set the width of a RaisedButton in Flutter in a different method. We will talk about all the below methods with the example.

1. Set the width of a RaisedButton By Using SizedBox
2. Set the width of a RaisedButton By Using ButtonTheme
3. Set the width of a RaisedButton Use MaterialButton
4. Set the width of a RaisedButton Use MaterialButton
5. Set the width of a RaisedButton By Using Expanded
6. Set the width of a RaisedButton By Using Container
7. Set the width of a RaisedButton By Using FractionallySizedBox

Set the width of a RaisedButton By Using SizedBox

You can Set Height and width By Using SizedBox. SizedBox has height and width property so simply give height and width to sizedBox. So you can do it like the following:

              SizedBox(
                width: double.infinity,
                child: RaisedButton(
                  color: Colors.green,
                  onPressed: () {},
                  child: Text("RaisedButton"),
                ),
              )

Set the width of a RaisedButton By Using ButtonTheme

You can Set Height and minWidth By Using ButtonTheme. ButtonTheme has height and minWidth property so simply give height and minWidth to ButtonTheme. So you can do it like the following:

              ButtonTheme(
                minWidth: 300.0,
                height: 40.0,
                child: RaisedButton(
                  color: Colors.green,
                  onPressed: () {},
                  child: Text("RaisedButton"),
                ),
              )

Set the width of a RaisedButton Use MaterialButton

You can Set Height and minWidth By Using MaterialButton. MaterialButtonhas height and minWidth property so simply give height and minWidth to MaterialButton. So you can do it like the following:

              MaterialButton(
                height: 40.0,
                minWidth: 300.0,
                color: Colors.green,
                textColor: Colors.white,
                child: new Text("MaterialButton"),
                onPressed: () => {},
                splashColor: Colors.green,
              )

Set the width of a RaisedButton By Using Expanded

You need to use an Expanded Widget. But, if your button is on a column, the Expanded Widget fills the rest of the column. So, you need to enclose the Expanded Widget within a row. So you can do it like the following:

              Container(
                height: 50,
                width: 300,
                child: Expanded(
                  flex: 1,
                  child: RaisedButton(
                    color: Colors.green,
                    onPressed: () {},
                    child: Text("RaisedButton"),
                  ),
                ),
              )

Set the width of a RaisedButton By Using Container

You can Set Height and width By Using Container. The container has height and width property so simply give height and width to Container. So you can do it like the following:

              Container(
                height: 50,
                width: 300,
                child: RaisedButton(
                  color: Colors.green,
                  onPressed: () {},
                  child: Text("RaisedButton"),
                ),
              )

Set the width of a RaisedButton By Using FractionallySizedBox

Simply use FractionallySizedBox, where widthFactor & heightFactor define the percentage of app/parent size. So you can do it like the following:

              FractionallySizedBox(
                widthFactor: 0.8, //means 80% of app width
                child: RaisedButton(
                  onPressed: () {},
                  child: Text(
                    "RaisedButton",
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Colors.green,
                ),
              ),

here Is Output of all above methods.

Faq

Summery

So, It’s All About How to set the width of a RaisedButton in Flutter?. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• Could not determine the dependencies of task ‘:app:compileDebugJavaWithJavac’ flutter
• How to convert int variable to string in Flutter
• error running pod install in flutter on mac
• Flutter iOS build failed Warning: Podfile is out of date
• Undefined class ‘FirebaseUser’