darshankawar
commented
8 months ago @mvdf95 Can you provide complete runnable reproducible code sample that shows the reported behavior ?
Closed mvdf95 closed 7 months ago
darshankawar
commented
8 months ago @mvdf95 Can you provide complete runnable reproducible code sample that shows the reported behavior ?
mvdf95
commented
8 months ago @mvdf95 Can you provide complete runnable reproducible code sample that shows the reported behavior ?
Right. You're going to need to replace your own DefaultFirebaseOptions here because mine contains my Firebase credentials and I'm not sure how to mock them, but other than that is this what you're looking for?
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'firebase/firebase_options.dart' show DefaultFirebaseOptions;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
FirebaseUIAuth.configureProviders([PhoneAuthProvider()]);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test App',
theme: ThemeData(primarySwatch: Colors.blue),
home: PhoneInputScreen(
footerBuilder: (context) =>
Text('footer builds between main button and back button')),
);
}
}
This is the screen this code generates:
darshankawar
commented
8 months ago Thanks for the update. Yes, I do see the same behavior, but I am not sure what exactly is the issue here. Can you elaborate what is the expected behavior as compared to what we are seeing currently ?
mvdf95
commented
8 months ago @darshankawar
footerBuilder is a property passed on to firebase_ui_auth's screen widgets intended for building a footer (bottom section of the page), yes? A use case would be some copyright text, for example. For SignInScreen and ForgotPasswordScreen, it works as intended as no widgets are built after it:
SignInScreen
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'firebase/firebase_options.dart' show DefaultFirebaseOptions;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
FirebaseUIAuth.configureProviders([EmailAuthProvider(), PhoneAuthProvider()]);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test App',
theme: ThemeData(primarySwatch: Colors.blue),
home: SignInScreen(
footerBuilder: (context, action) =>
Text('Copyright MyApp © 2023. All rights reserved.')),
);
}
}
ForgotPasswordScreen
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'firebase/firebase_options.dart' show DefaultFirebaseOptions;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
FirebaseUIAuth.configureProviders([EmailAuthProvider(), PhoneAuthProvider()]);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test App',
theme: ThemeData(primarySwatch: Colors.blue),
home: ForgotPasswordScreen(
footerBuilder: (context) =>
Text('Copyright MyApp © 2023. All rights reserved.')),
);
}
}
But then PhoneInputScreen renders the footer before the back button, cutting the UI in half. This is inconsistent with the other screens and also makes no sense for the interface, especially if I were to pad the footer a little or add some more text, increasing the distance to the "back" button:
PhoneInputScreen
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_ui_auth/firebase_ui_auth.dart';
import 'firebase/firebase_options.dart' show DefaultFirebaseOptions;
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
FirebaseUIAuth.configureProviders([EmailAuthProvider(), PhoneAuthProvider()]);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test App',
theme: ThemeData(primarySwatch: Colors.blue),
home: PhoneInputScreen(
footerBuilder: (context) => Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Copyright MyApp © 2023. All rights reserved. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'),
)),
);
}
}
Does this make the issue clear?
darshankawar
commented
8 months ago Thanks for the update.
Is there an existing issue for this?
What plugin is this bug for?
Firebase UI Auth
What platform(s) does this bug affect?
Android, iOS, Web
List of dependencies used.
flutter pub deps -s list
Steps to reproduce
PhoneInputScreen(footerBuilder: (context) => Text( 'footer builds between main button and back button'))
Expected Behavior
Footer should build after all the buttons, like it does for SignInScreen(), for example.
Actual Behavior
Footer builds between main button and back button.
Additional Information
Immediately apparent on phone_input_screen.dart lines 127 and 133 that the UniversalButton widget is written after PhoneInputView widget builds the footer: