Flutter开发如何移除TextButton组件自带的圆角效果

移除Flutter TextButton默认圆角的方案 #

• 单个TextButton局部配置：
  可以通过style属性指定按钮形状，将圆角半径设置为0即可，两种常用写法：
  写法1：使用TextButton.styleFrom（更简洁）

  TextButton(
    style: TextButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.zero,
      ),
    ),
    onPressed: () {
      // 点击逻辑
    },
    child: Text("按钮文本"),
  )
  

  写法2：使用MaterialStateProperty适配多状态

  TextButton(
    style: ButtonStyle(
      shape: MaterialStateProperty.all(
        RoundedRectangleBorder(borderRadius: BorderRadius.zero),
      ),
    ),
    onPressed: () {
      // 点击逻辑
    },
    child: Text("按钮文本"),
  )
  

• 全局统一配置所有TextButton样式：
  如果项目中所有TextButton都不需要圆角，可以直接在MaterialApp的主题中配置，无需逐个组件修改：

  MaterialApp(
    theme: ThemeData(
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        ),
      ),
    ),
    // 其他配置
  )
  

内容的提问来源于stack exchange，提问作者Logic