User Registration

15min
User Registration for Flutter using Parse Server
Introduction
At the core of many apps, user accounts have a notion that lets users securely access their information. Parse provides a specialized User class that automatically handles much of the functionality required for user account management. With this class, you’ll be able to add user account functionality to your app.
﻿ParseUser is a subclass of the ParseObject, and has the same features. All the methods that are on ParseObject also exist in ParseUser. The difference is that ParseUser has some special additions specific to user accounts. ParseUser has several properties that set it apart from ParseObject:
username: The username for the user (required).
password: The password for the user (required on signup).
email: The email address for the user (optional).
You are free to use an email address as the username. Ask your users to enter their email, but fill it in the username property — ParseUser will work as normal.
In this guide, you will learn how to use the Flutter plugin for Parse Server to manage users using ParseUser class creating a user registration feature for your Flutter App.
﻿
Goal
To build a User Registration feature using Parse for a Flutter App.
Prerequisites
To complete this tutorial, you will need:
﻿Flutter version 2.2.x or later﻿
﻿Android Studio or VS Code installed (with Plugins Dart and Flutter)
An app created on Back4App:
Note: Follow the New Parse App Tutorial to learn how to create a Parse App on Back4App.
An Flutter app connected to Back4app.
Note: Follow the Install Parse SDK on Flutter project to create an Flutter Project connected to Back4App.
A device (or virtual device) running Android or iOS.
Understanding the SignUp App
To better understand the SignUp process, we will create an app to register user data and create your account. We won’t explain the Flutter application code once this guide’s primary focus is using the Flutter with Parse. Following the next steps, you will build a Todo App that will store the tasks at Back4App Database.
Let’s get started!
Following the next steps you will be able to build a Sign App that will create user Account in Back4App Database.
- Create Sign App Template
Open your Flutter project from the previous guide Flutter plugin for Parse Server. Go to the main.dart file, clean up all the code, and replace it with:
Dart
 import 'package:flutter/material.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
3
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
6
   final keyApplicationId = 'YOUR_APP_ID_HERE';
   final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
   final keyParseServerUrl = 'https://parseapi.back4app.com';
10
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

  runApp(MyApp());
}
16
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SignUp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final controllerUsername = TextEditingController();
  final controllerPassword = TextEditingController();
  final controllerEmail = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter SignUp'),
        ),
        body: Center(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  height: 200,
                  child: Image.network(
                      'http://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
                ),
                Center(
                  child: const Text('Flutter on Back4App',
                      style:
                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                ),
                SizedBox(
                  height: 16,
                ),
                Center(
                  child: const Text('User registration',
                     style: TextStyle(fontSize: 16)),
                ),
                SizedBox(
                  height: 16,
                ),
                TextField(
                  controller: controllerUsername,
                  keyboardType: TextInputType.text,
                  textCapitalization: TextCapitalization.none,
                  autocorrect: false,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.black)),
                      labelText: 'Username'),
                ),
                SizedBox(
                  height: 8,
                ),
                TextField(
                  controller: controllerEmail,
                  keyboardType: TextInputType.emailAddress,
                  textCapitalization: TextCapitalization.none,
                  autocorrect: false,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.black)),
                      labelText: 'E-mail'),
                ),
                SizedBox(
                  height: 8,
                ),
                TextField(
                 controller: controllerPassword,
                 obscureText: true,
                 keyboardType: TextInputType.text,
                 textCapitalization: TextCapitalization.none,
                 autocorrect: false,
                 decoration: InputDecoration(
                     border: OutlineInputBorder(
                         borderSide: BorderSide(color: Colors.black)),
                     labelText: 'Password'),
               ),
               SizedBox(
                 height: 8,
               ),
               Container(
                 height: 50,
                 child: TextButton(
                   child: const Text('Sign Up'),
                   onPressed: () => doUserRegistration(),
                 ),
               )
             ],
           ),
         ),
       ));
 }

 void showSuccess() {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Success!"),
         content: const Text("User was successfully created!"),
         actions: <Widget>[
           new FlatButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
             },
           ),
         ],
       );
     },
   );
 }

 void showError(String errorMessage) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Error!"),
         content: Text(errorMessage),
         actions: <Widget>[
           new FlatButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
             },
           ),
         ],
       );
     },
   );
 }

 void doUserRegistration() async {
	//Sigup code here
 }
}
170
 import 'package:flutter/material.dart';
 import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
3
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
6
   final keyApplicationId = 'YOUR_APP_ID_HERE';
   final keyClientKey = 'YOUR_CLIENT_KEY_HERE';
   final keyParseServerUrl = 'https://parseapi.back4app.com';
