Skip to content
Flutter
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(
child: Container(
child: Image.asset("images/logo.png"),
Form(
// This is the key used to validate the forms input
key: formKey,
child: Column(
children: <Widget>[
// USERNAME //
TextFormField(
// This is to define the border and to label the text
decoration: InputDecoration(
labelText: "Username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)
)
),
// Checks the user input to see if it is valid
validator: (input) {
if (input.isEmpty) {
return "Please enter a username";
}
return null;
},
// If the validator passed, then save the information
onSaved: (input) => username_signup = input,
),
]
),
),
),
]
),
);
}
}
And now we have to add the TextFormField for the password as well. Everything will be the same except switching out username with password, and we will add this obscureText = true, so you can’t see teh text you enter.
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"),
Form(
// This is the key used to validate the forms input
key: formKey,
child: Column(
children: <Widget>[
// USERNAME //
TextFormField(
// This is to define the border and to label the text
decoration: InputDecoration(
labelText: "Enter a username",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)
)
),
// Checks the user input to see if it is valid
validator: (input) {
if (input.isEmpty) {
return "Please enter a username";
}
return null;
},
// If the validator passed, then save the information
onSaved: (input) => username_signup = input,
),
SizedBox(
height: 10,
),
// PASSWORD //
TextFormField(
// This is to define the border and to label the text
decoration: InputDecoration(
labelText: "Enter a password",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0)
)
),
// Checks the user input to see if it is valid
validator: (input) {
if (input.isEmpty) {
return "Please enter a password";
}
return null;
},
obscureText: true,
// If the validator passed, then save the information
onSaved: (input) => password_signup = input,
),
]
),
),
),
]
),
);
}
}
And finally the last thing you have to add is the Raised button and all you have to do for onPressed is put in signup.
import 'package:flutter/material.dart';
class SignUp extends StatelessWidget {
String username_signup;
String password_signup;
final GlobalKey<FormState> formKey2 = GlobalKey<FormState>();
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.