Beginner Guide to Flutterflow for Mobile App Part 1

hi welcome to a two-part flat to Vlog fundamentals for the non-techies in this video I will show you around flutterflow and cover all the essential Basics that you need when starting out with flutter flow so okay let's get started once you are logged into your account this is your workspace where all your projects are managed and organized create a new project and you will enter your project editor you will first be prompted to connect your Firebase let's skip it for now and I will show you how you can revisit this Firebase Setup Wizard later now let's go through the important things that you need to know about the top bar you can go back to your workspace by clicking on the Fletcher flow logo in the middle you can adjust the canvas size which is the screen size you will be working with if you are making a web app it's always good to check how your app looks on a different screen size now on the right you have a bunch of buttons I would say for beginners the most important are the bug inspector where you can click on a bug and it will bring exactly to where the bug is happening so you can fix it straight away and you have a couple ways to preview or test your app you have the project preview button this is the quickest and almost instant way to preview how your app is looking on the contrary the Run mode and test mode here takes some time to prepare but you can actually test with real data that's coming from your database the difference between test mode and run mode is that for test mode once the test session started you can make changes to your app and instantly reload again to see the changes run mode does not allow changes to reflect instantly because it essentially is hosting the final product but on a flight to flow link this link won't be seen by our users but it is a shareable link that you can share with your clients or with your teammates next let's go to the left hand side there are a lot of tabs that you can explore the first tab shows you all the widgets that you can add to your main canvas widgets are the best elements to build your app pages everything you see on the page is a widget first widget tab is a good starting point to explore but the tabs that I would say are the most frequently used when you're working with flutter flow would be the second widget Tree tab widget tree is an expandable and collapsible tree to show the parent children relationship between widgets parent-children relationship is an important concept to grasp simply put when you group multiple elements together the element that's holding everything inside is called apparent and the elements inside the group are called children this is clearly shown on the widget tree here as you can see you can collapse and expand the parent element to see or hide the children parent can also be a children to another element so on a page the top level parent would be the page itself and we call these the root element you cannot delete the real element unless you delete the page parent elements are layout elements and the most basic ones are container row column and stack container is like a box you usually use it to control sizing of a group at background or effects or use it for backend queries more on that in part two the container by itself cannot hold more than one element inside because flood to flow needs to know how your elements inside this container are going to be positioned next to each other so you will always need to use either a row which distribute elements horizontally or a column which places elements vertically or a stack which is more free form and allows elements to be placed on top of each other so if you want to use a container to group multiple elements you will always need to wrap the elements in a row column or stack or other layout options such as list tabs which are templated version of row and column but the most fundamental and most basic ones are row column stack I have more detailed breakdown on how to approach implementing design in my full course so if you're interested check it out initially on the widget tree it shows only the widget tree of this current page but if you click on this button it will split the panel in half the top being the list of pages that you currently have in your app and the bottom half being the widget tree of the current page and this is my preferred way to organize my tab when I work on flutter flow now on the right hand side of the canvas you have the properties panel this is where you adjust settings Styles or behaviors of a selected element on the main campus and when there is no element selected it is default to show the page properties and once you have selected an element on the screen it will show all the settings that you can edit on that particular selected element there are a couple tabs on the properties panel first tab to style and populate content the second tab to add actions to the element which defines the behavior these actions can be triggered by various user gestures such as tapping on the element pressing and holding the element the mouse hovering on the element or if you're working on the page when you're working with page properties you can also set elements on page load the third tab is where we request data from database which can then be used to populate content on the first tab more on that in part two on layout element you will see this generate children from variable Tab and it is definitely not an essential concept to start out so I won't be covering that today then you will see the animation tab for you to control how elements enter the page or exit the page depending on the interactions the last tab will be the documentation tab for you to leave some notes if you're handing over to the clients or if you're working with your teammates but if you're working on the page properties for example you haven't selected any any element or you selected the root element you will see this local page variables which is some information that can be shared across elements on this page similar to page state if you go to this app State tab this is where you store variables there can share it across your entire app okay now we have pretty much covered all the mates at this point but let's just quickly run through other tabs that you should know but it's not really necessary for you to get started below widget tree it is a storyboard to visualize how your pages are connected to each other this is more for visualization right now it doesn't have a whole lot of functionality built to it for you to really use it a lot but it's good to see if you have something that's connecting different pages together then we have the database tab which we will cover in part two and we have the data type tab which I don't think is very important for beginners to Define their own data type so it's definitely more of a intermediate or Advanced concept so I won't be covering here we have the app state which we have mentioned previously and then API course which is definitely more advanced feature so we won't be covering that today and we have the media library to see all the assets that you have imported to this project you have custom functions where you can dabble into custom codes and again very obvious this is more catered towards technical users and we also have the cloud functions and automated tests which are recently updated functionalities that you don't really have to worry about when first starting out you have theme settings that are shared across the entire app lastly you have settings for your app most of it you won't need to care too much right now but two things that you need to know where to locate are Firebase tab this is where you make connection to Firebase Fletcher flow has a pretty detailed tutorial that they have released officially so you should follow them to get your Firebase set up it is straightforward and I will leave the link down below you also have platform settings which you can select where you want to publish your app to if you toggle on the web platform you now have another option to publish to the web from the button on the top right you can also publish from this web publishing tab where you can edit the flutter flow domain link or you can add your own domain and publish your app straight to your own domain the rest of the tabs would definitely come naturally into your workflow and you will pick them up as you go and there you have it this is really all the essential Concepts that you need to grasp to start building with flutter flow in part two we'll cover all the fundamentals to work with data and database and how you can display data or create new data in your database and I will see you there until next time ciao foreign foreign

Channel: Nomo Codes - AI apps & automation with no-code

Views: 1,199

Keywords: nocode, softr, airtable, design, ux, ui, web design, web development, frontend, backend, lowcode, 3d, spline, product, saas, framer, webflow, googlesheet, zapier, make, integromat, bubble, figma, adobe, plugin, ios, android, pwa, sparkar, lensstudio, chatgpt, gpt4, openai, flutterflow, aigen, generativeai, generativedesign, nocodedesign, nocodeai, automation, MVP, startup, entrepreneur, ai, agi, artificial intelligence, generative ai, gpt

Id: VQDDaKiat0E

Length: 8min 56sec (536 seconds)

Published: Wed Sep 20 2023