In this tutorial, we’ll learn how to implement Flutter elevated button remove padding with the help of an easy Flutter example.
Outline
- Introduction: Flutter Elevated Button Remove Padding
- Default Padding Of Flutter Elevated Button
- Remove Padding From Flutter Elevated Button
- Flutter Elevated Button Remove Padding Source Code
- Conclusion
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',
))
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 Source Code
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.
You might also like:
Flutter Animated Container Duration Customization [Easy Flutter Guide]
How To Set Flutter Raised Button Rounded Corners [Easy Flutter Guide]
How To Set Flutter Flat Button Rounded Corners [Easy Flutter Guide]
Flutter Textformfield Focused Underline Border Thickness Customization
How To Use Animated Container In Flutter? Explained With Example
How To Set Flutter Elevated Button Disabled [Flutter Easy Guide]
How To Pause Video In Flutter App [Flutter Easy Guide]
[Solved] Flutter Video Player Easy Implementation With Practical Example
