Introduction into Flutter - Flutter Architecture - Why I love Flutter!

hello everyone and welcome back to our channel we want to talk today about flutter architectural overview because we talked already a lot in this channel about very complex topics like how to create different widgets how you create animations and stuff but we well forgot about about flutter itself so what actually is flutter how does it work and how does the architecture works around it this is a part that we want to fix today and mata already started with the learning path of flutter which is like the introduction video on this series so if you are very new to flutter this will help you [Music] alright so flutter on its website states that it is the ui toolkit from google to build beautiful natively compiled applications for web desktop and mobile and also embed it from one single code base so let's have a look into the different wordings that happens because it's very important for us right first of all they state that it is ui toolkit it doesn't state that it is a framework or a library and they try to find a different term and i think that is very important because a library like react for example don't usually give you any boundaries you can do whatever you want on the framework on the other side you get like a frame for your applications that helps you to structure your app that forces you to use different toolings and you don't have any way to create something on your own but flutter tries to be or tells us that it is a tool kit so what does it is it seems to be lightweight because it just uses ui parts and gives you just the possibilities to create your ui but does not force you into any specific way on how you want to structure your application it comes from a single code base that is also very important of course because it is a cross-platform development possibility and actually one of the most important ones at the moment besides of react native that is very important to know because a lot of different surveys like for example stack overflow or the last flutter survey showed us that flutter is getting more and more popular across the development community which is also very important for us usually so flutter comes from one code base what does that mean and what is the codebase actually the codebase is written in dart and it allows you to create fast applications from it it also provides you because it is a ui toolkit with a lot of additional tools like for example the dev tools that let you show how your application currently looks and how it behaves from performance parts networking parts it gives you also this structure where you can see your widget tree we come to that part later and all these cool stuff on the other side you got also an improvement on the cli which comes out of the box from the tool kit so that means with the cli you can create a new application you can let run your application in the current state and you have the possibility to analyze your code so these two things already make a difference because not every library or framework offers these additional things okay but now let's have a look into the architecture of flutter flutter consists out of three layers you can say the lowest layer is the embedder on top of which is the engine and on top of that is the framework let's talk first about the embedder it takes care of the heavy lifting to translate flutter language or how flutter works with the underlying os system so for example you want that flutter is running on your playstation 5 or on your game boy you can create an embedder for that and with that you have the possibility to let the flutter runtime run on this machine that's not completely trivial but there are tutorials how to do that and there are also some crazy people who already did that on different devices so check that out all right so on top of this embedder lifts the engine which is mostly written in c plus plus the flutter engine takes care of the heavy lifting like input output network requests and also takes care of the difficult translation of rendering and takes for example the benefits of skier which is the rendering engine of flutter and converts your pixels that you want to draw and renders them on the screen so this is the engine which is usually taking care of the flutter developers because everything that we are talking about is open source so which means everyone can contribute and see the code inside but what does that mean is that the engine takes care of all the heavy lifting that we don't want to see as developers if we just want to create an application on top of that you will find the framework as you can see the framework is actually pretty small you have the material part we have cupertino that are parts of widgets so you can use them and this is the part where the most of us developers live actually because we can use these parts and work with them and flutter just renders the stuff so if you don't dig too deep into the whole framework or into the whole tool kit of google you will mostly live inside of the framework which allows you to use the widgets directly out of the box with gesture detectors and animations and whatever you want to use if you want to have something like a network request you usually would work with a package in that place so for example http or input output also provides you different packages so the flutter framework itself does not really restrict you from using whatever you want on the site so it concentrates really on the ui part not on the structure how you want to structure your application but before we go now further and talk about different other topics like widgets and pseudo declarative ui which we will maybe cover also in a different video i would like to talk first about the benefits that flutter brings us that not every toolkit or framework or library brings to us which makes flutter very unique in my opinion first of all flutter is open source which means you usually have it installed locally on your device on your developer machine which allows you to jump into every class and see the documentation right away where it belongs like in the class you get information above it also you get information below it because you get all the information about every attribute that you want and because flutter consists out of widgets which are nested in widgets which are inside of different elements you can go down the widget tree even inside of the flutter framework and you can read really every step that the flutter team did to render your pixels on the screen this gives you a lot of knowledge because you are allowed to really create everything from scratch if you want that is no problem at all in flutter another large benefit that i in my opinion is the cli you can create your packages and projects from that cli you can run your applications with a lot of commands flutter doctor is one of the famous commands because it gives you right away information about things that are currently maybe broken in your installation you can analyze your project for code problems like for example if you have a linter activated this gives you static analyzers in your code base then you will get the error and warnings inside of your command line all of that gives you a lot of benefits and you are able to to really use that if you know how to work with the cli so i would heavily recommend you to take a look into each command that the cli offers you a third benefit i also talked about that is the dev tools you need to take a look or take a time and create your first example app and start with looking into the dev tools so how can you create a widget tree how is it everything cleared up where it comes all these informations from you can see the performance you can see that and we will talk in another video about tef tools but i just want to highlight how awesome they are because they really include everything that a developer needs and you can even make performance analyzers checks you can see on one glance what is wrong with your app and this is really amazing another huge benefit that i see compared to for example react or angular if you're coming from a web space is a typed language which is strongly typed with that you will get always the overhead of a compiler or transpiler to get javascript out of it at the end but it is amazing to have a sound null safety system which allows you to really reduce the amount of errors that you do right away of course it does not replace tdd test driven development because the compiler can only see static problems if you make a writing mistake or if you want to read classes but it will not prevent you from bad logic another thing that is amazing and you probably heard of it is hot reload and hot restart this allows you to keep the state of your application and reload it with the new elements that you have inserted into your application this reduces developer time extremely and makes it so much fun to develop new applications because it's like drawing you can write something you get it directly into into your screen and you can directly work on that the fantastic thing here is that really everything works directly out of the box you don't really have to be worried that something don't works another benefit that i see is the integration into tools if you are using bs code or if you are using intellij it doesn't really matter or intellij is android studio if you are using vs code you get like a fantastic support from the flutter team especially also in android studio you can have like code completion wrapping of different widgets extraction of widgets you get cli implementations you get a lot of extensions from everywhere and for nearly no programming language for no different other front-end technology i have ever seen so much support for developers so it's really a quality of life improvement there and last but not least the most likely the best and most important benefit is the flutter community if you have questions and you are on the slack channel on the discord channel on i don't know in twitter i think if you are following a lot of people on twitter you get right away an answer to your questions and everyone in the flutter community tries to help each other so i highly recommend you to check it out and i would say this is probably for this video today i will take in the next videos an approach to talk about widgets and also what is the pseudo declarative design and all that kind of stuff and also we want to take a look into the flutter web architecture so stay tuned and thanks for watching till the next time bye flutter is google's ui toolkit to compile now to create websites from google to build beautiful negative applications for desktop web so flutter is a single code base that creates different applications for you no [Music]

Channel: Flutter Explained

Views: 22,387

Keywords: Flutter Architecture, Architecture, Getting Started, Flutter Beginning, Flutter Introduction, Flutter Intro, Flutter learning, Learning, Tutorial, Flutter Tutorial, Why Flutter, Flutter good, Flutter vs React Native, Flutter, Dart, Sound Null Safety, I love Flutter, use Flutter, Flutter CLI

Id: fSn9xK7YCvY

Length: 12min 0sec (720 seconds)

Published: Fri Jun 25 2021