FF 101: Lesson 01 - Introduction To FlutterFlow

welcome to the noode UI design and development learning platform I am excited to yeah go through some different tutorials courses best practices touch on all things relating to flutter flow and launching products my goal and hope would be that uh from your learnings in this platform you are able to produ better applications for your clients or your users uh depending on who you are um or your agencies so that you can produce and launch beautifully designed applications with full functionality and in line with best practices in modern development now I'm not a development expert um but I have an extensive experience with developing designing and developing uh Design Systems in flutter flow and figma and for you know clients as larg as uh Chili's so I want to disperse that information to all of my users to all the users of flutter flow um I want everybody to design gorgeous applications that function well produce a intuitive and intelligent interface and user experience for the end users um so if you want to dive with me on to this uh Journey this is sort of the first video and I want to cover just the user interface of flutter flow now you can go to the the flutter flow Channel there's a great intro I think it's 30 minutes long on the breakdown of what flutter flow is I'm going to make this extremely concise um I'm using my no code UI platform here and I'm just going to go over some generic uh and common design patterns within the platform itself so um here is where you in this build or widget panel you have the ability to drag and drop things onto the canvas which we will be doing quite often you also have the ability to detach this or if you come over here to the widget tree this is my favorite view you can then you can then click uh command F on your keyboard and you get this floating widget panel right which is really cool because then you can add in a bunch of new things here you can drag and drop um when you drag and drop we have an indicator of where you're dragging this right so in a row or a column between different elements this is another row right so you have an indicator of where you're going to drop these things super cool um you also have your pages here and we have uh folders we organize our pages and components within folders uh there's not a Rhyme or Reason but I'll probably go over some best practices in naming conventions and how to organize those things things um in one of these courses so you can search things you can also just search Pages or just search components um all folders are visible at that time even empty ones because uh you could have components and Pages within the same folder so uh when you're in this view you can also view Pages as a grid so again these are just nuances that maybe are not covered you can also add folders here you can also add a page a compon component or a flow so you can do that from this little green button here or pressing command shift F okay command shift F on a Mac I don't know what it is on a Windows I'm guessing control shift f um but you can you know add these page templates there's over 165 page templates so far I have designed all of them I don't know if that'll be the case when you guys actually see this but um they are designed in accordance with best practices within flutter flow um for the most part there may be one or two old ones but these are just pages that can help you build faster um same new with components these are anywhere from a card you know to product cards to uh social feed activity feed uh there's list views there's tables there's some checkout elements or comment views here um you can search you can also apply your theme to these things so this is a powerful feature within flutter flow that I don't think any other no code tool actually utilizes to the best of its ability um and all of these components and templates and flows will adapt to your theme if you set up your theme correctly it's really easy if you don't it's a headache so um in the next video I'm going to go about how to set up your theme in correlation with the design standard we've set in place um in all of these templates and flows Etc so and I design them all and we have to fit certain constraints so I'll just go over how I set them up uh I hope that helps okay so that's sort of the Builder you also have the storyboard mode um which allows you to sort of view um a flow you know from page to page and this will adapt to your device settings okay so if we go back to the Builder here and we say hey let's view this on a mobile device because with INF flutter flow you can develop applications and build applications for iOS Android web desktop Mac OS right you can deploy to tablets as well um all of that from a single code base and from a single Builder here we will touch on how to do that and best practices around building responsive applications or adaptive applications so if we go back here now we get a mobile view here so it's a little easier a little better or yeah a little easier to comprehend so as you can see I have some conditional Builder set up and some of these pages so they don't look very great here U but they will um when you actually deploy the application and we'll showcase that as well um okay so storyboard you also have a backend right this is for Firebase specifically um there are three ba data types um or sorry three databases you can use and then there's also API calls which allow you to connect with any rest API or any other backend that you would like to so Firebase superbase SQL light okay SQL light is pretty limited as of now superbase is also sort of limited there's no real time at the moment of me um talking about this April 23rd 2024 um there can you know FL flow is looking to expand the capabilities of superbase um but with Firebase you get everything out of the box I mean you get push notifications Cloud functions um authentication for Google Apple phone all of these things you can set up within minutes um I just did it in a live stream earlier this morning uh so yeah this is where you set up your schema for your database and we will have instruction around how to properly connect relate um reference different collections or yeah documents and collections you also have data types and enums this allows you to create things like an address right you can have multiple elements within an address so uh street address name um apartment number PO Box zip code state city right and you can get all of those from a place picker and then you can basically merge them into a data type where all of that stuff is referenced and split out into those individual Fields very useful extremely useful actually um data types are awesome we also have appstate and constants constants are obviously like their design system related or they can be they could be something as like as easy as spacing they could be number they could be logo sizes um they could be colors I think you can have a color here yeah yeah color right if you wanted to set up a custom theme for your users you could do that um so you can do all of the these options for constants and app state is just managing the state within your application at an app level there's also component State and Page State we'll get into that uh you have API calls assets right all of your images um custom code Cloud functions testing we won't talk much about that theme whole video on this don't worry about it and then settings we have a bunch of stuff here uh so we have app details right you can set your entry page and logged in page also folder organization just always turn that on it looks way better than the old one um deep linking let's see app assets so this is where you can set your Splash image which is the first screen a users see when they um come into your application so you have that and then uh launcher icon which is your app icon and an error image you also can turn on the the default nav bar for mobile and then app bars for mobile and desktop or you can decide how you want those to be seen so I always turn app bars off for larger tablets and desktop same thing with napar I'll build my own custom navbar um we have collaboration you can invite people and you can see activity Firebase languages platforms super right Linux come on um permissions we have authentication push notifications which I'll be turning on for this project and then mobile deployment also web publishing um and then you have you know some some other Integrations here uh we'll get into all of that but this is essentially you know where most of the Integrations live currently it's probably going to change in the next 6 months but I wanted to go through that um and hopefully this is a general overview in about a third of the time that that other video is so I'll put this on one 1.5 thank you so much I hope this helps and looking forward to seeing you or you seeing me actually um throughout the rest of these videos

Channel: Kaleo Design x NoCodeUI

Views: 314

Keywords:

Id: lBmecPgt4Hw

Length: 10min 55sec (655 seconds)

Published: Thu May 30 2024