Closed graemep-nz closed 1 year ago
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.
You need to test with the main.dart code that I posted.
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))) ,
),
),
);
}
Is this going to be fixed?
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.
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