[Solved] Flutter Elevated Button Remove Padding Implementation

flutter elevated button remove padding

In this tutorial, we’ll learn how to implement Flutter elevated button remove padding with the help of an easy Flutter example.

Introduction: Flutter Elevated Button Remove Padding

Padding in elevated button is used to create a distance between the elevated button borders and the child widget. We’ll first give our elevated button a child text widget to see the default padding. After that, we’ll implement Flutter elevated button remove padding.

Default Padding Of Flutter Elevated Button

For that, we’ve to implement a simple elevated button with child text widget. See below code:

ElevatedButton(
           onPressed: () {},
           child: Text(
                'Flutter Elevated Button With Default Padding',
                    ))
flutter elevated button default padding
The above image shows an elevated button with default padding.

Remove Padding From Flutter Elevated Button

In order to do that, we’ve to pass ElevatedButton.styleFrom() to the style constructor of elevated button widget. After that, we’ve to pass Size.zero to the mimimumSize and EdgeInsets.all(0) to the padding. See below code:

ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
                  minimumSize: Size.zero, 
                  padding: EdgeInsets.all(0)), // can also use EdgeInsets.zero                  child: Text(
                      'Flutter Elevated Button With No Padding',
                    ))
flutter elevated button remove padding
The padding has been remove from elevated button as shown in the above image.
So by following the above steps, we can easily remove padding from Flutter elevated button widget.
The complete source code is given below in which Flutter elevated button remove padding is implemented.

Flutter Elevated Button Remove Padding Source Code

flutter elevated button remove padding

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: ElevatedButton(
                    onPressed: () {},
                    style: ElevatedButton.styleFrom(
                        minimumSize: Size.zero, 
                        padding: EdgeInsets.all(0)),
                    child: Text(
                      'Flutter Elevated Button With No Padding',
                    )))));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement Flutter elevated button remove padding. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.

Leave a Comment

Your email address will not be published.