Hello! Today we will learn how to create a sign-up page using Flutter and implement the sign-up functionality. User authentication is a very important aspect of mobile applications, and the sign-up feature is the starting point. In this tutorial, we will create a form that accepts the user’s email, password, and additional information, and learn how to connect it with Firebase Authentication to create a valid account.
1. Prerequisites
First, you need to prepare the following for learning:
- Flutter SDK must be installed. Refer to the official website for installation instructions.
- A Firebase account for the relevant project is needed. Sign up on the Firebase console and create a project.
- You need Android Studio or another code editor.
- You should install the related packages for Flutter. Add the necessary Flutter dependencies for Firebase and HTTP requests.
2. Firebase Project Setup
To use the sign-up functionality with Firebase, you need to set up a Firebase project. Follow the steps below to set it up.
- Log in to the Firebase console and create a new project.
- Go to the ‘Authentication’ menu and enable the email/password option under ‘Sign-in methods’.
- Register the Android/iOS app through ‘App registration’ and download the necessary Google services configuration file.
3. Creating a Flutter Project
To create a new Flutter project, enter the following command in your terminal:
flutter create sign_up_appAfter moving to the project folder, run the following commands to install the required packages:
cd sign_up_app
flutter pub add firebase_core
flutter pub add firebase_auth4. Initializing Firebase
Now you need to initialize Firebase to use it in your Flutter app. Open the lib/main.dart file and add the following code:
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SignUpPage(), // Set to point to sign-up page
);
}
}5. Designing the Sign-Up Page UI
The sign-up page consists of a form where users can enter their email and password. Add the following code to design the sign-up page UI.
class SignUpPage extends StatefulWidget {
@override
_SignUpPageState createState() => _SignUpPageState();
}
class _SignUpPageState extends State {
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sign Up'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
),
TextField(
controller: _passwordController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _signUp,
child: Text('Sign Up'),
),
],
),
),
);
}
void _signUp() {
// Implement sign-up logic here.
}
} 6. Implementing Sign-Up Functionality
Implement the logic to create an account by processing the email and password entered by the user through Firebase Authentication. Add the following code to the _signUp method:
void _signUp() async {
final email = _emailController.text;
final password = _passwordController.text;
try {
UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
email: email,
password: password,
);
// You can perform additional tasks after successful sign-up.
print("Sign-up successful: ${userCredential.user.uid}");
} catch (e) {
print("Sign-up failed: $e");
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Sign-up failed')));
}
}7. Error Handling and Validation
It is necessary to handle errors for the sign-up feature in case the user inputs incorrect information. You can check whether the entered email format is correct and the minimum length of the password to create a more robust feature.
void _signUp() async {
final email = _emailController.text;
final password = _passwordController.text;
if (!_isEmailValid(email) || !_isPasswordValid(password)) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Invalid input')));
return;
}
try {
UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
email: email,
password: password,
);
print("Sign-up successful: ${userCredential.user.uid}");
// You can navigate to the next page or perform other actions.
} catch (e) {
print("Sign-up failed: $e");
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Sign-up failed: ${e.toString()}')));
}
}
bool _isEmailValid(String email) {
return RegExp(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$').hasMatch(email);
}
bool _isPasswordValid(String password) {
return password.length >= 6;
}8. User Feedback
After completing the sign-up functionality, it’s good to consider providing the user with success or failure messages. You can use the SnackBar used in the code above to provide simple feedback.
9. Conclusion and Next Steps
Through this tutorial, you learned how to create a simple sign-up page using Flutter and how to create user accounts through Firebase Authentication. Now you can incorporate these features into your application to allow more users to access it.
As the next step, it would be good to learn more advanced features such as implementing user login functionality or integrating social login. Thank you!