User Registration

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 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 parseuser is a subclass of the parseobject parseobject , and has the same features all the methods that are on parseobject also exist in parseuser the difference is that parseuser parseuser has some special additions specific to user accounts parseuser 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 email address as the username username ask your users to enter their email email , but fill it in the username 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 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 https //flutter dev/docs/get started/install https //developer android com/studio or https //code visualstudio com/ (with https //docs flutter dev/get started/editor dart and flutter) an app https //www back4app com/docs/get started/new parse app on back4app note follow the https //www back4app com/docs/get started/new parse app to learn how to create a parse app on back4app an flutter app connected to back4app note follow the https //www back4app com/docs/flutter/parse sdk/parse flutter sdk 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 1 create sign app template open your flutter project from the previous guide flutter plugin for parse server go to the main dart main dart file, clean up all the code, and replace it with 1 import 'package\ flutter/material dart'; 2 import 'package\ parse server sdk flutter/parse server sdk dart'; 3 4 void main() async { 5 widgetsflutterbinding ensureinitialized(); 6 7 final keyapplicationid = 'your app id here'; 8 final keyclientkey = 'your client key here'; 9 final keyparseserverurl = 'https //parseapi back4app com'; 10 11 await parse() initialize(keyapplicationid, keyparseserverurl, 12 clientkey keyclientkey, debug true); 13 14 runapp(myapp()); 15 } 16 17 class myapp extends statelesswidget { 18 @override 19 widget build(buildcontext context) { 20 return materialapp( 21 title 'flutter signup', 22 theme themedata( 23 primaryswatch colors blue, 24 visualdensity visualdensity adaptiveplatformdensity, 25 ), 26 home homepage(), 27 ); 28 } 29 } 30 31 class homepage extends statefulwidget { 32 @override 33 homepagestate createstate() => homepagestate(); 34 } 35 36 class homepagestate extends state\<homepage> { 37 final controllerusername = texteditingcontroller(); 38 final controllerpassword = texteditingcontroller(); 39 final controlleremail = texteditingcontroller(); 40 41 @override 42 widget build(buildcontext context) { 43 return scaffold( 44 appbar appbar( 45 title const text('flutter signup'), 46 ), 47 body center( 48 child singlechildscrollview( 49 padding const edgeinsets all(8), 50 child column( 51 crossaxisalignment crossaxisalignment stretch, 52 children \[ 53 container( 54 height 200, 55 child image network( 56 'http //blog back4app com/wp content/uploads/2017/11/logo b4a 1 768x175 1 png'), 57 ), 58 center( 59 child const text('flutter on back4app', 60 style 61 textstyle(fontsize 18, fontweight fontweight bold)), 62 ), 63 sizedbox( 64 height 16, 65 ), 66 center( 67 child const text('user registration', 68 style textstyle(fontsize 16)), 69 ), 70 sizedbox( 71 height 16, 72 ), 73 textfield( 74 controller controllerusername, 75 keyboardtype textinputtype text, 76 textcapitalization textcapitalization none, 77 autocorrect false, 78 decoration inputdecoration( 79 border outlineinputborder( 80 borderside borderside(color colors black)), 81 labeltext 'username'), 82 ), 83 sizedbox( 84 height 8, 85 ), 86 textfield( 87 controller controlleremail, 88 keyboardtype textinputtype emailaddress, 89 textcapitalization textcapitalization none, 90 autocorrect false, 91 decoration inputdecoration( 92 border outlineinputborder( 93 borderside borderside(color colors black)), 94 labeltext 'e mail'), 95 ), 96 sizedbox( 97 height 8, 98 ), 99 textfield( 100 controller controllerpassword, 101 obscuretext true, 102 keyboardtype textinputtype text, 103 textcapitalization textcapitalization none, 104 autocorrect false, 105 decoration inputdecoration( 106 border outlineinputborder( 107 borderside borderside(color colors black)), 108 labeltext 'password'), 109 ), 110 sizedbox( 111 height 8, 112 ), 113 container( 114 height 50, 115 child textbutton( 116 child const text('sign up'), 117 onpressed () => douserregistration(), 118 ), 119 ) 120 ], 121 ), 122 ), 123 )); 124 } 125 126 void showsuccess() { 127 showdialog( 128 context context, 129 builder (buildcontext context) { 130 return alertdialog( 131 title const text("success!"), 132 content const text("user was successfully created!"), 133 actions \<widget>\[ 134 new flatbutton( 135 child const text("ok"), 136 onpressed () { 137 navigator of(context) pop(); 138 }, 139 ), 140 ], 141 ); 142 }, 143 ); 144 } 145 146 void showerror(string errormessage) { 147 showdialog( 148 context context, 149 builder (buildcontext context) { 150 return alertdialog( 151 title const text("error!"), 152 content text(errormessage), 153 actions \<widget>\[ 154 new flatbutton( 155 child const text("ok"), 156 onpressed () { 157 navigator of(context) pop(); 158 }, 159 ), 160 ], 161 ); 162 }, 163 ); 164 } 165 166 void douserregistration() async { 167 //sigup code here 168 } 169 } 170 when debug debug parameter in function parse() initialize parse() initialize is true 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 2 connect template to back4app project find your application id and client key credentials navigating to your app dashboard at https //www back4app com/ update your code in main dart 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 3 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 douserregistration in the file main dart main dart replace the code inside douserregistration douserregistration with 1 final username = controllerusername text trim(); 2 final email = controlleremail text trim(); 3 final password = controllerpassword text trim(); 4 5 final user = parseuser createuser(username, password, email); 6 7 var response = await user signup(); 8 9 if (response success) { 10 showsuccess(); 11 } else { 12 showerror(response error! message); 13 } to build this function, follow these steps make a new instance of the parseuser parseuser class with the command parseuser createuser(username, password, email) parseuser createuser(username, password, email) , with data that were filled in the app call the signup signup function, 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 1 void douserregistration() async { 2 final username = controllerusername text trim(); 3 final email = controlleremail text trim(); 4 final password = controllerpassword text trim(); 5 6 final user = parseuser createuser(username, password, email); 7 8 var response = await user signup(); 9 10 if (response success) { 11 showsuccess(); 12 } else { 13 showerror(response error! message); 14 } 15 } to test it, click on the run 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 4 check user registration on dashboard login at https //www back4app com/ find your app and click on dashboard dashboard > core core > browser browser > user 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