Write 40% less code in Flutter - Dream or reality? | Functional Widget

last night i had a dream i had a dream that instead of 4-6 lines of code i could write same widget in 26 lines of code but then i woke up captivated by my dream i decided to investigate if it's all just a fantasy or it can actually be achieved in reality i took a deep look at my flutter code and start thinking what can be done to make all this shorter and more enjoyable what can men do against such reckless hate when i saw flutter code for the first time i was amazed i was amazed by how much boilerplate and nesting can be seen in a relatively recently developed framework the truth is things had to be done the way they were so we could have such a performant and effective cross-platform framework eventually you had to make peace with the way things are and focus more on how to make good apps than how to make flutter look better meanwhile i figured that combination of some libraries can make my code much shorter this comes with some caveats though but i'll let you be the judge a library i want to show you today is called functional widget and it was created by the author of provider riverpod flutterhooks and fries a young french chap called remyrusola thanks remy now let's get to work let's open up popspec.yml and install required dependencies we'll add functional widget annotation under dependencies and functional widget and build runner under dev dependencies the idea of functional widget is to replace widget class boilerplate with the function if you take a good look at my home page widget you can notice some redundancies things are passed through constructor then held in fields we have this call to super and key prop we rarely use on the other side we have boilerplate of the stateful widget while everything we are mostly interested in is contained inside this build method if we could just erase everything else and keep the build method with some additional parameters things would look so much better and that is exactly what functional widget package is trying to achieve the only problem is widgets are classes and there is no easy way to convert them into functions at least not with dart the way functional widget package gets around it is with code generation code generation is a popular method to bypass limitations of dart language and some popular packages like json serializable and freeze are using it let's have a look how we can transform our widget class into a functional widget first we have to specify where code for this file will be generated adding dot g extension before dart is a must and it's indicating that file is generated and should not be modified by hand by default generated file must be located next to original but i'll show you later how we can change that a functional widget is a function with same name as your widget but starting with lowercase it returns a widget and can have arguments like build context key or your custom props that need to be passed you can think about it as a build function which gets props through function arguments whole function must also be annotated with s widget which marks this function to be translated into stateless widget there are other annotations you have on disposal like hook widget if you use flutter hooks or hook consumer widget and consumer widget if you use riverbot the interesting thing is there is no stateful widget so how can i update my state and force changes in the ui the answer is you cannot use stateful widget because you'd bring back all of its class boilerplate functional widget was designed to be used with flutter hooks or river pod and that's great because our code will get even shorter once we start to use one of those libraries for example we can achieve same counter functionality with only one line of code use state is basically of wrapper for value notifier which gets automatically disposed after widget is disposed you can learn more about flutter hooks from my other video it is very underrated and super useful library which i recommend and use in every project our widget is now completely transformed into functional widget and we can start a conversion process open up your terminal and type flutter pop run build runner watch this command will start build runner we added as a div dependency inspect our files and generate dot g files build runner test can also be started by pressing ctrl plus shift plus b and selecting build runner from the list task will automatically generate files as you save changes but you shouldn't forget to run it next time you open your project after task is done we should see generated files in our project tree right next to originals if we inspect one of them we can see it contains all that class widget boilerplate we didn't want to write and returns function we are actually using in the original file remember we specified generated file as a part so those two are basically connected together and that's the whole trick hide things you don't want to see or type into separate file and use syntactic sugar instead now let's get to our main file and do the same transformation notice that by doing this we already saved couple of lines and got rid of ugly trailing brackets at the end of the widget when it comes to composing functional widgets you can easily get confused by thinking widget is now a function and it should be called as one that is wrong widget is still a class as we realized by looking into generated files that's why we are calling it as a class if we run the app we can see everything is working as expected while we made whole project lot shorter and more readable that's a huge victory right well yes but now let's talk about some comments of functional widget i don't know about you but i don't like the fact files get generated next to other files in my project tree you can imagine how ugly it must get when working on large projects with lots of widgets and all of them having a generated file next to it for that reason i'd like to move all generated files into special folder so they won't get in the way we can do that by adding build.tml file in root of the project and pasting following configuration build.tml file contains instructions for build runner and here we can specify that all generated files must end up in one folder now let's also correct paths and save files we can see all generated files are now stashed away in one folder let's say we want to move files around and create home folder moving home file into home folder won't automatically update part pad correctly so we have to do it manually after saving we can see our project structure is reflected in generated folder which is cool there are a couple of annoyances i came across while using this package you are most probably using shortcut for widget extraction when widget 3 gets nested too deep if we try to extract this widget we'll end up with standard class widget and we have to update the code to turn it into a functional widget unfortunately there is no extension to help us with that another thing you might find annoying is that go to definition or pressing f12 will open up generated file instead of function this is definitely not what you were looking for so you must go through another step to get to the function doing this will also reveal generated file in explorer and therefore expose folder you are not interested into some of you might find this annoyances as a small price to pay for getting all the goodies while some of you might think it's not worth it so what do you think let me know in the comments below

Channel: Avalanche

Views: 7,901

Keywords: flutter, functional, widget, hooks

Id: K3j06y_k4zM

Length: 7min 21sec (441 seconds)

Published: Mon Apr 04 2022