Flutter Fire UI中如何在两个内置登录按钮之间添加间距

在Flutter Fire UI开发中，未自定义按钮组件、直接使用框架内置功能自动渲染登录UI时，需要给自动生成的邮箱登录按钮、Google登录按钮等不同登录入口之间增加间距，当前使用的登录提供者配置代码如下：

providerConfigs: const [
  EmailProviderConfiguration(),
  GoogleProviderConfiguration(
    clientId: '316263778394:android:7ce6031f0d41db0503b063',
  ),
  PhoneProviderConfiguration(),
],

不需要重写自定义按钮组件，两种方案可直接实现需求：

• 方案1：使用组件自带的spacing参数（推荐）
  官方提供的SignInScreen、LoginView等Fire UI登录组件自带spacing命名参数，传入对应数值即可统一设置所有登录按钮之间的垂直间距，不需要额外修改样式或组件逻辑：

  SignInScreen(
    // 传入需要的间距值，单位为逻辑像素，比如16即为16逻辑像素的间距
    spacing: 16,
    providerConfigs: const [
      EmailProviderConfiguration(),
      GoogleProviderConfiguration(
        clientId: '316263778394:android:7ce6031f0d41db0503b063',
      ),
      PhoneProviderConfiguration(),
    ],
    // 其余配置项比如actions、headerBuilder等保持原有逻辑即可
  )
  

• 方案2：通过按钮主题配置内边距（适配无spacing参数的旧版本）
  如果使用的是较早版本的Flutter Fire UI，没有开放spacing参数，可以通过给按钮设置上下内边距的方式实现间距效果。如果只需要登录页按钮生效，用Theme组件单独包裹登录页即可，不需要全局修改App主题影响其他页面按钮：

  // 用Theme局部包裹登录页，仅修改当前页面的按钮样式
  Theme(
    data: Theme.of(context).copyWith(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          // 给按钮增加上下内边距，按钮之间自然形成间距
          padding: const EdgeInsets.symmetric(vertical: 12),
        ),
      ),
    ),
    child: SignInScreen(
      providerConfigs: const [
        EmailProviderConfiguration(),
        GoogleProviderConfiguration(
          clientId: '316263778394:android:7ce6031f0d41db0503b063',
        ),
        PhoneProviderConfiguration(),
      ],
    ),
  )
  

如果需要单独调整某两个按钮之间的非统一间距（比如邮箱和Google按钮间距24，Google和手机号按钮间距12），可以使用组件自带的providerBuilder参数单独给对应按钮加外边距，不需要重写整个按钮的交互逻辑。

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