Flutter使用flutter_signin_button包实现登录按钮出现溢出问题如何解决

问题原因 #

• flutter_signin_button的预定义按钮默认带有固定的内置水平内边距和最小宽度，当屏幕宽度不足、系统字体缩放比例较高时，就会出现横向溢出
• 给按钮添加Expanded的操作作用在Column的子节点上，会占用垂直方向的剩余空间，才会出现按钮被纵向拉伸的异常
• iPhone7 Plus真机和模拟器表现不一致是因为真机的系统字体缩放、显示缩放设置可能和模拟器默认配置不同，触发了宽度阈值

解决步骤 #

1. 替换按钮外层的Container，使用ConstrainedBox主动限制按钮的最大宽度，同时减少按钮的内置内边距，修正后的按钮代码如下：

// Facebook登录按钮
ConstrainedBox(
  constraints: BoxConstraints(
    // 最大宽度设为屏幕宽度的90%，预留左右安全边距
    maxWidth: MediaQuery.of(context).size.width * 0.9,
    minHeight: 50,
  ),
  child: SignInButton(
    Buttons.FacebookNew,
    onPressed: () => authBloc.loginFacebook(),
    // 减少默认的左右内边距，给文本留更多空间
    padding: const EdgeInsets.symmetric(horizontal: 8),
  ),
),
// Apple登录按钮
ConstrainedBox(
  constraints: BoxConstraints(
    maxWidth: MediaQuery.of(context).size.width * 0.9,
    minHeight: 50,
  ),
  child: SignInButton(
    Buttons.AppleDark,
    onPressed: () {},
    text: "Apple",
    padding: const EdgeInsets.symmetric(horizontal: 8),
  ),
),

2. 如果还有文本溢出问题，可以给按钮加上自定义文本样式，缩小字号或者设置文本溢出处理规则：

SignInButton(
  Buttons.AppleDark,
  onPressed: () {},
  text: "Apple",
  padding: const EdgeInsets.symmetric(horizontal: 8),
  // 自定义文本样式，适配小屏幕
  textStyle: TextStyle(fontSize: 14, overflow: TextOverflow.ellipsis),
),

3. 如果整个登录页面垂直方向也有溢出风险，给最外层的Column套上SingleChildScrollView，避免小屏幕设备纵向布局异常，不要给固定高度的按钮组件加Expanded属性。
4. 若自定义需求较高，也可以自行用Row+Icon+Text实现登录按钮，布局灵活度远高于第三方预定义组件。

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