Build a Social Media App with FlutterFlow #5 - Like, Comment, and Bookmark

hi my friend and welcome to part number five in this playlist so uh first things first I hope I really hope that you have enjoyed the previous four part if you do don't forget to leave a comment and tell me what you have enjoyed and of course what you didn't like and what you want to see in the future I really check your opinion seriously and in into consideration so I can do things that you personally like right so what we're going to be taking a look at in this video is very simple so we are going to take a look at four things the first thing will be we are going to make some changes in our database so it can match the the features that we want to implement in our app second thing we are going to be taking a look at is uh how we can like a post and the third thing that we are going to be taking a look at is how we can leave a comment on a certain post and finally we will take a look at how we can bookmark a social post and save it for future use so uh let's actually get started but I just want to tell you that uh I'm going to change the structure of uh of this playlist because I want to go uh far uh from what I have been doing uh recently which is making simple apps but for you if you want to build your uh dream app then you need to do something that is complex and this is what I'm going to be doing I'm going to take this to the next level and all this is thanks to my friend vter you will see his email in the description if you want to talk and have a conversation with him so he's a very good guy he told me he told me that he wants a couple of features in the app just like he wanted to be like Facebook in some in in in certain terms so I have taken his opinion into consideration so so to tell you that if you leave a comment or if you send me a message about something that you want so I don't just read it and ignore it I I really take it into into consideration and as a proof you can see all of my videos you can go to the comment section and you will see that I always always reply to comments so don't be shy if you have any question if you need any help if you have any suggestions you can do them for free send me an email or leave a comment or send me a message you can do whatever you like just don't be shy I'm here to help you so please don't be shy and you know uh consider me as your friend and don't be shy I will help you with whatever I can just uh take action and say what you want right so enough talking and let's go but you know before we start you know to you need to just subscribe to this Channel and turn on the Bell icon so you will be notified whenever I post something new so let's stop talking let's get into it so what I do have here is uh just my previous database nothing was changed but now we need to change something things right so first thing the user likes needs to be deleted because uh we want to use it so we want to keep like the same name the same concept but just the type of or the data type needs to be changed so let me just uh delete that and uh so now I want to be document reference a list of do image reference from users so you may say oh I didn't understand why this was so why you have made it from an integer to a list of document references from users so I will tell you that so for example if I like it assertion so you you can you see it all over the social media if you like assertion post you click on that like and uh so it it stays so for example I will just go to YouTube and like a video and you will see what happened so here I am inside of uh coffee a coffee video so uh here I can just click on this like and you see that it will stay so at the beginning it was outlined and now it is filled which means that I I have become so you can imagine that my my reference so my document reference was added to the user likes of this video so I have stayed uh this stayed uh filled right because I am already I have already liked but if I just use an integer which is like in this case the previous case it was just an integer I will be incremented it each time a user likes that post but uh it will not be something like this instead we are going to be using uh a list of document references and we're going to be and this number which is the number of likes will be generated based on how much uh document references we have inside of this l list so it's going to be the number of items you know that and so don't worry don't confuse yourself it may be complex right now but we are going to apply that we are going to take a look at that and you will see that it will be much more easier and much more simple right uh so let's uh keep going so as I told you I will this needs to be uh changed and uh uh and we are going to be making something like just like you user likes but it's going to be bookmarks right so how how many people bookmarked that specific uh post so it's going to be a list right so we're going to keep that there so by the way uh you know that I can now change my camera position because I have used another I I'm using another software for that now for most of you who were really annoyed by my by me being or hiding a part of the screen and working in that specific part now it is gone I hope you like this change I have been looking for this just to give you the best experience I can so uh and if you want something new that I can do in my videos please go to the comment I really take your opinion seriously and for those who have been annoyed with my with the absence of my uh Cur with mouse cursor in the previous video sorry for that I have forgotten now I have fixed that and now you can see even the collect can be seen so anyway uh let's get let's let's keep going so as I told you this is what well these are the two changes that we can make but I promise that in the future we are going to be making more changes as we add new features so uh this is the first part so now go now make the changes before you move on to the next part this video is broken into parts so just pause the video go just make this change is and then come back the video will not fly away now in the second part what we are going to be doing is so now we are going to see how we can like a certain post so uh obviously this has to be on the other side but you know design doesn't matter at this point you can change it in the future if you like so so this is uh so first things first uh before we do anything here so keep in mind that I am inside of the social feed so where we can see all of uh all of this uh the post in that in in uh in that app or at least for those who we are following so this is so let's just make a a very quick change in the design so it is so you can see that the social media is a a container and so you see where how high it how high it is so let's actually fix that by just going to check myself up or just I can put myself here so uh for the social post when I come down uh to the height so it is it is empty which means that it will take the size of its children but you see you see that it is taking this size and this is there is nothing there but the problem is caused by this column it needs to be shrink it a little bit and also you can remove uh whatever how whatever pening we have and keep it like that and now what we need to do is that we want to go to the stack the stack you see this see I will remove this padding and I want to make it so for the height I want to make it infinite and uh you see that this social post goes down let's check it up and now everything is is set up and ready to go so this has to be actually wrapped into a list view because we need to do a back end call you know this has to be show us all the posts uh where it is here they are and later on we can use like uh uh filters or orderings so but for now let's keep it simple so I will just check something out here do we have the date so we want to just create a Time so we want to check when it was created we want to see take a look at that so we can use it in the order in the future so for now we are going to be using it now let's go back to our our uh like U topic right so we want to come here what we want to do so when you click there we want to open the action flow and we want to do something right so for example I clicked on that like which means that uh so keep in mind that uh we have this field please keep this in keep that in mind we have user likes so which is document reference from user so whenever we click on that like we want to become a part of this list and when we click it again we want to check ourself uh out of that specific list right this is what we need to do for this matter we want to just uh uh so it is going be very simple so but we need to do some conditional actions right so the condition what what do you think the condition will be so personally I think that if we are already in that list which is user likes for that particular post if we already belong that to that list which means that we have already like it if that was true then we want to take ourselves out of that list but if we are not yet part of that list which means that we are not we didn't like that post yet then we can be become a part of that list which means that we already we that we have like that post so let's translate that into into into real progress and actions here so want to say if so here so since since that icon is a part of that social post card which means that it is inside of that which is that it is inside this backend code which means that we can have access to it so where I was I was here so uh I will just come back here I would say that if this uh uh list which is uh user likes so if that list uh list contains item so if uh if it contains that specific authentication user who is using the app right so if this was true for example so if it was true I will say that which means that uh so what this condition means is it means that we are already a part of that list which means we have already liked that specific post if that was true then we want to update that list and the update will be to check ourselves out of that because we are it's true we are there so we need to take ourself away from it right so because uh just like this so we are already a part of that I will click again I will go out I'm not part of it then I will be part of it if if I click it again right by the way so go and like this video If You Like It Go and become a part of my user likes you know you know that so uh uh let's go here and what we want to do here is that we want to just to update the document the document will be uh the uh the post itself and the field will be user likes so when I remove from so uh sorry sorry it's it was not there so the reference they are telling me the reference the reference it is the post this one this is what you want to uh update not the field right and this is what you need to choose the post reference so now we know that post now we can just go to that field which was user likes and we want to remove from setet what we want to remove from that s it is our reference because it is already there now let's remove it I can just copy and paste it here but if we are not yet there then instead of removing ourself so as I told you we are not there then we need to become there right we need to add to that set our own reference see just this switch makes things easier for us so uh the last thing we do is to just change the the the the behavior or just the look of this icon because this one you see when we like it becomes filled when we remove our like it become outlined so um for this so when we we so we need to do uh so we we could have used for example we could have used a a toggle icon which is still fine we can just uh come back here so we want to just go to so it is it is fairly complex and so we just want to come here and add a toggle icon we you can you can just keep this one and wrap it in inside of a stack so if you are familiar with toggle icon Let's uh let's just be a little bit crazy and use uh wrap it into a stack so you don't have to do it you can use a toggle icon I will use it for for the bookmarking so I'm just using the two CH the two things so you can have an idea of of how you can you know do different things so we can just duplicate that and so this has to be uh uh uh like it which is that and this is non like it so this needs to be outlined and this so since you are already like it it will be filled so now now I am already like it this is non like it like it and non like it right so for the like it it needs to be so I need to put myself somewhere here so for the like it I can just come here for something so if I like it I just need a heart but it is filled right just like that and this is not like it so we cannot see them both so one should be seen so for example for like it needs to be seen if we already are part of that user likes and the N like it needs to be seen only if we are not part of that so for what we need to do so what do you think so I want to take your opinion so well for me I think I will have to use conditional visibility so for the like it I it needs to be seen only if I am already a part of that user leges so I will say that if uh if this uh user likes again list con change me right if this is true right if this is true then the like needs to be seen because I am already the list contains me right I can just I just I want to copy it and give the opposite uh logic to the other one so the non like it needs to be seen when I am not in that list so I can past it and just switch this value to false right and I can choose whether to show it or not so let's hide this one right so this is a little so I told you so this this process is the stupid one and the hardest one and you know it's not convenient to see so you can you know just use a toggle icon and save yourself sometime but for me I want to just show you new things so you can have an idea and learn new things but you need to use always toggle icon in this situation right so now we actually we have finished the part of likes now let's move on to the the comments and then we can move to bookmarks so for the next part we are going to talk about the the comments and it's going to be very easy so for a comment it only needs one action which is so let's just let me just check out this it is comment on a post so this has to open up or show uh Asser so for example let's just check myself here so it will show uh comment on post uh and it has no parameters so we don't have to pass anything but we need to pass something right so uh by the way sorry this I have forgotten to do that so how we can so we don't need to see four here what we need to see instead of four is the number of items in the user likes so this is the list of all the the people who like that post and now we just want to take their number right the number of it items just show it there it's going to be so it's not convenient to see it like this but you know it is just uh the uh the design but the logic is true is completely functional and you don't have to worry about anything so for this I so it has to show this Dot and when we come there we need to just show here we want to write our comment here but so you will see that we need uh a reference of the post that we are going going to be commenting on so we can add it later on so this has to just you see it has to dismiss so uh just dismiss that thing and here we want to add the comment so first thing this has to be uh your image as an authenticated user so because you will be writing that comment down and you want to put that here just like uh this one here so uh what we need to be adding here is that so we want to come here and click on so now you will see that we need a parameter right so I'm want to create a document so this is a comment we need to create in this collection you see so we need a reference because comments is a sub collection so for each post we have comments now it flat is asking us what post you want to create comment for so we don't know that that's why we are going to be using a parameter called uh just post ID and we're going to pass it so post ID document reference from the posts and since we have a new parameter we need to pass the parameter so we come down here and when we are going to be passing it and here we can choose it so this is the post document ments use the reference not this one this this is the users's reference not not the post reference this is the post reference and if you wonder where we where I have done that it is easy so this was the icon that was responsible for navigation to that post or showing it and since it has parameters I have added I have passed that parameter inside that action so we have already so you can find some videos on my channel just just go to my channel search for document reference or and you will understand what I'm talking about so uh now let's come back and add our comment come here now we can specify that so where where you think we can check it from so it is very simple we can check it from this place from the page parameter right so for each comment we have some Fields let's just put them all here so the user who puted that of course the authentication user and we can close that the text so we only allow text not images but anyway you can be uh adventurous and add images if you like so you want to just uh so for the text it was it was a widget we have a text we have a text field and the likes so it needs to be row we will take a look at how we can like other people's posts and after that we can just dismiss and now there is a problem right so uh as I told you so whenever we go forward forward in this uh project we need to make change in the database so this is good we KN we knew how to add uh a comment for a post but but what about this one so we cannot do it like this one so for the likes we had a field for each post we have we had the user likes we calculate the number of those who uh liked that and we show it there but how we can add a comment so what do you think so well personally I think I will have to use a another field called uh comment amount or just comments and it will be an integer so whenever someone adds a certain comment this will be incremented by one so it is very simple and uh and I will tell you why it was not like this one so what I have use different things for bookmarks likes and a new thing for comments and I will show you an example from YouTube by the way so uh let's just go where we have added the comment here come here uh yes it is here so here we have created a new comment now we can just come or go to that post and update that field which was comments and add one to it how I will show you how it is called update document and this one so when not so that post that we have commented on we want to upd thises we want to confirm the only thing we need to update is just the comments since it is an integer we have this option increment decrement you know stuff like that and the option that you are going to be choosing is incrementing by how much by one which is very simple so and now let's come back to the social feed and add that information here so we don't want to see4 we want to we want to see uh the comments right so go to the comments and uh that is it why I have chosen an uh so you may see that for the Post we have bookmarks and likes they are the same and the comments is not even though they are similar so I will go to YouTube for example here and see now if I like it it will become failed if I didn't like it will be so you know that it will be incremented and now to be decremented and the reason why I have used that that document reference is because of the the look of the icon you see the look of that icon and also the aspect of so if I didn't use that I will I may like this video thousand times but since I only have one reference it will go out and in in that user likes and I will be calculating the number of that user likes and and show it here so this is the way I have used different different things for likes and when it comes to the comment you can add how much comment you like it only takes you one field which is an integer so you can see the number of comments for example I can comment I can put thousand comments on that post which it really doesn't matter but I cannot like it thousand times you know this is the difference it is how much you can like and also the look of the icon so I I can comment uh how much I want here and there is no icon to be changed but this I only have the the right to like it once and that's why I use different things right so I hope you like this but I will try my best to explain it further whenever we go in depth in this uh project so uh uh we have done the comment stuff like what so what do we have so I believe we have we yes we still have to do the book bookmark and stuff right and for that we need another change this time is uh you know for this one and also for uh or let's uh let's keep it simple let's just keep it how it is so now I want so I would like you to so we are now going to move on to the next step by the way please whenever I move from a step to another to a part to another or from a part to another one uh I have already I break my videos into parts please stop the video and go and try it so uh my goal is not just to win views and likes because I don't plan to make money from YouTube uh and that's why I want to just don't I don't want you to just view my videos over and over again it doesn't really matter for me personally what matters for me is that you will pause the video between parts and go try it please if you do this you will learn faster and you might not need me in the future because if you try you will learn yourself so it does matter for me to just waste your time on my videos what matters for me is that you will go learn please a new skill and use that to go out to the world solve problems make yourself a profit and also add a value to the life of people and if you want to do that you need to apply please for personally I learned through through through trial I didn't learn to just watch videos I want you to be just like me in this point and you can differentiate yourself from me uh in other points but when it comes to this one please try because this is the best way to learn so I'm giving you the basics go and learn try yourself to check yourselves and your skills sorry to the next level so anyway let's move on to the next step so here we are in the last uh step and by by the way if you like this video don't forget to give it a thumbs up it means a lot to me and it helps this video reach more people so if you do enjoy it don't forget to click on that like icon right so now as I told you we I will be using a different Logic for uh for the or just different design for this one so I in instead of using it like like that uh I will use uh a toggle icon just to show you the difference and you can choose whichever you like so for the that toggle icon so for each tole icon we have uh two uh choices the on and the off right for the on we need a bookmark but we want it to be filled right and you can see it we need it again but this time it need so you know it needs to be outline just like that and the color needs to stay or remain the same right you can choose whichever color you like as I told you I really don't care about the design in all of my videos and they will not care about it because it is easy I only care about you know the logic so uh the action will be so on toggle so it will be the same logic I will do it again for more clarifications again so I'm going to say if this time I will use another uh field which is bookmarks if that l contains uh the authenticated user if it contains the authenticated user confirm if that was true then it needs to be so it will go out right we need to update that post and check ourselves from that field right the post it is uh the post uh reference and only change one field which is book marks so we are there we need to be we need to get out of there right we want to remove from set and we want to come here no we need to remove ourselves our reference from there and on the other side just copy it paste it here and just do the other so switch it so you see it is the same logic but for the toggle icon it makes it easier for you to avoid stack two icons with each one Within action but this one you only use one uh icon right and we need to have to so you see here we need to tole iqu its value so on and off so where so when it is going to be on and when it's going to be off so when it will check this shape and when it it will check this shape so so when it will be on so what's going to happen is so it's very simple so if if we are there if no sorry if we have bookmark that then it it will take this it will be on if we didn't bookmark that it will be off right I would say that it will depend on whether this list contains our reference or not if it contains it then it is true it will be taken this shape which means that we have already bookmarked it and vice vers vice versa so we want list contains item the item will be our reference confirm confirm and congratulations the video is over so we have done the four parts so by the way congratulations for just uh following along with me most people don't follow these long videos usually but thank you so much I like so I have I have had a very very good time uh you know talking with you and building this app with you you have no idea how happy I am when I work with such beautiful people people like you so if you do enjoy this video it only take you a few seconds to just click on that like icon and also uh share this with this video with your friends and uh and family and with whoever you can so we can uh grow this community so now we are already 765 people as I guess so we are close to thousands so let's work together and grow this uh community so we can have more people here enjoying these videos and learn from them so we can go out all of us we can go out to the world find problems and help people solve their problems with an app that may that will bring huge value to the world and also make us a profit so you can make a living from that so thank you so much and by the way I will be soon launching uh a stack so it's not a stack it is slack sorry I always confuse them I will be launching a slack Community we are going to be talk talking talking about the problems we face in flut flow what are the ideas that we are working on and what what problems people face that we can fix and also we can find like-minded people with whom we can work and re build app together so I think I will be launching this community on uh in the 14th of January 2024 which is this month and this year of course so make sure you are stay tuned and you will be the first one to rush into that uh community so we can really build a huge community of not just app developers but people who are who are ambitious and wants to solve problems and really uh not just focus on the money because it's not my focus my focus was always in this channel to provide value to you to give you uh the real information that you need because it is rare on the internet and the money will become as will come as the result of you working hard developing a certain solution for a certain problem and that is it so I really hope that you have liked this video if you find it enjoyful again like it and share it with your friends and if you appreciate my efforts you can I really I on on from my side I really appreciate you support my work on coffee you'll find the link in the description you can either uh donate something to me as to support me to keep going or you can become a part of my my plan so uh at at this time I don't really do things for that plan but you can donate something to me you can find it there I really appreciate your your your support and thank you so much for watching and catch you on the video that you will be appearing in on the screen right now next video will be appear on the screen if it's not here subscribe to on the B icon so you'll be notified when it is post so bye-bye

Channel: Learn No-Code

Views: 1,262

Keywords: nocode, FlutterFlow, apps

Id: iumiU5WH870

Length: 35min 52sec (2152 seconds)

Published: Thu Jan 11 2024