Hello everyone. Uh Thank you for joining my session, Flutter Flow, the new era of designing apps. I'm Kamal. I'm a Google developer expert in flutter dot developer advocate youtuber and a community builder.Well, uh there's a lot of things to be added to it, but definitely um this session is not gonna be something where I talk about a tech. It's purely my experience uh working with flutter. And what are the tools that I can actually get in to make the designing more easier when compared to other tools and how I can help a flutter developer excel in this field by making the tools at the maximum efficiency. Because what I believe is uh just getting to know a particular tech stack and then working on that particular tech stack coming up with innovative solution is not a job of a developer, a job of a developer is to ensure that he remains up to date with the releases with the new tools so that he can also minimize his work and concentrate more on the functionality because I still see people using the old school style or the old tools to develop application because way down in another five years, there would be everything, low code, no code, those kind of environments.

So all the coding that you do in the initial, all the designs would all be taken up by A I and all you have to do is just work on the functionality. So I think it's time to get up uh to start working on these kind of our environment or get used to this kind of environment so that you purely focus on the functionality. So one such tool is called as a flutter flow. But if you are a flutter developer, definitely you will know about it. But uh since um if you are new to it, definitely don't worry about it. I have a slide which clearly explains what flutter is and how you can kick start it and how you can maximize the efficiency or or use the stool to the maximum efficient. OK. So today's agenda is pretty straightforward. OK? Design process itself is a complete subject to dwell in and to what are the types of designing apps. I don't think every developer is a good designer. Uh As a developer, we focus more on the functional part and we are good at it, but designing aspects also plays a very important role.

So today we will see those aspects and how flutter flow the tool that's really gonna help us in achieving this features about it and how templates components are created. Now, these terms are very common to flutter development. So that's the reason this tool is designed by flutter team for the flutter developers for the flutter community. So that's how they've catered this tool. And um don't uh have that assumption that is, is it only for flutter developers? No, even a normal designer or any app developer can definitely give it a try and see how it works. And I'll show you in a moment how this works for you. And testing testing is also another phase where most of the tools do not provide, but flutter flow actually provides one. And as I mentioned, the latest release, which is very important. I still see 80 to 90% of developers still not using the release part, which is very important to keep yourself up to date in the current scenarios. All right. So coming to flutter, flutter is this U I tool kit from Google. It's one of the most amazing toolkit if you have, if you haven't tried out just hop into the browser type flutter dot dev, and you would find the entire details about it. And to just to give you a gist about it fluttered.

Is this uh Google's U I toolkit for developing cross platform applications, whether it's mobile web desktop, all with a single code base, that is what really makes flutter unique and different. And there's lightning fast speed, you get things done at a faster rate. So initially, if I had to develop a flat. If I have to develop app, I have to exclusively have an Android developer, IOS developer, web person. All these kind of messy things used to happen, forget about developers. Even if it was an animation. If I had to get into my app first, I have to get an animator, then get a U I designer and then get a developer, convert all these lines of code. So it would be running into 10,000 lines of code to get that. But in flutter, it is so simple that in a single click, single line of code, you can get things done and one code base is good enough to get it done. So that's how easy it is to develop applications on flutter. So if you ask me, what are the features that really outstand flutter from the rest of the framework? Definitely there are a lot of other frameworks like via Zamin, there are pros and cons of it but definitely flutter stands out in a very short period of time. It's been grown up and it's been performing well with a lot of stable releases and a lot of customers adopting it because it's very difficult for a customer to adopt something at a very early stage because it's a production app and there would be skeptic whether should I give it a try?

Should I migrate it completely? Don't worry, companies like Ali Alibaba, even Google and BMW S, there's so many companies which have kind of adopted it. So you should definitely check this out. So coming to the beautiful, when I'm talking about beautiful, am I talking about the U I part? No, I'm talking about the framework and the how the layered architecture is so that all I do is write once and I'm able to run it everywhere. Community community is awesome since this is free open source and it's been run by the community. You have definitely a lot of things to get engaged with the community, whether in terms of opening an issue or working on a library or being a part of community. It is kind of growing, growing every day cross platform. As I mentioned, you can run it on your web mobile desktop very fast fast. I do not have numbers to mention, but trust me when I run apps, it's really fast. Uh We also have a feature called as hot reload where I don't have to restart an application to view even a minimal change, it preserves the state and it refreshes it in seconds, productive, trending everyday flutter and dart. In fact, Dart is the language used to develop flutter apps. So it's trending on the github repo. So you can check that as well. The ecosystem itself itself is so stable growing and coming up with innovative solution and definitely it is open source.

