See the power of FlutterFlow! We check out the platform from the inside!

Hello, my name is Kamil Tarczyński and welcome to the Just No Code podcast. In today's episode, just like in the previous one... We continue our series of stories about no-code or low-code tools, which  we most often use, which we recommend. In today's episode, I will talk about a great tool for building native  mobile applications. Exactly, native mobile applications. Not only PWAs, but exactly those that are based on a native framework. In this case, I will talk about Flutter Flow, a pla tform that allows us  to build applications in Flutter language. Flutter framework, which is based on Dart language, which is kind of let's say  an intermediary, which sequentially translates the application we code in  Flutter into Swift language or Android language. To not prolong, I invite you to this episode. I will show you today exactly how this platform functions.

As you see, we are already inside this platform, where of course as in  every other case we start from the first screen ti tled Create  Project. And here just like in the case of Webflow we can create either an empty application or  an application based on some template. we add the name just no code create an empty application and will be redirected  to the editor the first thing we see is project setup  you must remember that applications we create in Flutterflow are native  mobile applications what does it de facto mean? it means, that here we create only and exclusively frontend if we want to have  user authen tication we want to create some records, we want to display lists  of these records and so on and so forth we must have some backend some backend  somewhere Flutterflow allows us native integration among others with Firebase  however these are not no-code solutions.

‍

Exploring Flutter Flow: An In-Depth Look at Features and Functionality

If however, you would like to create a backend in Xano and combine it with Flutterflow  then it is certainly possible and is feasible. However, you must remember that still you must have this Firebase here,  to be able to configure  your application in Flutterflow. I emphasize, today's recording is not a training recording, where we will  talk about how to do all these things,  It is a video walkthrough, we will simply show what this platform  is, how it functions, what is in it, so you learn a bit more about it  so in the first step as you see Flutter will ask us about  connecting our project to Firebase it is required to  be able to publish our application, to be able to use it I of course skipped it at this  moment  to  not deal with it at this moment. As you see, the editor itself is very similar to what we know in Bubble,  to what we know from Webflow. We have our paper sheet in the middle, which I like to call.

We have on the left side all the elements of the editor, or other options, which we will  manage. On the right side, we already have properties, whether of a particular element, or  anything else. And from the top, of course, here we can return to our main  dashboard. Here we have information a bout what our project is called. We have a help menu, we have information about keyboard shortcuts, search, or copying  the link to the current view. Just like in the case of Webflow we have different breakpoints, because Flutter also  currently allows creating applications not only for mobile devices but also  web. it is in a very early stage of development and I would just be careful. We have here information about the version, in which our application is. We can look at snapshots or crea te new versions of our application so,  to simply separate certain historical moments. We have information about whether we have any issue in our project, whether they are type  warnings or errors.

We have comments, and we also have code preview, because just like in Webflow,  FlutterFlow allows us to export code. So, if FlutterFlow at any moment does not offer some  functionality, since the platform is only 2 years old, we can export this code  and edit it later in our favorite IDE, if we  s imply know Flutter. So, we can inspect this code, connect some GitHub repositories,  download the code, or download an APK file. We can also preview our apps, launch them in  run mode, test mode, in which we will test them. You just have to be aware that test mode does not always reflect how the app  will function live. And here, as you see, we have various page settings. One element on the page is the page itself, so we have page parameters  we have route settings, and here we can manage them.

Whether our page should have a safe area or whether we should not hide the keyboard when clicking on  the screen, or whether we should disable the Android button,  Well, here we need to have a bit of knowledge about how systems or  mobile apps function, to design our app well. Of course, practice makes perfect, if you test it, release it,  see what affects what, then you will be able to manage it. Here, my dears... we create all actions related to individual elements, whether it's  the  page, or elements, or clicks so we can open such an Action Flow  Editor and it looks like this, that in the case of a page we can trigger some  workflow on page load or when someone, you know, shakes the phone what should  happen then?

‍

Harnessing the Power of Actions and Customization in Mobile App Development

