Flutterflow Basic Edit Profile Page | #flutterflow #nocode

today we will build a edit profile page users  will want to change their info with time and   we must provide this to our users we need to  structure our Firebase data first what kind   of information will we need we should  ask this and decide our requirements   in this video I will talk about full name username  birthday and profile picture and email addresses   I want to start with profile picture it depends  on your team but generally it's the same   you can just focus to understand what I am doing  now we want to show our users current picture   if you want you can only put a button for  uploading picture and don't show them their   profile picture but it can't be so nice for good  looking so we need stack first there will be two   things image and button when user want to upload  a picture user will click button and bottom sheet   will appear let's create a component for this  we will ask our users upload photo and confirm   uploading first of all we will put their current  profile picture and after that current photo   replace with upload this photo we will use stuck  again and put two images on same place we will   choose one of them for current profile picture  and other one will be for uploaded profile picture   before set them we should set uploaded image  button we will click button and choose action   we will add action and find upload media to  Firebase upload type will be Firebase and   choose allow image you can customize this option  how you will need okay now time to set save change   we will go to actions and click file store and  update document we will find authenticated user   reference for updating and choose profile  picture data now we will click volume search   and choose uploaded photo videos okay we  finished our action now time to set photos   well first image will be set from authenticate  user profile picture second photo is our uploaded   photo so we will set from widget State upload a  file URL that's it we finished our component we   should define actions on our button we will  choose bottom sheet and click our component now time to change other information changing  email full name username will be same because   they are string we will use a text file for  this this text file will show our user current   information but when they click on it it will  show what they've wrote on text field we will   only fill textfield properties on text file other  properties will be black choose authenticate user   username that's it you will  apply this to other informations   now we will set per day we will show up there  to text one is current birthday info other will   be changed birthday text we will take info from  database we will choose authenticate user birthday   birthday is a Time Stamp(Date Time) so we need to choose  Time Stamp(Date Time) format and you can decide about how you   want to data type now we will define an action  for this first text click add action and find   data time picker type will be date and default  date will be Global properties current time   this will show user a picker and choose the  date time to set second text we will set from   widget state picker available option will be  times now there will be two text and it will   make a confusion so we how we will solve this  well we will use conditional visibility we will   click conditions single condition first  value will be widget state date picker   available option will be no further change you  will replace a coil with is not set and confirm   we will do same things for second text just  change it it is set I am showing it now that's it if user change per day first text  will disappear and second text will appear now time to update all documents you can use for  this app button or icon button this is on your   hands we will just define an action for updating  click add action and find update document you will   choose authenticate user reference now choose all  our documents and Define them like I am doing now and everything is ready. Let's  test it now okay we can start with username   let's change it as batsy full name Betsy error  email will be stay same and let's change this for example okay let's change picture okay save change and Save look and that's it   I talked about editing profiles today if you have  any question please don't hesitate and comment   below I will continue to upload videos about  Flutterflow once a week and please subscribe   the channel for new videos if you click to like  button you will help me to reach more people

Channel: Theebatt NoCode

Views: 9,118

Keywords: flutterflow, nocode, mobileapp

Id: _Sp3Jlo2Cy8

Length: 7min 40sec (460 seconds)

Published: Thu Mar 16 2023