So if you haven't tried flutter, give it a try, see how it works as a developer, one suggestion that I would give is never stick to a technology, always keep exploring it, see what innovative solution you can come up with because this is not gonna remain the same. So as a developer always keep yourself updated with the latest, so coming to the importance of design process, as I told you that it's not only a job of a designer, designer, job is to design the UI part that's absolutely fine. But at the end, even developer has some importance while it comes to design process, because we are the one actually developing it, right? So we know that nitty gritty features that needs to be implemented with a U I person will not understand it. So when it comes to design process, we also have to know a few details for it. So when it comes to design process, there are few certain theories that we need to inculcate that the first one being define what your design has to be. Say. For example, if you are a single person or developing this app as a freelancer, then you unless if you hire someone, it's perfect. But what if you are the one who's designing it, developing it and then kind of promoting it, then I would suggest you will have to follow all these guidelines.

So the first being defining the you I understand the defining part also, do you really need animations in all the pages? Do you need a button on the left or right. Accessibility. You got to think about all these features before defining one rather than not deciding after defining one, identify, identify all the criteria which like accessibilities. I as I mentioned, uh carousel sliders, what are the features that you really need? Brainstorm it, the more you brainstorm multiple times, you will definitely come up with all those minor failures that you can kind of get rid of it rather than resolving at the end stage. So you might come up with a lot of things that you can actually neglect and keep it simple, actually come up with a prototype and then testing part when it comes to the testing part, people think that testing is always done only after developing an application. No testing also comes at the face of the designing part, which most of the designers are not aware of it. So do well tested design of your U I also and follow this process, reiterate communicate. So this kind of path if you follow during the initial stage of your design process, I'm sure 30 to 40% of your flaws would be rectified here itself rather than after building something and then coming up with a design. All right.

So whenever we used to develop app, we used to come up with these kind of standard screen with the standard primary color. I still see people developing apps with this kind of a list view. Is it not the old school style. Are we not geared up to go up with new designs? The same blue color primary. If I have to do a a task, it's like that simple list view and then the slider icon meeting, it looks so boring and pale now. Definitely. If I was a customer, I would definitely not accept it even these days, even if you're learning something, it's good to go. But when you kind of delivering it to your customer, this is not the kind of you I you would expect but I still see apps at this level. So it's time to come up with new designs. So how do I come up? OK, I have these design ideas. Now, how do I come up with designs? So definitely there are tools to help you and flutter flow is one such tool that's gonna really help you not to think too much about it. All you have is uh drag and drop templates that you can easily use it. So all the work is done by someone else, all you have to do is choose the right one for your project.

Now, if you see this kind of an app with a simple primary color analyst view, and when you look at this, there is a huge difference, not just I'm talking about the image and the way it's been arranged, I'm talking about the way a single page where I'm not gonna stuff in all the information I'm gonna add only the necessary information and ensure that it's minimalistic.

And at the same time, I'm covering all the information. So if you look at this, it has a light mode, dark mode, it has a favorite, it has a bookmark, download, it has the details and few icons and then you have this bottom kind of uh bottom sheet which with the price details and the check availability and the feedback. So if you look at this, everything is being covered, it's not scroll whatever. Whenever I look for this kind of a UI all I need is look at the picture and I'm good to go the price and check the availability. That is what is the kind of UI people are looking for? They're not gonna sit and scrawl everything, they're not gonna keep on clicking on everything, they wanna minimize it. So that's why I say design also plays a very important aspect in your app development. It's not only about functionality, you might come up with this awesome architecture. Everything works perfectly fine are required. But U I plays a very important role for the first time download and use apps. If it's not user friendly, if it is not A P, people will not use your app, even though you have a best architecture follow themes. Themes is something which I don't see anybody following.

They would have one random color on the first page and then they would have buttons with the slighter versions gradient different. So always decide on your themes, decide on your font size design. What is your oh icons? Which are you gonna be using? There has to be some uniformity, some theme to be followed. So when you have this all in place during your brainstorming session while developing it becomes easier, not only for developer, also for the user who's using it, he would find everything uniform. So follow a theme.

Now, if you look at this, I could have used random colors just like that. But no, they've used some them even the map. If you see her, it has the same color as the onboarding screen, the calendar, all of it, even the bottom navigation. So one step is always to use a theme, whether it's bright colors, dark colors or some gradient effect, always use a theme, use wireframe while designing apps do not still use that paper, drawing on the paper and then kind of taking a print out of, I mean taking a photo of it and attaching no, we have tools to do it.