10
  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, debug: true);

  runApp(MyApp());
}
16
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SignUp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final controllerUsername = TextEditingController();
  final controllerPassword = TextEditingController();
  final controllerEmail = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Flutter SignUp'),
        ),
        body: Center(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(8),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  height: 200,
                  child: Image.network(
                      'http://blog.back4app.com/wp-content/uploads/2017/11/logo-b4a-1-768x175-1.png'),
                ),
                Center(
                  child: const Text('Flutter on Back4App',
                      style:
                          TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
                ),
                SizedBox(
                  height: 16,
                ),
                Center(
                  child: const Text('User registration',
                     style: TextStyle(fontSize: 16)),
                ),
                SizedBox(
                  height: 16,
                ),
                TextField(
                  controller: controllerUsername,
                  keyboardType: TextInputType.text,
                  textCapitalization: TextCapitalization.none,
                  autocorrect: false,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.black)),
                      labelText: 'Username'),
                ),
                SizedBox(
                  height: 8,
                ),
                TextField(
                  controller: controllerEmail,
                  keyboardType: TextInputType.emailAddress,
                  textCapitalization: TextCapitalization.none,
                  autocorrect: false,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderSide: BorderSide(color: Colors.black)),
                      labelText: 'E-mail'),
                ),
                SizedBox(
                  height: 8,
                ),
                TextField(
                 controller: controllerPassword,
                 obscureText: true,
                 keyboardType: TextInputType.text,
                 textCapitalization: TextCapitalization.none,
                 autocorrect: false,
                 decoration: InputDecoration(
                     border: OutlineInputBorder(
                         borderSide: BorderSide(color: Colors.black)),
                     labelText: 'Password'),
               ),
               SizedBox(
                 height: 8,
               ),
               Container(
                 height: 50,
                 child: TextButton(
                   child: const Text('Sign Up'),
                   onPressed: () => doUserRegistration(),
                 ),
               )
             ],
           ),
         ),
       ));
 }

 void showSuccess() {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Success!"),
         content: const Text("User was successfully created!"),
         actions: <Widget>[
           new FlatButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
             },
           ),
         ],
       );
     },
   );
 }

 void showError(String errorMessage) {
   showDialog(
     context: context,
     builder: (BuildContext context) {
       return AlertDialog(
         title: const Text("Error!"),
         content: Text(errorMessage),
         actions: <Widget>[
           new FlatButton(
             child: const Text("OK"),
             onPressed: () {
               Navigator.of(context).pop();
             },
           ),
         ],
       );
     },
   );
 }

 void doUserRegistration() async {
	//Sigup code here
 }
}
170
﻿
When debug parameter in function Parse().initialize is true, allows displaying Parse API calls on the console. This configuration can assist in debugging the code. It is advisable to disable debug in the release version.
- Connect Template to Back4app Project
Find your Application Id and Client Key credentials navigating to your app Dashboard at Back4App Website.
Update your code in main.dart with the values of your project’s ApplicationId and ClientKey in Back4app.
keyApplicationId = App Id
keyClientKey = Client Key
Run the project, and the app will load as shown in the image.
﻿
- Code for Sign User
The User SignUp function creates a new user in your Parse App. Before that, it checks to make sure that both the username and email are unique. If a SignUp isn’t successful, you should check the error object that is returned. The most likely cause is that another user has already taken the username or email. You should communicate this to your users and ask them to try a different username.
Search for the function doUserRegistration in the file main.dart. Replace the code inside doUserRegistration with:
Dart
     final username = controllerUsername.text.trim();
     final email = controllerEmail.text.trim();
     final password = controllerPassword.text.trim();
4
     final user = ParseUser.createUser(username, password, email);
 
     var response = await user.signUp();
8
     if (response.success) {
      showSuccess();
    } else {
      showError(response.error!.message);
    }
     final username = controllerUsername.text.trim();
     final email = controllerEmail.text.trim();
     final password = controllerPassword.text.trim();
4
     final user = ParseUser.createUser(username, password, email);
 
     var response = await user.signUp();
8
     if (response.success) {
      showSuccess();
    } else {
      showError(response.error!.message);
    }
﻿
To build this function, follow these steps:
Make a new instance of the ParseUser class with the command ParseUser.createUser(username, password, email), with data that were filled in the app.
Call the signUpfunction, which will register user to your database in the Parse Dashboard.
Check if user signup with success. If not success, show error description message.
The complete code should look like this:
Dart
   void doUserRegistration() async {
     final username = controllerUsername.text.trim();
     final email = controllerEmail.text.trim();
     final password = controllerPassword.text.trim();
 
     final user = ParseUser.createUser(username, password, email);
7
     var response = await user.signUp();
9
    if (response.success) {
      showSuccess();
    } else {
      showError(response.error!.message);
    }
  }
   void doUserRegistration() async {
     final username = controllerUsername.text.trim();
     final email = controllerEmail.text.trim();
     final password = controllerPassword.text.trim();
 
     final user = ParseUser.createUser(username, password, email);
7
     var response = await user.signUp();
9
    if (response.success) {
      showSuccess();
    } else {
      showError(response.error!.message);
    }
  }
﻿
To test it, click on the Run button in Android Studio/VSCode.
﻿
After providing the desired user credentials, you will see this message after pressing on Sign Up if everything was successful:
﻿
Error handling can be tested if you try to register a user with the same username as before:
﻿
You will get another error if you try to sign up with no password:
﻿
- Check User Registration on Dashboard
Login at Back4App Website﻿
Find your app and click on Dashboard>Core>Browser>User.
At this point, you should see your user as displayed below:
﻿
It’s done!
At the end of this guide, you learned how to register new Parse users on Flutter. In the next guide, we will show you how to log in and out users.
Updated 04 Jun 2024
Did this page help you?
Geoqueries
User Login
User Registration

User Registration for Flutter using Parse Server

Introduction

Goal

Prerequisites

Understanding the SignUp App

Let’s get started!

1 - Create Sign App Template

2 - Connect Template to Back4app Project

3 - Code for Sign User

4 - Check User Registration on Dashboard

It’s done!
