FlutterFire_UI自定义问题:无法修改背景色及移除指定文本
解决FlutterFire UI自定义样式的两个问题
问题1:SignInScreen背景色设置不生效
你当前用ThemeData(backgroundColor: Colors.red)不生效,是因为FlutterFire UI的SignInScreen底层依赖Scaffold组件,而Scaffold默认读取ThemeData中的scaffoldBackgroundColor而非backgroundColor。提供两种解决方式:
方式一:全局修改ThemeData的scaffoldBackgroundColor
return MaterialApp( theme: ThemeData(scaffoldBackgroundColor: Colors.red), home: SignInScreen( headerBuilder: (context, constraints, _) { return Padding( padding: const EdgeInsets.all(2), child: AspectRatio( aspectRatio: 1, child: Image.asset('images/myImage.jpg'), ), ); }, providerConfigs: const [ GoogleProviderConfiguration( clientId: 'myID', ), ], ), );
方式二:单独给SignInScreen设置style参数
这种方式不会影响全局其他页面的Scaffold样式,更精准:
SignInScreen( style: const SignInScreenStyle( backgroundColor: Colors.red, ), headerBuilder: (context, constraints, _) { return Padding( padding: const EdgeInsets.all(2), child: AspectRatio( aspectRatio: 1, child: Image.asset('images/myImage.jpg'), ), ); }, providerConfigs: const [ GoogleProviderConfiguration( clientId: 'myID', ), ], )
问题2:移除登录测试文本和注册切换文本
针对截图里的两类文本,分别通过参数控制隐藏:
- 注册切换文本:用
showAuthActionSwitch参数关闭 - 底部测试文本:自定义
footerBuilder返回空组件覆盖默认内容
修改后的完整代码示例:
SignInScreen( showAuthActionSwitch: false, // 隐藏"没有账号?注册"的切换文本 footerBuilder: (context, _) => const SizedBox.shrink(), // 隐藏底部测试文本 headerBuilder: (context, constraints, _) { return Padding( padding: const EdgeInsets.all(2), child: AspectRatio( aspectRatio: 1, child: Image.asset('images/myImage.jpg'), ), ); }, providerConfigs: const [ GoogleProviderConfiguration( clientId: 'myID', ), ], )
内容的提问来源于stack exchange,提问作者Ten Digit Grid
相关产品推荐
相关产品推荐

