Design to Code in One Platform | FlutterFlow

well hello there friends you're probably watching this video because you like me are a designer and you love designing websites and applications I love designing websites I love designing applications but the problem is that when I'm done doing my piece I then need to hand off my work to somebody else who can bring that design to life I'm gonna be really honest I'm not a developer although in the past I have coded some websites I do a little bit of front and a little HTML CSS and JavaScript I am by no means a back-end developer I don't know Swift I don't use xcode I don't know Android Studio I wouldn't even know where to begin to build a full-blown web application enter the solution to our little problem and its name is flutterflow flutter flow is to web applications and software what webflow is to websites it's a visual coding tool that allows you to create websites and applications that you can then actually launch not just to one platform or App Store but to all of them so in this video I'm going to give you a quick intro to flutter flow give you a little a little bit of a taste of what it can do and I'm also going to introduce you to the biggest pieces of value that using a tool like flutterflow can bring you as a designer all right let's talk about the elephant in the room the biggest reason why you'd want to use flutter flow and that's the fact that you can take your designs and actually create real applications not some sort of subpar not some sort of fake application not a really good prototype actual code that gets pushed to the IOS app store to the Google Play store and is also still usable online as a web application let's just jump over the website you can go to flutterflow.io to check it out you can hit the button the link is down in the description to start for free but while you're here on flutterflow i o this kind of says it all doesn't it this is what we're going to see in a little bit is your Builder screen visually dragging and dropping and putting elements inside of your project and then connecting the actual layout the containers the elements to actual real world data and that means what does this button do when you toggle it how when we click this screen where does it lead to the next screen how can we sign up sign out check out pay for things everything is possible and so side of flutter flow and again this is not a fake application or just a really good prototype it's a real deal app that you can get up into the app stores and online like that awesome Point number two is the fact that you can start building better prototypes instantly this means that if you wanted to you could bypass Your Design tool you could have a simple idea simple wireframe and then open up something like flutter flow and then start prototyping there it'll allow you to go screen to screen it'll allow you to do complex interactions animations all that stuff but you're doing it in the place where you can immediately then take it to the next level fill it with actual data and get it online if you want to log into my flutterflow account and you can see we have inside of my dashboard here all of the projects that I'm currently working on we have projects here we also have a Marketplace that's currently in beta but if you need something like a nav bar or a a social network profile screen if you want to grab entire your projects to start with you can do that or you can just grab bits and pieces and kind of Swap and cut and paste them into any project that you're working on then you have organizations resources and all your other stuff down here on the left hand side but let's go back to my project and let's just say I wanted to start building a new prototype right now all I have to do is head up and hit the create new button and it's going to tell me hey what do I want to call this I want to call this you know tester app like that after you name your app you can scroll down and see all the different options for how you want to start do you want to start with a blank project or do you want to start with a template this one right here this sniff social comes with 19 screens that means it comes with potential Firebase connection later on you can connect your project to a Firebase database it will serve as the back end for your application you can use Firebase to do that but it also comes with push notifications custom functions group chat built-in triggered animations and generated content now flutterflow has given us our project we have a place to start from we have different pages as you can see over here all the different pages in our project and we're currently on the login page we can move over to the chat page and see what that's going to look like and we can customize this as we see fit we can create brand new pages using components that have already been created right here and if you don't like the way that the components or all the base Styles look you can edit those as well but this allows me to Dive Right In bypass all of the work use pre-created components templates and screens and just immediately move into this prototype mode is well designed it's easy to understand it's easy to use and if you've used a design tool like figma or adobe XD if you've tried out webflow this is going to make a lot of sense to you so you can see we're logged in now to my Builder and we have my project on the center over here the left hand panel has a bunch of different tools I can use just like a design tool and everything on the right hand side is contextual so you can see I'm currently in on the build screen and that will allow me to add elements inside if I want to bring some text I can just drag a piece of text onto the screen and there it is you can see it says hello world and that is now officially inside of my application icon buttons YouTube players video players toggleable icons Lottie animations just there's all sorts of stuff that you can use here if there's something you can't find it's probably coming soon or you can do it custom underneath that on the left hand side you have the widget tree which is going to show you all of your pages all of your components and it shows you all of the elements inside of the current page that you're currently on just like webflow super easy below that you have what's called storyboard mode which is like a high fidelity user flow diagram you can see all the connection points you can see how your entire application kind of stitches together and how the user gets from A to B to C to D underneath that you have a series of tools that are all about connection the first one is going to be your firestore this is where you would connect to your Firebase database and you can see the schema or the setup and all the data that is available to you inside of that database and then at the very bottom you're going to get settings and Integrations which I love this screen because it's going to give you access to a lot of different stuff the first one being theme you can set a project wide theme for your primary secondary tertiary colors this is why you can actually bypass figma if you want to just go off of rough wireframes come in here and start visually designing and then you'll have your light mode and your dark mode theme you also have defined navbars application bars they'll show you an example of how those look which is really really sweet you have things like General details and your project setup with Firebase and languages and platforms permissions you also have app settings like setting up your push notifications and authentication and web publishing you want different Integrations and subscriptions like stripe or Braintree or Revenue cat you can find all that there you also have some other Integrations like super bass GitHub algolia which would be search analytics a whole bunch of other stuff you can find all of that here on the left hand side in settings go back to our build screen and you tap on any element inside of your design you get a slew of options that are contextual to that element just like webflow so you can see we have all of the properties this is going to be padding any conditional visibility you can do alignment and what text is inside the button and what button it's using all very stylistic property driven things but then you also have the ability to jump over and do action flow editing which will allow you to say hey when the user clicks on this where does it go do you need to add a series of actions like perhaps the user clicks on a button and it goes to edit profile and opens something up and Pops another dialogue you can do really complex interactions here you can also add back-end queries here so you can get really really technical you can do animation on page or on trigger animations next amazing thing about about flutter flow is that there's no development setup let me say that again there's no development setup no setup of your environment no maintaining that development environment it's all baked right into flutter flow because I'm going to tell you if you're not aware setting up and maintaining a development environment is kind of a task it kind of stinks and flutter flows made it really really easy you can see I'm in a brand new project that has nothing going on it's really simple just a header up here and nothing inside the body and if I wanted to launch this really simple application I can do that because up in the right hand corner I have the power in the palm of my hands to do amazing things like first and foremost we have versions of our project we can save new versions we can always go back to previous versions if we don't like the version that we just released we can roll it back a step that's a very handy thing to do in your development environment then we have the menu where we can see bugs we can see errors we can see warnings and then if we have any of those warnings or errors by clicking on them it's actually going to reveal them inside of our project we fix those and then go back to launching our application to the right of that you have the developer menu the developer menu is awesome it's going to let you do things like view the actual code base like flutterflow is not locking down the code base it's not proprietary because not only can you view the code you can then connect your code base your project to a GitHub repo to have that traditional kind of GitHub push and pull request kind of workflow or you can just straight up download the entire code base if you're using flutter flow for a year and you're like hey that's we're ready to move on you get to take all of your toys with you they don't lock it in in some proprietary way and to the right of that we have two very magical buttons the first one of which allows you to preview your application just like that flutterflow has loaded up a preview of our application it has limited functionality here so you might not see some animations or some tricky things very similar to webflow it's just showing you a basic preview of your application you can see it here in mobile view you can also click and find a tablet view of some kind if we want to view that and you can see that our project is actually extendable because responsiveness is baked right into flutter That's The Power of flutter that's why you use flutter AKA why you use flutter flow because you can code it once make it extendable for desktop for mobile applications so on and so forth so we have that we could also jump up to some sort of desktop web application version let's look at MacBook Pro 15 inch and you can see it cuts out the device and it just shows you what that would look like in your browser which is super nice now once we've tested our application we have it looking exactly like we want it to we can actually open up your Builder head to the top right hand section and then we can actually run our application flutterflow is not just going to show you a preview but it's going to build an actual version of your application that's working off of the actual flutter code base this means that it will have everything inside of it it's packaging it up and from this this point you're almost there actually you're very very close to publishing your app into the App Store next up let's talk about making full-blown apps and let's talk about how quickly you can actually create them if you have spent a little bit of time and attacked that learning curve and you've understood the platform flutter flow as a whole and you start building an application it's very possible that you can build a pretty robust MVP over a weekend I'm talking about is the possibility for you in a weekend to actually build an application that's connected to a database that you can log in create an account get authenticated and potentially even chat and post content you might be able to build your own clone of Twitter or your own copy of Instagram within a weekend and no Dev team is required let me show you an example of a project that I've been working on I've only put a couple of hours time into it and I already have a pretty decent start and this is an education platform where users can log in take courses track their progress us and all of this is done inside of flutter flow you can see I have a sign up page sign in page a place where they can create their profile um you know phone validation forgot password all the onboarding stuff is there it also has this home page where users can see their dashboard their courses their progress we're going to build in active tracking of their progress you can see all the different users that are there they can click over to the courses page and see the courses that they're working on and then also profile page so they can update their profile information this is the web view we also have a tablet View and it actually goes nicely down into mobile view and we can preview it right now if you want to just jump over and see how the user would be able to actually click back and forth we have some horizontal scrolling all of this is done using flutter flow and again it's only been a couple of hours of work once you have your project that project is built in one code base and it's available to go everywhere and it has some native things built right in for instance again we have not only all the different device sizes but if I want to look at this here what does it look like with the keyboard up yeah it's going to look like that what if I want it in dark mode hey switch it over to the native dark mode of that operating system it's going to look like this so sky is the limit and you get lots of functionality lots of capabilities here and you can do this across the board for your entire app you can see it at scale work with it at scale and make sure that it's available at scale and that's the biggest deal is making sure that your application is available to as many people because if you're building an app don't you want as many people as possible to see it and use it yeah you do with a few more hours of work I'll be able to set up the Firebase database make all the connection points and then actually send this application a real version of it a staging version of it to users and get actual feedback from them so I'll be able to say hey download the test flight you know open this up sign up for an account account log in see how it works for you and I can ask them real questions because they actually did create an account they actually did sign in they actually did download it it's not just a figma file that they walk through and do their best to act like it's real it's really real well that's it that's flutter flow in a nutshell you can do so much more than what we showcased today but those are also seven of my favorite reasons to start using it if you're interested in trying out flutter flow for yourself check the description for some links that'll get you started if you have any questions leave those down in the comments and I hope you're having an amazing week I hope you're designing amazing things making amazing things and pushing the limits of what you can create we'll see in the next one

Channel: Jesse Showalter

Views: 47,552

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, no code, no code app builder, flutterflow app builder, app builder, flutterflow tutorial, no code tools, flutter app design, flutter app development, flutter app project, flutter app tutorial, no code app development, flutterflow tutorial for beginners, flutterflow vs bubble, flutterflow web app, nocode app builder

Id: PP3EAeEuBc8

Length: 14min 49sec (889 seconds)

Published: Fri Mar 10 2023