NoCode Chat App with FlutterFlow and Supabase (Part 7)

[Music] welcome friends to the seventh part of this series to create a chat app and flut flow in the previous video we finished setting up our edit profile page and in this video we'll be going into setting up the UI for our chat homepage over here so let's quickly hop over to our flutter flow dashboard over here with the homepage selected let's change the app bar style let's just choose this one we'll change the title to chats and we also want to change the color text color to primary text and we also want to Center this title over here let's also add this plus button for us to add texts so with the text selected we'll right click on it and we'll wrap the text budget inside of a row and now let's just add another widget which will be an icon and this icon will be a plus icon let's just choose this one for the icon color we can just choose primary and if the text we selected under expansion we can we can just click on expanded and that pushes this plus icon all the way to the right and for the text we can just add some padding of perhaps 200 or that's a bit too much let's just add a padding of 260 now let's work on these list tiles over here in this list view so if the column selected just let's just delete this sign up button for now since we no longer need that and firstly let's wrap the column inside a container and for the container with property we'll just set this as infinite and inside the column we will add a list View inside the list view let's just add another container and inside the container we want to add a row inside the row we'll add a circle [Music] image and inside the row let's just add a column and this column will contain the person or group name text over here as well as the last message text over here so inside the column let's just add two text widgets and lastly in the r let's just add one more column and inside this column will be the timestamp text so right now the list T is looking pretty ugly so let's format it to look much better for the circle image let's just change the diameter to [Music] 60 for the group name or person name text over here we'll change the font size to 16 and we'll change the font width to semi bold for this last message text we also change the font size to 16 and for this timestamp text we'll also change the text size to 16 but for the text color let's choose the secondary text color with the list view selected let's add some side padding of 16 on both the left and right side and let's also add some top padding of 16 now with the row selected let's add some padding all around and we'll give it a padding of eight from all around the container with the circle image selected Al so let's add some right padding of eight and with this column selected over here we want to expand the column so that it pushes this text over to the right and we also add some right padding of form and when we scroll down we also change the cross axis alignment to left or to St and with this column selected we'll change the main AIS alignment to end and for this column let's also add some item spacing of four and a main axis alignment of Center to make it look better let's also decrease perhaps the row padding since we don't need so much space so let's decrease the padding to four and I think that I would like to have this Tim stamp Tex a bit smaller so instead of a font size of 16 let's change it back to a font size of 14 and let's also change the FI color of the container perhaps to this alternate color yep now it looks better okay so that is our list to container done now let's work on the bottom nav bar so we can click on this option over here and show this nav show this page on the nav bar it looks like we need to have at least two Pages for the nav bar so for our profile page over here we also want to show our profile page on the nav bar and for the profile page icon we'll change this icon let's just search for profile and let's just choose this person over here we can go back to our homepage and we can change the nav bar icon to perhaps a message perhaps this one over here or this one [Music] message and if you want to switch the positions of this icons over here what you can do is that you can go under nav bar and app bar for the nav bar you can reorder the pages so I can switch the profile page is now on the left over here all right so that's it for today's video thank thank you very much for watching in the next video of this series we'll be dealing with super base and we'll be seeing how we can Implement our database tables in super base so stay tuned for the next video thank you and [Music] goodbye

Channel: just xolotl

Views: 174

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: 3kYGPksyKXI

Length: 7min 59sec (479 seconds)

Published: Wed Apr 24 2024