So I'm gonna mention a few tools that can really help you. But these are few of them that you can start working on it. So follow the theme. Now, this is also another good one of the best example to display something as I told you, minimalistic is one of the beauty in UI deciding if I have to just talk about a particular product, whether it's coffee or a merchandise or anything as such. If you look at the UI, it looks very simple, straightforward, elegant. I have this coffee cup talk about it. What is the size, the price of it? So am I using your any grid view? Am I using any list view? Am I using any buttons? No, it's so elegant. Simple and I can keep it as dark mode, light mode. So even though this doesn't look complicated if in the flutter language, if I have to speak all they have used is a column widget and they placed it just one below the other. It is pretty simple as that. So there's nothing complicated. So U I doesn't mean you have to come up with fancy animation, fancy designs, uh beautiful colors, no keeping it minimalistic, understand who your audience is, who's gonna use it and you need to do that kind of research also.

So if your app is being used by kids don't go for this complicated uh design, definitely kids would not be interested to keep on scrolling or clicking on buttons. They want things at a very faster rate. If you're designing it for someone who's like above 50 then you definitely have to keep it everything in detail while explaining or while designing an app. So understand who's your audience? What kind of screens are being used? Uh what kind of mobiles are used and then start designing process. So as I told you designing an app or the design theory itself is another subject. Now coming. OK, you might say come on. Now, I understood the design process. Now, tell me what are the tools that I can do or that can help me in designing an app? Definitely there are tons of them in the market. So to start up with, we have something called the app Mission Tunkel, Adobe XT. Now I'm talking about all these are very common and also very exclusive for flutter. Also, if you're a flutter developer, I would suggest that I'm not gonna hire someone to design my apps unless if it's a professional one or if it's a business purpose, these apps, I mean, these tools also help you design apps and it is very easy to use.

Now how easy it is used is let's take the first one, let's say app mission. So it's a simple wireframe. It's just one developer I want to do it. So you have a very simple block, drag and drop kind of features. I'm just gonna drag, say this is the design, this is the block, this is the email as and this is how it is gonna go very simple, effective. But I wouldn't say it is a wow uh tool to go ahead with it. There is something called t a better version of a app machine uh where you have screens, you have images, you have these button components here. So if I wanted to switch all I have to do is just drag and drop here. But there are templates which I'm missing, which is what I'm looking for and there is no animations here. There's no uh very uh detailed component characteristics available here. Uh OK, I design her. Then. What, how am I gonna take this design to my application? OK. Then you might say OK, Kamal, you know what there is this uh export where you can export it and all. Uh so OK, fine. Then I'm gonna get it as an image again. But again, I have to do with something from scratch. That's again going to be time consuming for me. So that's again, not effective but better when compared to the normal uh drawing on the paper, right?

So this is far better if you really wanna give a try uh as to how designing really works, then there's something called as Adobe XD. Everybody must have used it if you are part of a design team and there's this plug in exclusively for flutter. So all you have to do is install this plug in on your Adobe XD. And whatever you do here is what you get on your code. So the entire code gets downloaded and you have it here. I don't have any issues with the plugins. Give it a try. Uh But you have to be a good designer with all the cropping blocks, grouping and grouping. All this has to be done by you. So you might say Kamal, you know what uh I'm really interested in Flutter. I have a design in mind. I'm not a designer. I'm not good at Adobe. So tell me what is the easier way to do it? Definitely, we have something more interesting, easy to use so that you don't have to strain too much into all this designing part. So as I told you, the Adobe XT, the moment you kind of OK, let me put the moment you kind of uh draw something and say explode all the widgets which is in the bottom left corner, the blue button, you get this code. So instead of me writing all this box decoration border box shadow manually, I can get this done on the Adobe and I can get this uh viewing it on my XX code, not X code, yeah, X code or visual studio, whatever ID you are working for.

So you can get it easily done. So that is how easy it is. But yeah, these all are traditional approaches. I'm absolutely fine with it. Everything looks fine, but there are still some loopholes, you know what there are, I'm happy with it, but still I'm not happy with it. That is the kind of response I get when people using this. So we'll see what are the traditional approach as a developer? We know we use github day in and day out. We kind of integrate things we want everything on the repository so that it's easy for us to download everything. So that kind of github integration is not available on all these app. Maybe they're working on the feature right now, but as of now, we do not find them. And as I told you, whenever we have widgets and components in flutter, we need to have a very fine grain control of it. I need to animate a particular component. I need to slide a component. So those kind of features are not available on these traditional app designing techniques. I'll have to do is exclusively in my application that I have to enter a code. I have to do it exclusively, not very user friendly, definitely not, it is very old school style. And so a lot of other things that kind of helps us with flutter flow. So these are the few things that help us.

