How To Change Flutter RaisedButton Size

Flutter RaisedButton size

In this post, I will be explaining how to change Flutter RaisedButton size using a practical Flutter code example. A step by step explanation of how to customize Flutter RaisedButton size is necessary so you can have a complete and better understanding of how to practically implement the customization of Flutter RaisedButton size. So let’s not keep you waiting anymore and get right into the customization of Flutter RaisedButton size.

What is Flutter RaisedButton Size?

Flutter RaisedButton size is of course the size of the Flutter RaisedButton, means the height and width of Flutter RaisedButton. As there is no direct height and width constructor of the Flutter RaisedButton class so we will be using another way to still implement the customization of Flutter RaisedButton size. So let’s get right into changing the Flutter RaisedButton size.

Default Flutter RaisedButton Size

To see the default Flutter RaisedButton size, we have to define a simple Flutter RaisedButton widget. See the below code:

 RaisedButton(
           onPressed: () {},
                child: Text(
                      'Default Button Size',
                    ),
                  )
Flutter RaisedButton default size
You can see in the above code that we have used the child constructor of the Flutter RaisedButton class just for demonstration and also we have passed an empty function to the required onPressed constructor, the reason is that we don’t want any action to be triggered when we press the Flutter RaisedButton.
In the above image, you can see the default Flutter RaisedButton size, the width is little bigger, the reason is that we have used a longer text in it. You can remove the text and then you will see the real default Flutter RaisedButton size. Now let’s see how to change the Flutter RaisedButton size.

Change Flutter RaisedButton Size

In order to change the Flutter RaisedButton size, use the padding constructor of the Flutter RaisedButton class. For demonstration, I have passed edge in sets all and have given it a larger value so you can see the custom size of the Flutter RaisedButton. See the below code:

RaisedButton(
           onPressed: () {},
                    padding: EdgeInsets.all(30),
                    child: Text(
                      'Custom Button Size',
                    ),
                  )
Flutter RaisedButton change size
In the above image, you can see that the size of the raised button is now changed. I have used edge in sets all and have given it a value which will give same padding to each side but if you want different values then you can use edge in sets symmetric to give same horizontal and vertical value or edge in sets only to give each and each side a different value.
Now you have a practical implementation knowledge on how to change Flutter RaisedButton size. If you still face any problems regarding the customization of Flutter RaisedButton size then do let me know in the comment section. I would love to solve all your queries.
I also have prepared a custom Flutter RaisedButton design for you in which Flutter RaisedButton size is also changed. Hope you will love this design. The source code is given in the below section.

Custom Flutter RaisedButton Design Source Code

Flutter RaisedButton size

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 40),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  RaisedButton(
                      onPressed: () {},
                      padding:
                          EdgeInsets.symmetric(horizontal: 30, vertical: 20),
                      elevation: 15,
                      color: Colors.blue,
                      child: Text(
                        'Custom Raised Button Size',
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ))
                ],
              ))),
    ));
  }
}

Conclusion

In conclusion, you now know what Flutter RaisedButton size is and how to customize it. I would love to have your valuable feedback on this article. Please feel free to also visit my other posts in which I have covered topics related to Flutter widgets, Flutter app development, Flutter animations, Flutter templates and many more. Thanks for reading this post.

Leave a Comment

Your email address will not be published.