🐛 [firebase_ui_auth 1.1.10] Red text boxes on error look silly.

[graemep-nz]

Bug report

When an error on sign-in such as invalid email address occurs, the outline of the text box changes to red and becomes smaller. This makes the screen look silly and is unnecessary on such a small screen. The error message is shown in red.

See https://github.com/firebase/flutterfire/issues/10431 for files etc. Issue number 3 in firebase_ui_auth 1.1.10 issues.pdf

https://github.com/firebase/flutterfire/issues/10431 https://github.com/firebase/FirebaseUI-Flutter/issues/39 https://github.com/firebase/flutterfire/issues/10434 https://github.com/firebase/flutterfire/issues/10435 https://github.com/firebase/FirebaseUI-Flutter/issues/35

[darshankawar]

I was unable to replicate this. I didn't observe the textboxes becoming smaller. They do change to red outline as shown below:

I do agree with no cancel button present on the dialog though. Will label this for team's insights on expected behavior regarding red text boxes.

[graemep-nz]

You need to test with the main.dart code that I posted.

[graemep-nz]

Try with my theme and see if you can reproduce it

  static final signInTheme = ThemeData(
    textTheme: const TextTheme(labelLarge:TextStyle(fontSize:20, color: Colors.blue ),   // the forgot password "button"
      titleMedium: TextStyle(fontSize: 16,color: Colors.blueAccent)),  // text in email text box
    inputDecorationTheme: InputDecorationTheme(
      hintStyle: const TextStyle(fontSize:24, color: Colors.blue ),
      labelStyle: const TextStyle(color: Colors.blue ),   // hint text inside text field
      constraints: const BoxConstraints(maxHeight: 50, maxWidth: 40, minWidth: 40),
      enabledBorder: const OutlineInputBorder(borderSide: BorderSide(width: 2, color:Colors.lightBlue)),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
    outlinedButtonTheme: OutlinedButtonThemeData(
      style: ButtonStyle(
        // https://medium.flutterdevs.com/flutter-2-0-button-cheat-sheet-93217b3c908a
        backgroundColor: MaterialStateProperty.all<Color>(Color(0xFF64B5F6)),
        textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(fontSize:16)),  // the sign in button text
        padding: MaterialStateProperty.all<EdgeInsets>(
          const EdgeInsets.all(12),
        ),
        //minimumSize: MaterialStateProperty.all(const Size(300,100)),  // <<<<<<<<<<<<<<<<<<<<<<<<<<<
        //maximumSize: MaterialStateProperty.all(const Size(300,100)), // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(16))) ,
      ),
    ),
  );
}

[graemep-nz]

Is this going to be fixed?

[lesnitsky]

This has little to do with the firebase_ui. You will get the same results when using Flutter widget directly.

runApp(
  MaterialApp(
    theme: ThemeData(
      textTheme: const TextTheme(
        labelLarge: TextStyle(
          fontSize: 20,
          color: Colors.blue,
        ), // the forgot password "button"
        titleMedium: TextStyle(
          fontSize: 16,
          color: Colors.blueAccent,
        ),
      ), // text in email text box
      inputDecorationTheme: InputDecorationTheme(
        hintStyle: const TextStyle(
          fontSize: 24,
          color: Colors.blue,
        ),
        labelStyle: const TextStyle(
          color: Colors.blue,
        ), // hint text inside text field
        constraints: const BoxConstraints(
          maxHeight: 50,
          maxWidth: 40,
          minWidth: 40,
        ),
        enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(width: 2, color: Colors.lightBlue),
        ),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
    home: Scaffold(
      body: Form(
        autovalidateMode: AutovalidateMode.always,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            TextFormField(
              validator: (v) {
                if (v == null) return 'Please enter some text';
                if (v.length < 5) {
                  return 'Please enter at least 5 characters';
                }

                return null;
              },
            )
          ],
        ),
      ),
    ),
  ),
);

I've noticed that TextField is not becoming smaller when constraints is dropped from the provided theme. I'm not sure if this is a valid flutter issue or improper Theme configuration, but in any case there's nothing to fix from firebase_ui_auth perspective.

Feel free to submit the issue to the flutter repo.