Tour of FlutterFlow

in this video I want to give you a quick overview of flutter float so that you can build something like this and this is actually a real app called dream brush that you can download from the App Store and play store it's an image generation app that one of our designers built in 2 days and we're going to come back to this but let's first start with a blank canvas now I know there's a lot of buttons but they're actually organized into five main sections let me show you first is the widget palet over here and these are just the things you build your app out of you just grab what you want and drag it into the canvas which is our second main section here you can select widgets you can drag and move them around and delete them and you'll notice that as you click on different widgets this panel over here will change which is our third panel our properties panel this is where you'll configure the widgets in your app and keep in mind that it'll change depending on which widget you have selected because every widget has different features different properties you can change so we've added widgets to our page move them around change some properties but what about if you want to see all the widgets on your page well then you come over here to our third main section our navigation menu and select the widget tree these two sections your widget pallet and your widget tree will be where you spend 90% of your time and in this widget tree section there are two parts you've got the pages up here and if you want to create a new page you can come over to this green button here where you can create a blank new page use one from our pre-made templates or create one with AI and we'll do that in a minute and underneath you'll find the widget tree this is the structure of all your widgets on the page you're currently on and you can do everything you do on the canvas so you can select widgets you can drag them and move them around and of course delete widgets oh and that reminds me you can always undo with controll or command Z and redo with shift command Z and you can see a full list of shortcuts up here okay so that's the widget pallette and the widget tree and the navigation menu all the rest of these things are other tools and services you'll use as you build your app okay so we're building our app and we're ready to see how it's looking and to do that we want to run a test mode and we start that by clicking on this lightning bolt icon in the upper right this will take a minute or two to start up but once it's up you can make edits to your app and instantly refresh and you'll see the result but wait why do we need to do this I can see my app when I'm building it right absolutely yes but there are three things well 2.5 that you need a test mode for first Network calls so if you want to see data from your back-end database or API calls you're going to need a test mode second logic or what we call actions this would include things like navigation between Pages showing popups or alert dialogue boxes or submitting forms and third and this this is the half one animations some animations you can see in the Builder and some you need a test mode for once your test mode is on your app will work just like a normal app and if you make any changes you can just come back here and reload so I'm going to select this homepage widget right here and I'm going to just change the background color to be a little bit darker right here we're going to use that color now we're going to jump back over to our test mode and instantly reload beautiful Okay so we've got the basics but let's make this page a little bit more attractive and a little more functional and we're going to do that not by creating our own pages but by using pre-built ones so what do we want to make well let's make a profile page first so we're going to come into our create new page menu and search for profile let's just scroll down and see how these look those all look pretty cool let's grab this one right here accept that name and this is just a normal page now so you can make some edits this button is a little bit small right here so let's just give it a little more width maybe 150 and 50 up here okay that looks good and let's make one more page right here so maybe some sort of notifications page let's see if there's one for that so we search for notifications and I like this one and we'll just finish notifications and create that page great so this is looking better but we want to add some more functionality to this so let's add some navigation between our pages so when the user clicks on this notification it'll bring them to this second page so how would we add navigation well because this has to do with the configuration of this widget right here it's going to be in our properties panel but it doesn't have to do with visual configuration that's what most of the stuff here is it has to do with an action that we want to happen and everything having to do with actions will be in this second tab right here this is where you'll find the action flow editor now What's Happening Here is this is where you will Define all the actions you want want to happen in response to some trigger and you can see those here and those triggers will be different depending on what widget you have selected so this could be when the page loads or when the user Taps something and that's what we want here and there will be three steps when you set up actions first you select the trigger most of the time the default will be correct second you want to add whatever action you want to occur and you can see here we've got tons of actions and these cover most of the actions that you're going to need when building your app of course if you need something custom we have custom actions that you can hand code down here but what we want is a navigate action and you can just search for this so go navigate and then we see all of these pages that are available for us to navigate to Well we want to go to this notifications page all right Second Step done third step is to configure your action in most actions there'll be options for configuring it to make changes to it here we're going to keep all the defaults that's fine so we can just close this out and let's go test it we've already got our test mode going so we can just refresh it to see and wait this isn't the right page yeah that's true we have to set which page is our initially loading page so you want to come over here in your navigation menu to our settings and we're in this app detail section and we have this initial page so we can just change that to our profile page okay let's test it again and reload great so we're on our page and when we click notifications it brings us to the second page beautiful lastly most apps you'll build you'll use a backend database so let me show you how easy it is to set one up in flutter flow and display that data so we're back in our Dream brush app and what I want is some hero images up here that'll really grab the users attention when they come to it and I want these images pulling from my database because I want them to be from users but right now I don't have any database set up so let's set one up now flutter flow supports natively Firebase and super base and we're adding new ones every year and you could use any database you want through our API manager but for this let's use Firebase if you already have a Firebase project you can put in your Firebase project ID here I don't have one set up so let's just create one from scratch select a name that sounds good and a location that's great and let's sign in with Google select the Google account that you want this Firebase project to be registered under and that's it flutter flow will create a Firebase project for you beautiful it's ready now if you're going to use authentication or storage there's a few other configurations now we're not going to need user authentication for now but we do need this to upload our data in flutter flow's content manager so let me just do this real quick just click get started and email and password enable it and save and that's it let's jump back over so the last thing to do is just autogenerate some configuration files these are just some settings and keys that enable your project to communicate with Firebase all right it's all set up so let's make our first collection we're going to come over here here to our Firebase Tab and let's create a collection called images create now Firebase collections are made up of documents and we're just going to start from scratch and we just need one field for now that's going to be the URL of our image then we select the data type which will be an image path and accept it beautiful now I've got a CSV that I want to import so let's just go into manage content here so let me upload a CSV and upload flutter flow recognizes the data type so we can just valid dat and import and it's successful great awesome just like that we've got three documents okay let's jump back into flutter flow and connect this collection so we want to connect it over here to this Carousel and in order to connect data you want to go to this third option right here where we add a backend query and we want to get a collection that's what we want we've got one collection already set up beautiful now this popup is just going to tell us that we're going to create multiple children based on each document in the collection ction and that's exactly what we want to do because we want to show one image for each one of those items Okay so we've connected it now we need to bind that field to each image so let's add in an image here and we can scroll down in our properties panel to the path this is where the image is coming from and we don't want to change this because we want this to be a dynamic value we want to connect this to something else that is a field in our documents so we click in here here and we've got tons of options and we can see the second one here our images document and when we hover on it you can see that it's highlighting where it's coming from so let's twirl this open and we want to connect it to that URL field that's it now because this is a network request we have to run a test mode so let's do it beautiful and just like that you've connected your app to your backend database if you want to learn more about flutter flow there are three places to do that first we have flutter flow univers Unity this is a series of videos that can bring you from a beginner to an intermediate flutter flow developer second our inapp tutorials which you can get to by going over to here and tutorials and finally our documentation we can't wait to see what you build in flutter flow

Channel: FlutterFlow

Views: 149,987

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, flutterflow tutorial

Id: GpXjU-ieAKU

Length: 10min 17sec (617 seconds)

Published: Wed Nov 22 2023