How to remove the default outer margin and inner margin of Button in Flutter
By default, Button has padding and padding.
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors.red,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
child: Text("TextButton 1",
style: TextStyle(
color: Colors.white,
)),
onPressed: () {
},
),
TextButton(
onPressed: () {
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith((states) {
return Colors.yellow;
}),
),
child: Text(
"TextButton2",
style: TextStyle(color: Colors.white),
)),
As shown below:
-
remove margins
//TextButton 中的 style 的 tapTargetSize 属性 tapTargetSize: MaterialTapTargetSize.shrinkWrap -
remove padding
//TextButton 中的 style 的 padding 属性 padding: EdgeInsets.zero,
after change
TextButton 1 removes inner and outer margins
TextButton 2 removes margins
TextButton(
style: TextButton.styleFrom(
padding: EdgeInsets.all(0),//内边距
backgroundColor: Colors.red,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,//外边距
),
child: Text("TextButton 1",
style: TextStyle(
color: Colors.white,
)),
onPressed: () {
},
),
TextButton(
onPressed: () {
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.resolveWith((states) {
return Colors.yellow;
}),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,//外边距
),
child: Text(
"TextButton2",
style: TextStyle(color: Colors.white),
)),
The effect is as follows:
