Skip to content
Learning Flutter
Flutter
Flutter Class
Getting Started
Firebase
More
Share
Explore
Flutter

icon picker
Sign Up

We have now made a login screen successfully so now we need to make a sign up screen as well!
We’re going to be writing the SignUp class in the same dart file so we can access the Map we made earlier. First thing you should do is to move the database out of the Login class so you can also access it from the SignUp class as well.
After that make a Stateless widget class with an app bar that says “Sign Up”
import 'package:flutter/material.dart';

class SignUp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sign Up"))
);
}
}
Then add two Strings called username_signup and password_signup to store what you enter into the TextFormFields.
import 'package:flutter/material.dart';

class SignUp extends StatelessWidget {
String username_signup;
String password_signup;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sign Up"))
);
}
}
After that make a variable called formKey2 to use to store the username and password.
import 'package:flutter/material.dart';

class SignUp extends StatelessWidget {
String username_signup;
String password_signup;

final GlobalKey<FormState> formKey2 = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sign Up"))
);
}
}
Next we’re going to write a sign up void that saves what you entered into the database.
import 'package:flutter/material.dart';

class SignUp extends StatelessWidget {
String username_signup;
String password_signup;

final GlobalKey<FormState> formKey2 = GlobalKey<FormState>();

void signup() {
final formState = formKey2.currentState;

if (formState.validate()) {
formState.save();
database[username_signup] = password_signup;
print(database);
formKey2.currentState.reset();
}
else {
formKey2.currentState.reset();
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sign Up")),
);
}
}
Now that we have that built, we can start building the UI! Let’s add the logo first.
import 'package:flutter/material.dart';

class SignUp extends StatelessWidget {
String username_signup;
String password_signup;

final GlobalKey<FormState> formKey2 = GlobalKey<FormState>();

void signup() {
final formState = formKey2.currentState;

if (formState.validate()) {
formState.save();
database[username_signup] = password_signup;
print(database);
}
else {
formKey2.currentState.reset();
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sign Up")),
body: ListView(
children: [
SizedBox(
height: 25,
),

// LOGO
Center(
child: Container(
child: Image.asset("images/logo.png"),
),
),
]
),
);
}
}
Now let’s add the TextFormField where people can enter their username.
import 'package:flutter/material.dart';

class SignUp extends StatelessWidget {
String username_signup;
String password_signup;

final GlobalKey<FormState> formKey2 = GlobalKey<FormState>();

void signup() {
final formState = formKey2.currentState;

if (formState.validate()) {
formState.save();
database[username_signup] = password_signup;
print(database);
}
else {
formKey2.currentState.reset();
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sign Up")),
body: ListView(
children: [
SizedBox(
height: 25,
),

// LOGO
Center(
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.