Search code examples
flutterfirebase-authenticationflutter-layout

Customizing Flutterfire_UI package - Can't change background color or remove items

I have been following the documentation here for FlutterFire_UI Package. I have my sign in working great, but I am struggling on handling the customization to make it look nicer.

First off just a simple background change.

I tried wrapping the SignInscreen Widget in a material theme to just try changing the background to red:

      return MaterialApp(
        theme: ThemeData(backgroundColor: 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',
              ),
            ]),

But this is not changing the background to red.

I am also struggling to remove the sign in test and the register text here as well:

enter image description here

Thanks in advance for any pointers or tips!

Solution

  • I think it is fetching colour from scaffold. You can try

    scaffoldBackgroundColor : Colors.red,

    Not sure if you can change the text using the sign in screen widget. If you wish to customise the widgets please take a look at AuthFlowBuilder

    Reference https://firebase.flutter.dev/docs/ui/auth/building-a-custom-ui/