So before that, let's see what flutter flow is all about. So flutter flow is this first designing kit exclusively designed for flutter developers. So if you're a flutter developer, you have a design, I mean you have a design, you have an idea and you wanna develop an app, you don't even have to have a code editor to do it. All you need is a flutter flow tool. It has everything starting from integrating into Firebase, having maps designing your app, even publishing your app, everything can be done using flutter flow. So the tool is just not a design tool. It's a full fledged app, developing design tool to publish your app. So if you haven't checked it out flutter flow, you can just type it on Google and you'll get more details about it. So it's a low code builder for native mobile application, simple drag and drop. That is the kind of interface everybody would look like. I'm not gonna say OK, type switch and I'm going to design a switch. No, you have a lot of options to drag and drop a design tool first time which creates IOS and Android apps. Tell me which app really does that. You'll have to select the screen, you have to place all the content and then you have to copy paste and then you have to change the screen. But here simultaneously, it kind of creates the both ios and Android app leverage integrations.

So definitely you can integrate a lot of um apps into it. A lot of plugins like Firebase Google Maps. Um I wanna connect cloud, everything is possible. You can also connect your github. So you're designing your coding and you also you're able to connect it to the github so that you can easily track updated, modify, do all kinds of forking, share it with the team. And you can also view the code on the browser. That is the most ultimate beauty of flutter flow is it's the first design tool which will also give you the code equivalent to flutter. So initially if I had to design something, I design it, download it as a JPEG file and then use that JPEG file in my um ID and then develop applications, right? But flutter flow does that all for you and give it instantly so that you can focus more on the functionality part, right? Because you are here not to keep on focusing on the design part, which is not your genre right now. These are the simple templates available on flutter flow. So if I have to develop the same thing, say let's for example, let's take the car model.

If I have to develop this using flutter, you know, I'm gonna take at least minimum 1 to 2 days to get this proper crisp look actually. But with flutter flow, I can just do it in 2 to 5 minutes. That's how easy it is. If we have templates even it's just one minute. So it's just not templates. If I really want to change this image, I can change it to another merchandise or some beauty products. Or if I want to change the button from here, the switch on and on into a notification I can change. So everything is customizable here, whatever you see on the screen on the mobile, everything is customizable. So instead of a list, I want a grid view, I can do it instead of icons, I want different, everything is possible. So you you can add a gradient structure. So instead of this visa card, I want a carousel slider with images where I can keep on sliding it, I can do it. It's that easy. Now, coming to the widgets and components in flutter flow, the flutter flow tool, I'm gonna show you uh how the flutter flow tool looks like, but this is how the components look like.

So if you're a flutter developer, you will definitely understand this language, text image, column row, a bar container image. So if you look at it, you know, OK. You know what easy it is. I just want a toggle icon. I'm just going to drag and drop here. OK? I need a Google Maps. Here it is. There you go. So it's that easy to get things. So the person who has designed this flutter flow has been a flutter dev but you know what are the hassles or what are the issues Florida developer faces? And what are the things that he can make it um iterative or something? Uh Instead of he uh we reinventing the wheel, I'll make it something reusable so that the developer doesn't have to spend too much of time on it. So if you look at the GIF here, it's so easy to set it, set it up. And if you click or highlight on a component, you can see that particular text gets highlighted, you can change it, you can change the color, you can change how the look and feel of it. On the left corner, you can see the components widget tree and on the right, you can see that frying grain, controlling part of each component on your screen. That's how easy it is. So whatever you see on the screen is editable and you can customize it.

So if I have to create an empty screen, this is how the builder looks like. So I'm gonna look for a component and see what I can do. That's the widget tree. So you click on the page, then you have something called Collection Firebase. As I told you, it's easy to connect to the Firebase API configurations is possible. You can store all your images here. If you have custom ones, custom codes, you can do settings. Absolutely possible. And also you can find the device there as of now, it's iphone 11 pro. So you have set of almost like 20 to 30 devices connected so you can start using them. OK. Here, I've taken the simple exam again, the template. Now I'm gonna take the car. So you can see that I have so many screens. I'm changing the screen. I'm clicking on a particular list view. I'm making it to the end. You see how it got shifted to the right and then again, I'm making it center. So if I had to do the same thing in the code, you know where I have to do it right. And as I told you, the best part, I can see the entire code available, whatever screen I design, I can see the code so I can either download it or I can just copy, paste it. So top title, I can focus on each element and you can see how it kind of highlights the text. I can in fact edit it here also. Or if I'm more of a designer, I would go to the builder and edit it. So that is also possible.

