NoCode Chat App with FlutterFlow and Supabase (Part 1)

[Music] welcome friends to the first part of this tutorial where we will be making our chat app in flf flow and using a super based database so in this video we'll be mainly dealing with the authentication part of the app so we'll be making this login screen over here as well as this register screen over here so let's go into our flut flow dashboard and let's create a new project over here so we'll just give the name chat app tutorial and then we can just create a blank app so we can just toggle this setup Firebase to be false and we can start building the app all right so now we have a blank app over here you can go to the widget tree and under the pages we can just right click on the page folder to create a new page and we'll just create a blank page first so this will be our login page so let's take a look at our UI again for our login page so this is how we want our login page look like so it's a slightly gray background there's this circular icon over here there's a main text a subtext as well as two text fields to enter the email as well as the password then there's a signin button for the user to sign in and finally a text over here to navigate to the register page if they already if if they do not have an account yet so let's create that in our flut Flow app so firstly let's just right click on the app bar to remove the app bar since we don't need that and with the login page selected let's just change our primary let's just change our background color to more of a gray color so we me this the alternate color and let's also right click on our column and let's wrap our column widget inside a container and on the right hand side of the container let's just set the width to infinite so that the column is now centered in the screen and inside the column let's just add our items our children widgets let's just add a circle image and then now we want to add a title text and a subtext so in the same column we just add two text and for the title text we will scroll down on the right hand side over here and we'll change the theme text St to let's say title Lodge and we'll change the text field to welcome come back and for the subtext we'll change the text value to let's get you back in the game so just copy and paste this over here now we need the two text fields for the email text field as well as the password text field so we just add them into the [Music] column and we can right click on the first text field to duplicate it to add another text field and now we need the sign in button so in the column just search for a button widget and it's under here already the commonly used widget and lastly we want this text over here to log in I mean to re to navigate to our register page so as you can see this text over here has two Styles it has one style over here in the black text and then it has a bolded blue text over here so when we have a text that has two Styles what we we want to use is the rich text widget so we can just search for Rich text and we can add it over here so let's change the button text first so click on the button and scroll down to button text you want to change this to sign in and for the rich text you want to change text pan one to don't have an account sign in and for Tex p 2 we want it to be here and we want to flip the styles of these two Tex Bans so I can just click on this to change the style of text pan one we don't want it to be bold we want it to be normal and the text color will be the primary text color which is black we can go back to our Rich text and for text P to oops and for text B 2 we'll click on this to change the style for the font weight I want it to be bold and for the text color I want it to be primary now let's just add some padding inside our column itself so inside the column we want some left padding of 24 right padding of 24 as well let's just add some top padding of 48 and we can scroll down and I want some item spacing of 24 so now all the elements are space out much nicely now let's get to our text field so since all of our text Fields will look the same they all have a similar styling instead of manually styling each of the text Fields themselves what we can do is that we can add a theme style widget or a theme widget so on the left hand side we can click on this theme settings and then we can go to theme widgets and we can click this is to create a new theme widget you can give the theme widget a name let's just give it my text field as the name and for the widget itself we have to look for the text field which is over here so we can click on the text field and then we can click on create so for our text field we want it to have some rounded borders over here and it will be a white fi col color so on the right hand side we can scroll down for the label text we can just give it a default label text of enter your email first for now you can continue scrolling down and for the input B type we want to make it outline and we have to toggle this field to be true to to be able to fill so that the background of the text view is not transparent and for the fill color we want to set it as the secondary background or white so now you can see that the text field is white in color for the Border color we don't want any border color so we can click on the border color and we can click on this button right over here custom color and then we can just click on clear color so now we have no border and I a I want the Tex field to be more rounded so under border radius let's just give it a border radius of 16 all right now it looks much better so we can just save this and as you can see our theme widget my text field has been saved over here so we can go back to our widget tree and under the text field we can see that there's this option for widget styling so we can just click on this to theme our style to set a theme to our text field and we can just click on the my text field that we just created so as you can see it has changed the style over here let's just scroll down to change the label text and for this label text you want it to be enter your email you can do the same thing for the password textt vield so click on the password text vield and under widget stying choose the my text vield one you also have to change the label text so this one will be enter your password and one thing to note for the password text field we have to scroll down scroll all the way down and under additional properties we have to toggle this password field to be true and note that this is important for password text Fields since this allows your super base and flutter flow to identify this text field as a password field and allows it to be set in later action all right so that's basically it for the UI of our login page so as you can see the register page over here is very similar to the UI of our login page it just has some different text over here a different Tech button text over here different text over here and one extra field for the confirm password field we can just right click on our login page and we can duplicate the login page so we can rename this page to register page and let's just duplicate our password text VI so for this duplicated password text field we will change the label text Tex to confirm your password and while we're add it let's just change the names of our text field so that it's easier to identify them in the future so this will be the email password email text field this text field over here will be the password text field and lastly this one will be the confirm password text View so labeling your widgets especially your text Fields will be very beneficial to identifying them later when we set the actions so let's just change this text to welcome and for this text let's see let's change it to this one so for this text let's just copy and paste this and this doesn't look that good yet so under the text align let's just align it to the center so that it looks better and for the text we'll just change it to welcome onboard instead since that is what we planned in our figma dashboard over here so for this sign in button we want to change the button text to register and for this Rich text instead of don't have an account we want to change it to already have an account and instead of sign in we want to change it to oh sign in is correct actually that means we have to change the login page one so instead of sign in is sign up all right awesome so that is the basic UI of our register page as well as our login page done all right so that's it for this video this in this video we managed to create the UI for both the login as well as the register page in our chat app so in the next video we'll be adding the actual login functionality and authentication functionality together with our superbase project and we can see how we can integrate super base seamlessly with our flutter flow project so stay tuned for the next video see you in the next [Music] video

Channel: just xolotl

Views: 984

Keywords: chat app using flutterflow, flutterflow, flutterflow tutorial, no code, app development, nocode, chat, flutterflow chat app, supabase tutorial, supabase, supabase flutterflow, flutterflow supabase chat app, flutterflow tutorial for beginners, learn flutterflow, nocode tutorial for beginners, mobile app development, no code app, supabase database, The Ultimate Guide To Building a Chat App with FlutterFlow and Supabase, just_xolotl, supabase authentication, supabase auth

Id: PHjRnyjUnJA

Length: 13min 54sec (834 seconds)

Published: Sun Apr 07 2024