Flutter中Button如何去掉默认的外边距和内边距

最新推荐文章于 2026-06-22 08:50:45 发布

原创最新推荐文章于 2026-06-22 08:50:45 发布 · 4.6k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

闪亮的大早

关注

标签

#flutter #android #ios #前端

分类移动开发

Flutter 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Flutter中删除Button的默认内外边距。通过调整样式，可以实现TextButton的外边距和内边距消除，从而达到自定义布局的效果。

Flutter中Button如何去掉默认的外边距和内边距

默认情况下，Button是带有内边距的和外边距的。

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),
              )),

如下图：
在这里插入图片描述

去掉外边距

//TextButton 中的 style  的 tapTargetSize 属性
 tapTargetSize: MaterialTapTargetSize.shrinkWrap

去掉内边距

//TextButton 中的 style  的 padding 属性 
padding: EdgeInsets.zero,

更改之后

TextButton 1 去掉了内边距和外边距

TextButton 2 去掉了外边距

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),
              )),