let's say, that on page load I'd like to perform some action  such a tree of actions whether I'd like to navigate someone or I'd like to  share something, or I'd like to display some animation or I'd like to show  some notification let's say I want to display an  alert dialog. Informational dialog and my title will be the title. message will be the message and dismiss will be OK so on page load just  an information dialog will be displayed let's see how it will look  you see here we can immediately do a preview of such an application the loading of this  might take a while  great as you see the page has loaded so as you see we really have  really many options and we can manage them or just create entire decision  trees. Because here we can further add  some conditional, if this condition was  met, then we'll go left or right. And again here these actions or conditionals, on which we can rely, are  really very many.

I won't go into details here, because here I encourage you a bit to delve  into how mobile applications function,  here you see we can also add custom functions or some expressions  written in traditional code in a traditional approach so here is  definitely a lot of elements with which it is worth familiarizing ourselves from ou r perspective  as you see the application immediately tells me that I have an error, because I added a conditional,  which has no condition defined so, for now, I'll just  remove it, so it doesn't spoil  our mood. Great. As you see, we already have some first action. And just like in the case of Bubble or Webflow, we apply further elements to  our page.

which we configure how exactly they should look, so I want this  text to be semi-bold and its size to be 24 in this way we will be able to   manage all that happens in our application you see we must here  add some wrapper of all these elements how they should exactly  look I want it to be stretched and you see I already have a page with the text hello  world and a button  in some attractive way, however, that's not what we are dealing with in this case. And now, as you of course see we have here an action, but we can also  make some back-end query, if some back-end we will be connected to, to  display some lists, pull elements, etc . we will be able to generate Dynamic Children, so precisely this whole list on  the basis of our back-end query. on some action trigger. And we also have the possibility of commenting all this, so just another  developer if they enter our app knew exactly what happens in it.

‍

Exploring Advanced Styling and Interactive Features in FlutterFlow

A very cool option in FlutterFlow is however that it allows us very  advanced style configuration and among others gives us by default the possibility  of switching between light mode and dark mode. How it functions I  will tell you exactly in a moment. We can also display right away the device. Thanks to which you can, for example, understand what then exactly the save  area is. Because see, if we turn this on this view here changes a bit. In this case. Great. So, we have basic options enabled. We see how exactly they function. We can also see how our device will be,  looked with the keyboard turned off or turned off and such things. We also have the possibility of connecting the canvas.

Then, just  as in the case of Bubble and Webflow, we have a whole tree of elements because  again, it is in some way hierarchical so that we see everything  we have our pages, which we can also place in folders, add  new pages  from some template, so let's say I want to create some, maybe, oh, such a  nice page, sorry, it switched here. Content, I would like such  a beautiful page to have here in my app, so I click Create Page,  and you see, I already have the whole page created. If I look at it... very q uickly, you will see also that  Here already is some interactivity. I can, for example, move this. When I click this something happens, and here nothing will happen, because nothing is  connected. And so on I can scroll. Here you see these charts as if they work on hovering. I can see what exactly is what and so on and so forth. So very nicely it shows us right away how our app  functions inside. In this case much bigger animation is connected on page load.

This is not visible in preview  because not all things are visible in preview. We would have to enter the test mode of our app. However, before it loads, here you see, if we have some animation  added, then again we have many, very many possibilities. And we can simply see, how this animation itself looks. We'll also look soon, how it looks here. Okay. As you see our app already... is loading. What is very cool, that I would like to say, is that we can immediately also  preview it in different breakpoints, as we also  have instant reload. As you see here after loading the title appeared, the dialog  window with our message, which we designed there. But let's say we would like to preview this page. Of course here  is the homepage, we have it set up this way, so we add that clicking the button,  we want to navigate to that already beautiful page, that dashboard page, so  we add navigate to, dashboard five, great and that's all. Do we now have to reload the app from scratch?

No, just doing instant reload is  enough, thanks to this the app reloads  very quickly, as it only takes into account those small changes in the code  how it works. Remember also that native mobile apps, launched in the browser  do not work as smoothly and nicely as really launched on the phone, so I  always encourage to check them on the phone. We can also immediately see how they will look in light mode or dark  mode. So here it did not change let's click back on dark mode. Great, click button, I was redirected, you see th is animation  was a bit clipped because it is launched in the browser, not directly  on the phone. However, here then you can see how exactly it looks how it  simply functions. Great. We can go further. We can go further. Here we also have a very interesting option called storyboard after  where exactly it takes us. If we will have more of these screens then here we have a legend also what happens, what is what.