Trust me. After using this tool, you won't feel like doing anything manually. Everything is available here from alignment to padding margin, scalable crawl, everything is available here, even every customization. So as I told you this particular canvas area of the flat of floor, it has a dashboard page component, U builder, widget tree and then fires store API calls custom function settings. And at the same time in the right corner, it has all these details. You click an item, the particular text comes which page you're selected, you wanna create components, properties, everything is available and animate a text. It is possible. So whatever you see the tabs there, you can animate individual components. So as I told you, the drag and drop is really very easy. So you can drag and drop components and you see how they're dropping components inside a column view and then kind of checking the widget properties as well. So if I had to do this the same thing in the coding, you know how much time it would take for me here. I'm doing it in seconds. OK. Few more features. As I told you as a designer, we would be only given to design things and it would be a static part of it, right? But the first time we have something called this flutter flow, which also gives us an customization.

Firebase action API calls deploying advanced functionality, excuse me. Yeah. So it's just not about designing part. It's also about integrating because app is all about integrating, right? So it gets you integrated with Firebase. So if I have to set up a firebase, I have to go to the Firebase portal, set up my app, download the JSON file and then uh kind of create tables and do all that. You're also you do the same thing but you're you're connecting your design itself to the fire base. So it is making things a more faster for you. Now, as I mentioned, templates, pages and components. Yes, extensive predefined library templates are available. You have tons of libraries, tons of templates available. So if you find something not available as per your requirement, you can change it and just drag and drop and use it there. So as I told you templates, this is the one. So say for example, I'm going to create a social login page. I need a log in button and this is how easy it is to drop one below the other. And I'm good to go, I don't even have to uh integrate login functionalities here, whether it is a social media connect or any other templates.

So if I want to add a components like this, say for example, um I have to add a pop up saying there is this wifi not working. So definitely I have a prebuilt component here. I have to just drag and drop it. I want to switch in this particular pattern which is like pickup and delivery. I can use this. OK. This is another interesting kind of a list view with the color code on all the sites you can use this. These all are readily available. You don't have to design it. All you have to do is change the color, change the text and you're good to go Firebase. As I told you, Firebase is one of the integration part where you can easily integrate it. So this is another card example. It's a similar way I can insert a card, add something there as a column and then start adding images here. So I'm gonna say I'm gonna add it like stretch part and then I'm gonna say add image. So instead of having um image in one corner, I can get it expanded full mode. So adding coming from an app development background, creating this image, creating this text. I know how much time it takes for me. OK? So if it's firebase. I have to create a flutter project, then create a Firebase project. Enable access, configure, copy the project ID, generate configure, then finalize setup. This is the usual procedure, right? But here you don't even have to do it all.

It's set up, just create that firebase and you're good to go coming to the code view. As I told you, it's one of the best part about flutter flow design tool is that you can view the entire code of whatever you're deciding. It's just not the static file, it's the entire file. So a couple of other integrations are Firebase Tribe Google Maps, code Magic github, some revenue cat, Algia. It's one of the search search engines. You can even implement search engines in your design. And as I told you, as a developer, it's always important to keep yourself updated with the latest release, right? So the one of the latest releases, it supports multi-language. Show me a design tool that actually supports languages that supports components that supports of viewer to.

So if you are a person, you have an idea in mind, you wanna develop something. Um But you don't know which tool to use. I'm not good at hiring a designer. Give it a try flatter flow is the tool. So if you really want to try flutter flow, I'm gonna freeze the screen for like 2 to 3 seconds. Uh or more than that, you can use this link. Definitely get a discount, try it out and see how it works. So giving it a try checking out if it really works or not is a trade of Double park. So see how it works. And do, let me know and if you've already tried, let do share your experience in the chat or you can connect with me on any of my social medias and share your experience as to how you work with flat or flow and any interesting thing that you found or you would like to share and you can connect me on all these links.

I'd be glad to connect with you and share and know about your experience as well. Yeah, that's it for today. I think I uh I think as a developer it's uh there are a few things. First one, always keep yourself updated with the latest technology. You find something very pertaining to the de uh tech that you're working. Give it a try. Do not stick to old school style. Always whenever there's a new tech, explore it and see how innovative solutions you can come up with. Right. Thank you so much for hearing my session. Have a nice evening. Bye.