FlutterFlow Builder Deep Dive: How To Navigate & Use FlutterFlow

in this video i want to give you an overview of flutter flow so after you sign up you will be here on this screen and you won't have any other projects if this is your first project so obviously you just click create project and here you've got your first option so obviously you give it a name and let's just make like a basketball app and the two options you have are either to start with a template or just create your own blank one now the great thing about these templates is when you hover over them you can see what they come with so you can see not only what the sort of theme is right and you can get an idea of like oh is this the kind of app that i'm making right but you can also see all the specific features so on the sniff social one we have 19 screens we have firebase that's like our database we have push notifications you have all of these things and so you can uh not only see like is this the kind of app but get more particular and more granular into the type of things that you want but we're not going to start with a sample right here we're just going to start out with a blank app right here okay so next we've got this welcome screen we've got our project name our package name you don't want to do anything with that unless you want to change your project name but you just declared it so you probably don't and then we're given the option to set up firebase now firebase gives us the option to have a database to do some other things like authentication so if we want users and you could set that up now we're not going to do this right now we've got another video if you want to set that up we can go through that but we're just going to click that off and go start building okay so here we are the interface i know it might look complex but it's not we'll walk through every part of this okay the first and most important thing is our ui builder that's over here that's the first thing that you see and it's the most important because these are all of the things what we call widgets that your app will be made out of these are just widgets and what's a widget well a widget is just any kind of thing it's an encapsulated thing that you use to build your app so text is a widget containers and other layout elements are widgets if you scroll down here you've got calendar widgets and you've got animation widgets you've got just about everything you need to build an app and that's how you compose your app they're just a bunch of widgets and you can scroll through here you can search for them you can command f just like normal and find whatever widgets you want now when you start a blank app flutterflow gives you a couple of widgets already and you can hover over here and see what they are or you can come over here to your widget tree and this is just the structure of your app this just shows you all the widgets that are in your app so now we've got a text widget an app bar widget a column widget these are things that already come sort of pre-loaded in your app and you can delete them if you want so let's take our app bar and let's just delete it right let's grab our column and just delete it so now we've just got our home page and an empty screen so let's just dump a widget on here and see what we can do so let's just take our text widget and you can either click and drag it in here and you've got your text widget or what you can do and i'm just going to delete that by pressing delete or you can come into your widget tree and you can see this little add widget button right here and you can click on that and do the same thing okay so now we've got a widget we've got one widget we got a text widget now after you add a widget you're going to want to customize it and to do that you come over here to the right to your properties panel now the important thing to know is that this is contextual so that means it's going to change depending on what widget is highlighted so on our home page widget which i have selected right here now we can see a different set of selections so for instance we've got a safe area that's why we've got this room up here and if we click this off all of a sudden our widget jumps up to the top we can't see it now because it's under the label but it's right there so we'll just turn that on so we can see our widget but when we click over to our text widget that we added all of a sudden it changes so we can see the properties the options we have for customizing that widget so of course we can do everything you could expect we can do right so we could change the font weight we can change the font size right and do all the things you would expect out of the properties of something okay awesome so let's delete our text widget and let's say that you want to add in another page to your app how do you do that well there's a couple of different ways you can do that first you can come over to up here and we can click on this home page right here and you can say create a new page or you can view all pages now right now we only have one page right but if you have more pages that's where you would see them so you can create click a new page here you can also create a new page from up here or lastly you can come in over to this icon right here and you can see all the pages that you have and create a new page there okay so let's just come in here and click create a new page now one of the great things about flutter flow is you have these templates already handy and that's whether you're in one of those sample apps we saw originally or not because often you're going to be doing pretty common things so for instance often you'll have lists of things could be products could be users and when we click into our lists we have a bunch of different designs we can use so let's just click on this first category list and see what happens here and we'll call these categories for now okay use template all right so here we're on a new page this is populated by all of these different widgets let's come over to our widget tree and take a look at the structure so you can see down here and there's a lot of widgets because this is a decently complex page but it's actually not that hard because remember this is a tree structure so if we come up here and we want to see because when you have all of your widgets expanded it can look pretty complicated but what you can do is you can just collapse them all up here with collapsing our widget tree and collapse those widgets down so we can get a better handle on the structure and we're going to close our tab bar so we can see the fundamental structure so we've got our home page right here categories we've renamed that and you can rename widgets if you come over here and just click on this pencil right here and we can see that in our categories our home page we have two widgets an app bar and a column so fundamentally it's not that complicated right we've just got a column and that column has a bunch of things in it but once we have our widget tree collapsed we can see okay i can see the sort of architecture the structure of this page it's actually not that complicated and one really helpful way to start learning flutter flow is to open up all of these sample apps and take a deep dive into how the designers structured their apps and you'll get a really good handle on how common ui patterns are built so we can see that this was built in a column and if we open it up we can see okay i've got an input right here and then i've got a tab bar so you can see how this sort of breaks down this tree structure so we've got one thing and then we've got two things and then this tab bar that opens up and it's got a bunch of different tabs in it we can close these up and we can kind of understand oh okay i can kind of see you got a tab and then oh a tab page and another tab you know and so you can we can start to see this structure and what first looked complex we kind of have a 10 000 foot view a sort of architecture of our app okay so we're using this templated page here but let's go back to our page and start like building something for real so we can go over to here to select our page and click back into our home page and there we are now let's just build a simple scrolling app that we can scroll through some basketball players okay so first we're gonna add a container so we click into here and i'm gonna search for container and a container is just sort of like a general widget that allows you styling options for the background of your app so i'm going to grab a container and i want to go the full height so we just come down to our height right here and we click this infinity button and it goes like that and you can see that we've got a little space at the top and at the bottom here and we can get rid of that by coming into our home page right here and we can say turn off our safe area right there and now it's full screen okay so we've got that and then let's click back into our container and we're gonna go full width okay great so now we've got this sort of like full width right here now i want this background to be black so let's take a fill color right here and then we can go in here and check black now i could just come into this color picker right here and grab a color but you can see down here we've got theme colors and you might be wondering wait where did these come from like i didn't set these up well these come from the default theme colors that come with every new app and let's click out of here for a second because i want to show you how powerful the design system is in flutter flow so if we come down here to our settings and integrations and then we'll see the first option here is our theme and in our theme here is we set up our design guide our design styles so we set up our color palette we have a light mode and a dark mode which is amazing we can import from coolers which is an adobe tool that allows you to design color palettes we can explore themes here we've got all our type settings we can import custom fonts and custom icons so these colors are coming from here okay so let's go back into our widget tree we've got our container we want it to be black so we click on our fill color and just take a straight up black color so let's just click on that and we're going to use color okay great so now we've got our container next we're going to add a widget called a page view and what a page view is is it allows you to have a scrolling view let me show you how this works so here we come in with some default pictures but if i scroll over you can see that i just kind of scroll through and you we've all experienced this with our apps right you can scroll vertically or horizontally and it snaps to that next screen and it comes pre-loaded with these images and with three scroll pages of course you can add more or taken them away let's do a vertical scroll so of course remember this is contextual so we're in our page view so let's come over here and see what options we have so under page view properties we can see oh we've got an axis horizontal so let's move that to vertical so we can see our dots changed but we also have some room down here so how would we get rid of this well right under here we've got this margin property we can see normally these don't have anything in them you know you can click into here and add them if we want but if they have nothing in them that means they're not set they're set to zero but if you see down here with margin we've got a 50 on the bottom so let's just zero that out so we can get a pure full screen okay that's cool so what else do we got going on here let's say i wanted these dots right here not at the bottom but let's say at the top left how would we do that well i don't know let's just like look through our properties right here so we come down indicator properties so that makes sense right these indicators and we've got all these great options so we've got like oh we've got active color and inactive color so that's the gray and that kind of purple color and we've got also these horizontal alignment that kind of makes sense right so uh we got a horizontal alignment at zero and that goes to the right to the left so that's probably how it's centered right yep that's it so let's bring it over here maybe 0.75 and then let's like bring it up right and as easy as that we can change those indicators okay cool that looks great now let's change out these images that come with them so let's click on our image and we can see here so we're in our image widget right there and when we scroll down to see the options we see oh this looks like it's we're coming or it's coming from this url and what other options do we have well we've got an image type here and says we network that means like the internet network it's making a network request we've got two options we've got network and we've got asset okay so i don't want to make a call to some other website i don't want to like load them into our app so that would be asset so once we do asset here we're given the option oh we can upload an image right here well i don't want to upload an image right here i want to kind of like in my whole app so how would i do that well you can come over here on the left side and go to project media assets right and over here is where you can load in media for your project and i've got some images prepared got one of kd steph and giannis so let's grab these and dump them in here uploading our assets and there we go we got these so now we can reference these in our app okay so we're back at our image we got our first image selected we're on asset and we can see asset image this is a new option because now we have media in our library so we can click that and we're on the first one so let's just click kd and then we click to our next image and it automatically scroll and we're going to change that to asset we're going to go with staff and then finally giannis okay great this is already looking really great now let's say we want to preview this now most of the time we can just preview this on the page and so i'm just scrolling here with my mouse but it's acting a little bit fidgety so if that's the case if something's not working in the in the editor right here we've got three different options for previewing our app the first one is to just see it on a virtual device and this happens without compiling this is going to be the fastest option but there are some limitations so for instance we can't use firebase we can't do api calls and there are a few other limitations as well if you click in here into known issues here are all the issues that you can't preview here but this will be the fastest way to preview next you can just run it and when you click run you can see here you can run it in the browser it's a live version of our app in the browser but it has to compile so it'll take two to four minutes so let's see how this works let's click run and as we see down here we've got to fix our errors in the project before we run this the nice thing is is that we don't just see what the problem is so we see an action not defined here but when we click on it it's going to bring us to the problem so we have an action set but it's not defined so if we click over here we can see oh that there's an action not defined and so we can just come in here and delete this action we're going to remove it and then our bug should be fixed and it is it's gone we've also got another action not defined on this image right here we can once again click in there let's delete that yep remove that click out and we can see we move from six to five same thing again on this other one we can just delete that and you can just work through all of the issues in your app and it'll bring you to exactly where you need to fix it next up we've got our developer menu and here we can view our code that flutter flow is generating for us we can also connect to a github repo so the code gets pushed over there or you can download the code next we have the ability to build and download our apk our android application package for android use and then finally okay so we've taken care of all of our issues and now let's test run so we're going to get a new window here and then it's going to compile and build our app so here we are our app is built and if we want to share this we can make it public over here and now our link is copied to our clipboard and that's shareable with anyone a faster way however to see our app as we're building it is to open up this drop down menu and to use test mode and what this is going to do is it's going to compile it once and then we'll have hot reloading so that when we're making changes in our app we'll see them immediately reflected in the preview and we don't have to recompile the code one thing to note about test mode is that if you see this screen this loading bar right here and it lasts longer for 15 seconds refresh your page and it should fix itself also you should have cookies enabled in order for this fast previewing mode there we go now we're running in our hot reload so let's come over here and let's make a quick change so let's change the color of our dots that'll be easy to see here and when we instantly reload here you see the changes immediately propagate so next let's look at the toolbar up here so first we've got versioning so as you're developing your app you're going to be making changes whether visual changes are changing have to do a functionality of your app and you're probably going to want to save it so you can go back if you make a mistake and you can do that we've got versions right here and so let me collapse this right here and you can see these are organized into folder structure and you can go back to different versions i've got a bunch of versions i've saved here so let's test this out but first let's uh let's like make a visual change so we can see this so let's just say we want to change these dots right here so i grab this let's just change it to this sort of pinkish reddish color right here we're going to save this version and we're going to say pink nav dots that sounds good so we're going to save that and then of course you can go back to previous versions so let's just go back to this one that's v1 new header type and restore yes we want to make sure we restore and then you can see that dot reverted to its original color here we've got new pages and we've already seen that so let's look at this next one which is our help and inside here we've got a lot of helpful features so you can go over to our community forum and ask questions see what questions have already been asked and answered you can provide feedback and this includes bug reports and feature requests and then just general feedback you have now one thing to note is that you can upload media so that is to say if you've got a screenshot a screen grab or if you've recorded a screencast like a video screencast from like something like loom or maybe descript and so you can show and explain to us what's actually uh going on your app that's causing you problems we also have tutorials and so we've got an in-app tutorial here that'll walk you through building an app as well as a youtube channel that we're constantly coming out with new videos then we've also got faqs in our docs which is going to be really helpful to to outline every bit of our ui builder to understand what each widget and what each feature does we've got a discord we've got what's new we're constantly making updates to the app and then what's going on with current app if there are any current known issues okay so that's a basic introduction to flutter flow now there's tons of things i haven't covered and if you want to learn more about it we've got a lot of more videos and we're constantly producing new ones and you can look at our docs but before you go i'm going to give a quick and fast overview of everything i haven't covered okay so starting with here on our properties panel you can see we've got a couple other tabs here now what are these well got an action flow editor that we can open up now this is contextual once again so what an action flow editor is it's where we can set any actions so when you click on something do this add something to a database use an animation and once again it's contextual so the actions that are available to home page are not the same ones that are available to an image so if i'm clicking on an image right here and go into our action editor we can add an action right here we can say what type of action it is on tap double tap long press and then we can see down here all the things that we can do uploading media launching a url just tons and tons of things payments right here next we've got a back end query now often you're not going to be adding all the data you have in your app right here whether it's images or texts or products and that you'll want it to come from a database and this is how you set it up right here so we've got query a collection so grab it from a collection we have a document an api call like calling to another service like twitter or an algolia search we'll talk about that in a second so that's where we set up these back end query types finally over here we can add animations there's powerful animations that you can do in flutter flow and you can even run rive or lottie animations okay that's everything for our properties panel when we come over here on the left side we can see that we've got this other thing called components what component is is just a collection of widgets that we want to be reusable down here we've got our firestore and this is our database and you can set up collections here for your app next we've got local state and local state allows you to have variables that persist that exist throughout the life cycle of your app so maybe you've got a shopping cart or maybe you've got some sort of weather app and you've got a location that you want to save as the user is moving through the app you can set those here and reference them throughout your app next we've got api calls so often you want to get data in or send data out of your app somewhere so maybe you want to get data in from the stock market and maybe you want to send information to twitter and this is where you would set up those connections next we've got custom code and so flutterflow allows you to make custom functions custom widgets and custom actions so if you need an extra widget if you need a specialty action or if you need some code to do some more complex logic than you can do in the basic ui you can set that here and finally last but not least all this stuff so first of all you can set up your theme here we've already seen this in your apps you'll have a nav bar and an app bar and you can set up the styles in here your app assets that is you know your splash screen when your app opens up and when it launches you can set those icons here you've got your app details including your default transition types you can change your loading indicator you've got a bunch of different options and colors to match your branding you can set your entry page where do people go when they first open your app and you've got deep linking which allows you to make links share with people and when they click it say on the web or from an email it'll go to not just your app but a specific page in your app and you can see here that throughout the ui you've got these tutorials when you click on here you can see a video or go straight to the docs next you've got teams so multiple peoples can use your app you can add a user here this is where you set up your firebase remember which is your database along with other services provided by google and that's how you set it up right here if you need multi-language support in your app you can come over here and set multiple languages on platforms you can set which platforms you actually want to deploy to it defaults to android ios and web but you can do mac os windows and linux here's authentication you can enable authentication and go through the setup if you have users who sign in and do stuff and save data in your app here's where you add push notifications remember that's that indication you get a pop-up on your phone when something happens maybe it's scheduled at a certain time or in response to certain actions you set that up here here's your deployment information when you're set ready to send it to ios store or google play store down here we've got three options to set up if you have payments or subscriptions in your app we've got stripe braintree and revenue cat and finally we've got integrations integrations with github so you can push your code that you've been building to a github repo you've got algolia which is a search engine which connects to your firestore your database and so if you need advanced search features like fuzzy matching recommendations relevance misspelling awareness and such things you can set up algolia here if you need analytics for your app you can enable google analytics to see data about how people are using your app if you're using maps you can set that up here and then finally if you have ads in your app you set that up here that is everything this has been a basic introduction to flutter flow please check out our other videos if you have any questions about any particular feature and we'll see in the next video

Channel: FlutterFlow

Views: 116,526

Keywords:

Id: mlR6rcWexdI

Length: 27min 23sec (1643 seconds)

Published: Mon Jun 06 2022