‍

A Deep Dive into App Configuration and Customization

We will also see the whole path of movement of how users  will be moving in o ur app. Next, we have of course the database, the firebase database if we are  integrated with firebase. Next, we have datatypes. which we can create in our app here again I refer to learning about  mobile apps, we have upstates, where we will store e.g. user tokens or user information, so as not to retrieve them from  the backend every time we load something and here what Geeks like  the most, namely adding API calls this is exactly where we connect the back-end with  our front-end  here we  can define these API calls, group them, etc. We have really advanced configuration options including caching or  proxying our queries so we will be able to save our backend, we will  be able to manage it properly and properly configure it or incorporate it into our entire  app.

We have assets, which will be directly in our app, thanks to which we  will not have to download them from the internet, but they will be immediately loaded from  the device, which is of course very helpful and very po sitively affects  the performance of the app. And we have custom code functions, where we can add custom codes, custom widgets  or custom functions, custom actions, or custom files. Thanks to this, we will be able here to  build a very advanced mobile app maybe not as advanced as if we  wrote it only in code, but again we have the possibility here of adding this custom  code, defining it directly on this platform, so actually, we do not have  limits regarding what we can build in Flutter Flow. We still have to remember that mainly the backend will handle our  functionalities but here these possibilities are really  unlimited.

And almost the last thing, which is team settings, so managing  how our app should behave in certain breakpoints, what those breakpoints  will be, what loaders will be in our app, for example, we don’t want there to be  team mode, all colors to choose as well as dark mode team,  thanks to this  it's much easier for us to create apps, typography and icons, meaning which  typography we will be using, which fonts, etc. which icons, and team widgets, so we can create our own widgets here.

‍

The Ultimate No-Code Solution for Native Mobile Apps

In the end, we have upsettings, a very important section in Flutter Flow in which we must  specify all kinds of information, package name, display name,  project name, how our app is going to function, what assets it will have  regarding splash launcher icon, whether navbar will be in ou r app and  appbar, how it will function, how it will look, collaborators, firebase,  various languages of our app if we want to use them,  what platforms we are creating these apps for what permissions we will be asking  users when they launch our app on iOS or Android  user authentication whether we want to use it if so, whether from Firebase or the regular push  notifications, mobile deployment at which we  will stop for a second. Flutterflow allows us to publish applications directly in stor es. We have here the entire instruction on how to connect to these stores, so if you  create a web flutter flow app click deploy to app store, deploy to  play store and your app is already in the stores.

Of course, again on the side of those stores you need to do certain configuration, so  the app is actually available, but you don't need to transfer those packages,  export them, play with all these things. You have it thrown in there right away so you can publish it. it's only a beginner's  option, so I would be very careful with it, because as  you see also this is information that it is still in beta. Integrations. If you want to integrate Stripe, Braintree, Revenue'ka, Trazor Pay,  Superbase, GitHub, Algolia, Google Analytics, Firebase, you can already as we  talked about, Google Maps, AdMob, or MaxLivestream. all these things are offered here natively. You don't need to use custom code. Just configure it correctly here. You will be able to use it. One of the most popular  integrations in mobile applications are here so  really available at your fingertips.

As you see Flutterflow is a very advanced platform de facto editor  or creator of mobile applications with which we can create really  all kinds of applications in my opinion because even if  Flutterflow natively does not offer some functionality it allows us to add  and compile code within this platform thus our  possibilities are limited only by Flutter's capabilities or our imagination and what  we can cre ate. If there are libraries available on PubDev or such things, then  we can integrate them here, use, see how they will  actually function. Flutterflow in my opinion is the most advanced and best  platform currently, no-code or low-code de facto for creating  native mobile applications. I hope today's film was helpful for you. I invite you to the next series. See you. Bye!