I’m working on a Flutter app for Android and have encountered an issue with the app’s navigation behavior after implementing user authentication features using Firebase. I followed a tutorial from the WS Cube YouTube channel for integrating Firebase authentication into my app.
1- I followed the tutorial meticulously, ensuring that I integrated Firebase into my Flutter app correctly.
here are the files what i use in my project.
## pubsyml
name: firebase
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: '>=3.2.4 <4.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
firebase_core: ^2.27.0
firebase_auth: ^4.17.8
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^3.0.2
flutter:
uses-material-design: true
my main dart code
import 'package:firebase/checkuser.dart';
import 'package:firebase/login.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
void main()async{
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: FirebaseOptions(apiKey: "AIzaSyDQZxWx776Vhl7Hw4VG5RhaSPX13v6ygRk",
appId: "1:1049018787351:android:309401ce75103c0f171e52",
messagingSenderId: "1049018787351",
projectId: "harsh-c8ebd")
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: CheckUser(),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Text('hello'),
);
}
}
login screen file in code
import 'package:firebase/helper.dart';
import 'package:firebase/main.dart';
import 'package:firebase/signuppage.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Loginpage extends StatefulWidget {
const Loginpage({Key? key}) : super(key: key);
@override
State<Loginpage> createState() => _LoginpageState();
}
class _LoginpageState extends State<Loginpage> {
TextEditingController emailcontroller = TextEditingController();
TextEditingController passwordcontroller = TextEditingController();
login(String email, String password) async {
if (email == "" && password == "") {
return Helper.CustomAlertBox(context, "Enter required fields");
} else {
try {
UserCredential userCredential = await FirebaseAuth.instance
.signInWithEmailAndPassword(email: email, password: password);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SignUpPage()),
);
} on FirebaseAuthException catch (ex) {
return Helper.CustomAlertBox(context, ex.code.toString());
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Login page"),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Helper.CustomTextField(emailcontroller, "Email", Icons.mail, false),
Helper.CustomTextField(
passwordcontroller, "Password", Icons.password, true),
SizedBox(height: 30),
Helper.CustomButton(
() {
login(emailcontroller.text.toString(),
passwordcontroller.text.toString());
},
"Login",
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Don't have an account?"),
TextButton(
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SignUpPage()));
},
child: Text(
"Sign up",
style: TextStyle(fontSize: 20),
),
)
],
)
],
),
);
}
}
Sign up screen code
import 'package:firebase/helper.dart';
import 'package:firebase/main.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SignUpPage extends StatefulWidget {
const SignUpPage({Key? key}) : super(key: key);
@override
State<SignUpPage> createState() => _SignUpPageState();
}
class _SignUpPageState extends State<SignUpPage> {
TextEditingController emailcontroller = TextEditingController();
TextEditingController passwordcontroller = TextEditingController();
signUp(String email, String password) async {
if (email == "" && password == "") {
Helper.CustomAlertBox(context, "Enter required fields");
} else {
try {
UserCredential userCredential = await FirebaseAuth.instance
.createUserWithEmailAndPassword(email: email, password: password);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomeScreen()),
);
} on FirebaseAuthException catch (ex) {
return Helper.CustomAlertBox(context, ex.code.toString());
}
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Sign Up page"),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Helper.CustomTextField(emailcontroller, "Email", Icons.mail, false),
Helper.CustomTextField(passwordcontroller, "Password", Icons.password, true),
SizedBox(height: 20),
Helper.CustomButton(
() {
signUp(emailcontroller.text.toString(), passwordcontroller.text.toString());
},
"Sign Up",
),
],
),
);
}
}
helper file code what i use as a helper in my codes.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Helper {
static CustomTextField(TextEditingController controller, String text, IconData iconData, bool tohide) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 40),
child: TextField(
controller: controller,
obscureText: tohide,
decoration: InputDecoration(
hintText: text,
suffixIcon: Icon(iconData),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25),
),
),
),
);
}
static CustomButton(VoidCallback voidCallback, String text) {
return SizedBox(
height: 50,
width: 300,
child: ElevatedButton(
onPressed: voidCallback,
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
child: Text(
text,
style: TextStyle(
color: Colors.red,
fontSize: 20,
),
),
),
);
}
static Future<void> CustomAlertBox(BuildContext context, String text) {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(text),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
},
child: Text("OK"),
),
],
);
},
);
}
}
2
Answers
Please move this from
main.dart
to a new filehomepage.dart
Of course you get a blank UI because in MaterialApp() you write CheckUser() instead of Loginpage() which is not a screen.
Change the code like this: