 How many here are Android developers or iOS developers? Android developers, please hand. iOS? Reactive? Any other? Alright, so my name is Pooja Pomek. I'm born and brought up in Calcutta, living in Bhuvaneshwar, coming here from Bangalore. And I'm also a mobile developer. In fact, I always thought that I was in love with Android. But recently, I might have started an affair with Flutter. So, I mean, I'm still in love with Android, but Flutter and I have this great connection, you know. So, what went wrong? Now, it was a three years relationship if you do not count that chasing period where we were getting to know each other. But Android is awesome, Java is awesome. But after a certain point of time, it kind of became a little too comfortable and not so much fun. You know that spark? That was gone. I had that phase in my life where I wanted to try out other frameworks. So, I thought to myself, I really do this one thing my entire life. So, I tried out React Native, I tried out Ionic, I even tried out Web. Because everyone was doing it anyway. But it was a big jump for a mobile developer because I'm not just cheating on Android with other mobile frameworks. I was considering other platforms. But anyway, it did not work out. I just could not understand them. It's like all of them had the same upbringing. The soul, the personality was so much similar. I thought Java was better. So, I joined this company last summer where my boss tells me, hey, this is Flutter, be friends with it, it's new to town. And I was like, yeah, I'm getting paid for this job, so why not? But one thing led to another and I kind of stopped talking to Android. Flutter made me realize what it's like to be a mobile developer. It was fresh, it was like feeling like me again. So, what is Flutter, by the way? By the way, however, I narrated that story, it is completely true. That is how I met Flutter. Now Flutter is a cross-platform mobile development SDK that lets you build Android and iOS apps from one code base written in Dart. Now, Dart was completely new to me. I hadn't even heard of Dart before that, but I was relieved it was not another JS framework. It was even better. It's like you picked up the good things from both languages and then you made Dart. And it was pretty easy to learn. If you are coming from a Java Oop, a JavaScript background, then you can pick up Dart pretty fast. I actually picked up in literally under a day. Whatever you need for Flutter, I picked up in under a day. Flutter also had this amazing thing called the widget, the catalog of widgets. Now, with these catalog of widgets, I can build features that might have taken three pages of code in native Android, but it takes only like five lines in Flutter. Now, you might not know what widgets are. Now, widgets are like components or blocks that define the user interface in Flutter. The app bar might be a widget. The text on it is a widget. The style that you apply to that text is also a widget. The padding around it could be a widget. Even the empty space could be a widget. A whole lot of widgets. Now, let me show you how we actually create a widget in Flutter. So, we have something called like, suppose we are creating a home page, we will extend it to a stateless widget. Now, we also have some staple widgets, but that is not the scope of the stock. I will skip that, but we have extending stateless widgets. Now, we have this build function under which we will build anything that is on the UI. Everything that comes in the UI is under this method. Now, suppose we return a scaffold. Now, scaffold is a widget that lets you have elements and components that is required by a mobile app screen, such as a app bar, a body, a floating action button, a drawer, a bottom navigation bar, a bottom sheet, background color, etc. So, suppose we have a scaffold like that and we can want to create an app bar, we give it an app bar widget. Want to create a drawer, we give it a drawer widget. Want to create a floating action button, give it a floating action button widget. Bottom navigation bar widget. And body is everything in between, basically your content of your screen. So, that's how you build a simple app. That's how it will look like with an app bar, a floating action button, and a drawer, and a content. Now, we are going to play a game. We all are from different frameworks, right? How many are for Flutter, except for Google? Okay, others are from Android, React Native, iOS, etc. So, I am going, though I only know Android so I am going to ask mostly about Android anyway. But I am going to show you features or components that have, that you must have built in your mobile applications and you have to guess how many lines of code it might take in Flutter based on your experience of your mobile framework, right? So, keep, so you must have seen a feature like that where you have like, you know, content that you can slide left or right, right? Something like, I think in Android we call it a view pager, right? So, how many lines of code can this take in Flutter? How many for more than 50 lines of code? Raise your hands. How many for more than 30 to 50? How many for like 15 to 30? And how many less than 15? Okay, so for view pager kind of a feature we have in Flutter something like a page view, okay? Similar name. And to make that possible, we have a body that takes a page view widget and it takes the children off screen contents. So basically here we have a page one widget and a page two widget which is nothing but in my case a colored container like a blue colored screen and a green colored screen and almost that is it that I require to create that sliding effect. You can also have more features like giving it the page controller and giving it a viewport fraction like I just want the content to be on the 80% of the screen so I give it a viewport fraction of 0.8 and we can also give it a full direction as vertical or the full direction as horizontal and all of that was done in 7 to 9 lines of code. Moving on, we have this really crazy design I don't know who came up with this but then as developers whatever designers will throw at us we have to develop it, right? So as a developer I have to design this. Now how many lines of code can this take in Flutter? How many for more than 30? Okay, no more. How many for more than 15 to 30? Okay, too confident. How many for 10 to 15? And 5 to 10? Less than 5? Who are for less than 5? What the rest are? You can vote in basis of your... if you're not paying for Android, you can just vote. Just try it out. So okay, so yeah, crazy design, fine. Now we have obviously have to build on our bottom bar something like that which has a menu icon and search icon and for that remember we had a bottom navigation bar and staff hold we can give it a bottom app bar widget again a widget. Now we can give it some icons which is the row of icons icon menu, icon search, fine. Not a big deal. Now for the floating action button we have the floating action button widget which is also fine but we want to give it to the center location. So we have a floating action button location to center dot. Now we are almost there but again you remember the floating action button is digging the bottom bar. Okay, crazy design again. So we still don't know how to have the digging effect. For that remember that we had this bottom navigation bar widget bottom app bar that was had a lot of code. Now give just two lines there shape circular north rectangle and north margin and everything. That's it. You require the entire thing was done in 10 lines of code but that effect was done in only two lines of code. Now we all have worked on some feature like that component like that. It's kind of like a collapsing toolbars, right? So this does take a bit of code and right I guess and how many lines of code do you think it takes to cut off? So more than 15 lines of code. Now nobody will pick up their hands for that. Okay, more than 5 to 15. Okay, less than 5. Okay, thanks. So we can do something like this with slivers. Now we have a body. The body will take a nested for you something similar to like Navy man role. And we have a body which is basically the content below your increasing abbar which is the main content and you take a header sliver builder which returns sliver abbar. It's not a normal abbar, it's a sliver abbar that can increase the height and it can do a lot of other stuff. What other stuff? It's sliver abbar can give a take a flexible space for widget which is basically that abbar that it becomes after you have stored up. So it will also take a background which is once you have stored down the image that you see once it has stored down and you can also give it a height of that image if you want to fill it the entire screen or if you just want to have a little bit of screen 30% 40% whatever and that's all. It took around 12 to 14 lines of code to create that. Now we all have some cards like that where we have to create into a list. Okay, so we have a card like that a Pikachu card like that and I want to create into a lot of other Pikachu cards, a list of cards, right? So I have been just talking about Trutter, code and all that. Let's just talk about how much it will take actually in Android, native Android, Java. So we all whoever from Java, Android they know that we have to use RecyclerView adapters, right? So RecyclerView in Java the first steps add the support library add RecyclerView to your layout connect it to your layout manager attach an adapter add a list adapter and it took around 39 to 45 lines of code just the boilerplate code I'm not even talking about what is inside that card it could just be a text but just the boilerplate code of making it possible took 39 to 45 lines of code. Now are there any Kotlin party supporters here who are going to say, hey why don't you use Kotlin it will reduce the lines of code. So yeah sure for that the next it is going to take 28 to 34 lines of code even in Kotlin. Now tell me how many lines of code it takes in Trutter. So raise your hands for more than 15 lines of code no, more than 5 lines of code ok less than 5 lines of code alright so we have something called a ListViewBuilder and so it will take a ListView.Builder it will take an item count which could be a dynamic number or it could be a fixed number and it will take an item builder that is going to return that card. It could be a text card, it could be anything and that's it. In under 3 lines of code. I am still talking about the boilerplate code I am not talking about the card. So yeah 3 lines of code for ListView. Missile review adapters I am looking at you so now remember that card that we made let's see how we actually build that card. So we have a row. Now why a row? So row is basically because we want to place elements one after another in a horizontal manner and we want column when we want in a vertical manner so if our rows decide each other we have the first element as a circle avatar which is basically you know circular image view and all with the cute Pikachu image and we have a text Pikachu text. Now if suppose we want to make a detailed view like click on it and it will open a detailed view. So it will look something like this probably now it will obviously have a column because it is placed one after another vertically. So it will have a bigger Pikachu image and some more Pikachu information. So when we create this application it will look something like that. Now it's fine but Pikachu does not like that. Pikachu wants to fly around the screen like that. Have you done that in any of your mobile frameworks? Right? So based on that experience how many lines of code will this take? So it's some kind of animation transition animation if you remember. How many lines of code will this take? Any animation takes time. So anyway so more than 10 lines of code more than 5 less than 5 Flutter yes less than 5 Anyone for less than 5? Like I'm bidding but anyway So we have something called Hero animations in Flutter Now why hero because it is flying around the screen but by that logic it should have been superhero animations but anyway so remember that circle after we had in that list card just wrap it up with a hero tag and give it a tag. Remember that tag and remember that bigger Pikachu image we had again wrap it up with a hero widget and give it the same tag. That's it You have that transition animation done and Pikachu is pretty happy because it took only 4 lines of code So let's move on to our last feature. Now we all have these features where we have apps where we have like a part chart kind of thing and it's kind of like a rectangle that basically increases the height according to the values So we make something like a similar simple app like that where we have a container which is just like a div kind of thing so we have a fixed width and we have a height that changes and some color Now when we have an on press button here like that and we give it a set state to bar height to 320 So basically it will change the value like that but obviously it does not give that animation effect. We want it to gradually increase the height So we have to use animation Now animation in any framework is hard So how many lines of code I am going to take like 5 lines of code or 10 lines of code. I just want to take a little more So go properly. So more than 15 lines of code Oh somebody is nodding. No it will not take more So less than 15 5 to 15 Anybody for less than 5 So we have something called an animated containers in Plutter Now remember that container that we had with other width increasing height and color Just replace the container with an animated container and give it a duration That's all. That's all you required to create that transition or the increasing animation effect and all of this was done in one extra line of code So if you create a complete application like that it will look something like that if you create a bar of chart application You know what that looks pretty similar to something that I have seen before I will just very quickly move on. So let's move on to Flare So Flutter has partnered like this December They partnered with Flare to improve animations They want to improve animations really more. Okay So they partnered with Flare and now you can create your animations in the Flare tool with keyframes and all and you can add them in your Flutter project Again it's probably going to take like one or two lines of code Just to adding the animation it will take like one or two lines of code If you want to do more like if you can see here that the teddy bear whatever is actually looking at the password or you know the cursor. So that will take a little like three four more lines of code But yeah, the nothing is very very easy. Now you can have all these crazy animations and just if you're a designer that's so good for you because now you can have all these amazing animations and just add it to your Flutter project That's it. Alright You can do all these amazing stuff with Flare. Now So this amazing stuff that is possible like all these impossible features are now possible but it also takes one third of the original estimation for Flutter. I finished two beta versions of the two projects in under two months while I was learning Flutter and in the same month I wrote my first technical article about Flutter which kind of got a little viral and then it led to more articles and then more opportunities and here I am standing in front of you Now all these crazy projects that you can build literally that your creativity limit is literally your sky, literally the sky Now fun fact the first version of Flutter was actually called the sky so yeah, literally the sky Now if you are actually going for any mobile development interview or you're starting a freelancing journey and you don't have much client projects to show you can use Flutter to build creative projects in under less time and have a very promising portfolio for yourself. Give an example of a very respected Flutter community member who she had built this Flutter Solitaire app and a minesweeper with this windows, old windows UI in under 6 hours for each app. Imagine if we had an interview in 10 days, how many apps would he have need? Now Flutter is literally bridging the gap between the designers and developers. Now if you are a designer and you want to build quick prototypes for your designs you can use the Flutter's catalog of widgets to build them and also add interactivity to your prototypes. Now developers and designers never had a common language for what developers designers would call the floating action button developers would call the circular button with an icon in the center So even though I am a designer and developer both I do know my material design terms but sometimes I do forget and I do Google stuff like these. But I do know what I want but I do not know what its name are names are. Now you are really spoiled for life. So this is one of the tweets that one of our members had given which is like Flutter is both a godsend and a curse It makes everything so easy and efficient that using any other technology becomes a pain. That is so true. If you are literally coming from any other technology and you are using Flutter I think you will be spoiled for life because you won't want to go back to native android because listen you see the presentation like how many lines of code it took for all these features the ease of development makes your life so much easier that you don't want to go back but yeah adult life you have to go back sometimes anyway but it depends on what job you are doing but yeah so now you can build any kind of apps that you want to build in that is the aim of Flutter but I wouldn't suggest you to build a use Flutter for apps that are pretty pretty strongly dependent on hardware API like using the acrometer or maybe like the vibration or something like that but if you have already started an application in Flutter and then you realize that you need this hardware specific API you don't have to scrap of your entire project Flutter lets you build the android and iOS code right in your Flutter project so if you have some kind of hardware specific API that you want to use then you can you can write them in your android java kotlin and your iOS swift project and have the results returned back to your Flutter project so that makes me feel that I am not even cheating on android anymore so now these are some of the applications that have been like Flutter community members have just tried out and these are not the actual apps screenshots of youtube, twitter or medium or and these are actual apps that are on place or an app store and you can use them so this is some of the applications that have been made by the community members of Flutter just look at amazing animations the fluid designs, fluid animation 50 fps and I think we can imagine the time it took to make most of these applications so yeah, that was all the applications that were curated from all the Flutter community members from around the world who are made for their probably the companies or for their project so that's where you can learn all the stuff from Flutter you can also learn like github and youtube channel where you can learn Flutter from thank you thank you Buja, any questions?