Most overpowered way to build mobile apps?

when I first tried flutter a few years ago when it was in beta I instantly loved it because it made mobile app development so much faster but nowadays in 2023 flutter development is like 10 times faster than it was thanks to visual editing magic would you like to see a magic trick in today's video I'll show you exactly how I'm building my own native IOS and Android apps but instead of writing all The Code by hand like I've always done in the past I fully embraced the productivity boost of a visual editor called flutter flow the sponsor of today's video but please don't tell them I would have made this video for free because the product is really that good and as you may know I'm always highly skeptical of Loco tools because they often produce garbage code then you hit a brick wall when you need something custom but that's not the case with flutter flow in the next five minutes we'll build a full Stack mobile app that handles user authentication along with real-time data and firestore when you first sign up it has a demo app so let's first do a quick tour of the most important features a flutter app is structured as a tree of widgets in the middle we have our canvas where we can Traverse these widgets flutter provides a bunch of built-in widgets that we can actually just grab here from the sidebar then drag and drop them into the UI visually then once you have a widget selected you can go to the right side and update its properties like alignment padding colors Shadows background images and all kinds of other stuff that's a huge productivity boost right there but many widgets need to be interactive for that we can go to the actions tab and then choose an event like on double tap that will run some code when this event is fired we might navigate to another page close a dialog or even make a call to firestore or some other API we can also easily add animations when actions are triggered on top of that we can document each widget which will insert a comment into the code and speaking of the code we can view it by clicking this code button up here that'll take us to the code view where we can view the source code for an entire page or we can click on an individual widget to highlight just that code and as an experienced letter developer I feel like I understand what this code does but one of the more complicated aspects of development is State Management on the sidebar here we have our app state which allows you to organize Global state that can be used anywhere in the application in addition we can make this state persisted which will store it on device between sessions we can use it in the application like by setting it as the text field on the button then from there we can create an action to update the state and have the entire application react to it but you don't want all data to be Global if we click on the widget tree here in the sidebar you'll notice that we can select every page in the application pages are special because they can be navigated to with the router but they also have the option to have their own State you'll notice a state management button here on the right where we can add stateful variables to it that's cool but you might also have individual widgets that have their own local state as the widget tree grows more complex you'll want to break it down into your own custom components that can be reused you can do that by selecting a point in the widget tree then right click and convert to component or just click on the diamond icon what's awesome is that you can now edit this component in isolation and it can Define its own local state it's all very logical and you don't need to think about implementing some complex State management system if we look at the code it generates a model file for the data itself then uses built-in flutter Primitives like setstate to update this data in the application now the next thing I want to show you is the theme editor from this panel we can customize the design system like responsive breakpoints colors and typography and you can also manage custom fonts and icons here as well all the features I've showed you up until this point will likely take care of 90 percent of your UI and state management needs however at some point you'll likely need to write custom code like maybe you have a widget you want to reuse from a different project or maybe you just have some custom dark function that does some fancy math the custom code panel allows you to write that code and then apply it in the application visually oh and what do we have here an open AI panel that can write this code for you this thing is ridiculously overpowered and if that weren't enough we can also write unit tests for this code visually to make sure that we're actually getting valid code there's a ton of other features we could talk about here but now I want to take you behind the scenes and show you how I'm using it to build a native mobile app for fireship pro members the fireship website uses Firebase as the back end and one thing that's especially awesome about flutter flow is that it integrates with Firebase as well as super bass out of the box when you create a new project you can actually just give it your Firebase project ID and add flutter flow as an Editor to your project and it will automatically generate all of your config files as well as Firebase rules and things like that it eliminates a lot of tedious configuration work now once you have the project set up you can actually create a schema for your data and firestore and this allows you to use that data model anywhere in the flutter app on top of that it even has a schema validation tool to make sure that the schema actually matches up with the data in the database now if you're not using Firebase you can also make API calls and then use Json path as a query language for example if you have an existing next JS app with API routes you could call those API routes to bring in data to your flutter app or any other API for that matter but here's where things start to get really cool as you can see here I have a login page to use the application we've got multiple sign-in methods and usually that's a lot of work to get all coded up because normally you would log in create a document in firestore for that user and then navigate to the appropriate screen well we can actually handle that entire process without writing any code if we click on a button and then go to the actions it'll take us to the action flow editor in this case we want to implement Google sign in so we just choose their Google auth provider and we're done in many cases though you may also want to create a document and firestore when the user signs up we can do that automatically by checking the box for create collection but once the user is authenticated we then need to navigate to a page we can handle that by adding a second action to this flow we'll tell it to navigate to our profile page and we can even throw in a sliding animation here if we want but what if the logic here is even more complex like maybe we want to do one thing for pro members and do something entirely different for non-pro members we can handle that by adding a condition now that the user is authenticated we have access to the state of the user and we can Branch off our workflow based on whether or not that user is a pro member from there each user could be navigated to a different screen or we could even add additional backend calls here to one of the API routes or to firestore to create a new document and that's all it takes to log in a user with complex backend logic oh and one other thing I want to point out here is that the actual UI for the sign in buttons was not designed by me personally but came from one of flutterflow's built-in templates you can just drag these right into the camera canvas and tweak their settings and if you're building multiple flutter apps you can create what are called theme widgets you reuse your own widgets across multiple projects and that's a huge feature if you run an agency that creates apps for other people in any case when a user logs in as a pro member I want to take them to a profile page that shows their Pro status as well as their total experience points you might be wondering though how and where do we fetch this data well you can handle data fetching at any point in the widget tree but in this case we'll do it at the page level when we click on the page widget we can then find the button for backend query which allows us to create a query that could either grab a single document from firestore a collection from firestore or make an API call to some other service in this case we just want to fetch a single document from the user's collection that's linked to the currently logged in user by default it will use Firebase real-time features to update the document whenever A Change Is Made although you can change that behavior by making it a one-time query and now that we have that data we can start using it throughout the application all the values in Brackets like Pro status display name and total XP are based on the firestore schema that we we set up earlier if you're wondering how that works we can look at the code and see here that it has a stream Builder wrapped around the entire page and that's the exact way I would set it up if I were doing it myself in the code but now let's go to the achievements page which makes a query to a firestore collection it's the same basic process but we can do additional things here like filtering and ordering on the firestore query one thing I find extra cool here is that you'll notice we have four different elements in the list and that's because it auto populates those to give you a preview of what it should look like when you fetch your data but now let's assume we're ready to run our application and then deploy it to the App Stores the first thing we can do is click on the eyeball to go into preview mode in preview mode it won't actually fetch your data but things like navigation will work so you can get the general idea of how things are looking on a variety of different devices now to actually run the app we can click on the lightning bolt to test it in the browser this works pretty well but not all features are supported in the browser like the device camera vibration and stuff like that another option is to download the actual code and run it locally in Android Studio or xcode and when it comes to Android you can actually build and download the APK directly this is a paid feature but if you're serious about deploying a native app it's money well spent and if you go to the settings tab it integrates with codemagic for one-click deployment to the App Stores but even if you're not serious the free tier is a great way to get things built quickly and also just a great way to learn flutter to see how different patterns can be implemented the reason I'm using it to build my app though is because it writes code that I understand and like and just eliminates a ridiculous amount of friction like I didn't even talk about push notifications app permissions or multilingual support all of which can also be handled by flutter flow thanks for watching and I will see you in the next one

Channel: Beyond Fireship

Views: 654,630

Keywords:

Id: -uN1Q98UMO4

Length: 8min 32sec (512 seconds)

Published: Mon May 15 2023