10 Flutter Tips to Be More Productive

learning some small ins and outs can really make a difference in your long term productivity in flutter that is why we are going to go over 10 tips and tricks that i found and if you like this kind of videos make sure to hit the subscribe button and like the video make sure to also hit the notification bell and let's get started so for tip number one which can be quite controversial is using a lot of packages now the reason this is the first tip is that most of the times you want to get a early mvp or a version out of the app as quick as possible now in my opinion it's more worth having an app out quickly so you can refine compared to the user feedback instead of wasting a lot of time for development that may not be needed so for example if you want to have a search bar in your app why not grab a package for it in the beginning and later on if you want to add your own implementation of it you can do that instead now of course use the reiterate when you have the full application fully done maybe you want to reduce the packages that you have in your app now going over to tip number two which is utilize snippets so if you find yourself doing something very often you can configure snippets for it so in visual code you can use hit f1 and search for snippets and you can create a new global snippets file or if you already have one you can add some more snippets to it for me i have three snippets that i used almost all the time which is the different test snippets and fundamentally snippets is not hard to create you define a body and a prefix and you define how the code will be laid out so make sure to try it out it will really help in the long term now coming up with the third tip we have use linting early so i will demonstrate what linting is and we will do that by just using a package i will use pick lint for this one we can see here how we can actually implement it so first we go by just adding the div dependency for the lint package and later on we will include that analysis options file so moving over to our project we will navigate to the root of the application and create a new file this will be the analysis options file and inside here we want to add our package later so let's go ahead and add our package in our pubspec yaml file here we just take the lint of version 1 that is the version of as of now so if you have a newer version you speak that so now moving back to our analysis options yaml file we can go ahead and include that file coming from the package this will give you a set of rules for your flutter application so for example if we navigate to main.dart we can see a underscore at the home page or a warning and we can see that in the problems tab in visual code we can see that it says prefer const with constant constructors so as our constructor on the home page is constant we can go ahead and add a const modifier this is just a small one and if you have a very big application you will probably see a lot of the different problems so i recommend doing this early going over to tip number four we have used the tooling now you probably already noticed that i used the tooling in the last tip but the tooling can be very beneficial in a lot of different scenarios so i will start by nesting a couple of containers and after a while when i'm done with that i will go ahead and extract that into a separate widget and here you have all of the different tooling options and just by using that little tooling tip we are going over to tip number five and that is using multiple private widgets so as you remembered we extracted a widget now what we will actually do is just prefix that with a underscore and calling it to something that makes sense now what we just did by extracting that widget is that we reduced nesting for quite a lot and we can also see that we now have a container which we probably don't need and we can use the tooling to remove that one and as help of the linting system we can see that we have a close constructor meaning we add the const keyword and down here we can see some linting problems again which just states that we shouldn't use empty containers so for this case we'll just replace that with some sized boxes now of course that's pretty much the same thing but this is used to illustrate a point now moving over to tip number six we're going to take a look at how we can generate the app icon and splash screen making it a lot easier than doing it manually so to do that we have two different packages we have the flutter launcher icons and this one will help us generate the different icons that we will have for android and ios and i promise you this one will save you so much time that you will not be able to do it without this the next time now flutter native splash is another package which i actually found out by a tweet made from bo blail over at twitter and this will make it as well super easy to create those splash screens which is native for your application so if you found this tip valuable i recommend going over to his twitter and following him he has a bunch of different tweets that are great tips and i will link that in the description so moving over to tip number seven which is new aware operators now there are a bunch of different new aware operators i will discover two of them but you can probably use search for that one and you will find a list of the different null aware operators so for simplicity's sake i will just create a method and we'll define a new variable and make it null now if we would have null safety we will get warning when we try to return name here as the string is not nullable and the solution to that as well as this code is that if we have the name to be null we can use a nullable operator with double question marks and that will mean that if the first value is null then the second value will be the one that's going to be used so having null here the sum default name will always be returned so of course if we replace the null value there with the name variable instead this method will now return the name if it's not null and then return the string if it is null another case if you have a variable and if it is null you want to assign it to a different value you can use double question mark equals and you will assign to a new string or a new value if that name variable is null so in this case it will always assign to that specific value but these are used two different ones and i will try to link some kind of blog down in the description where you can read more about these different operators now for tip number eight we have reuse x of context so in flutter you have probably seen the inherited widget of film and to illustrate this we will just create a new widget and i will just call it a lot of films so let's say you would have a column with a bunch of different texts and all of this text would need the same kind of filming so in this case we will have a text with the text hello and we'll have the same style for all of those texts which is the body text one now we have two problems with this code the first one being that it's very annoying to write all of this code and it's very repetitive and right now we're actually doing seven inherited widget calls for the body text one so we can both optimize this and also make this more simpler by use defining a variable at the top of the build method in this case we'll just call it text film and then just assign it to the film of text film now you can use replace that in all of those styles and just say textfilm.bodytext1 and of course you can simplify it even more by specifying the body takes one and just defining the variable to be body text one my approach is usually used to find the text film and then using that with dot body text 1 in this case now moving over to the second last tip which is tip 9 which is utilizing the debug print now in some cases let's say you have a method which is just a network request and in this method you do some kind of request to http server and you get a response object back now i will just add some comments just to make this more clear and we are going to do some kind of fetching in here and we'll get a response object back now what you can do is just print that object and you will get that in the console but sometimes you want to have some additional information and when you want to do that you can utilize the debug print and this one will actually provide even more metadata about the response and it also requires a string so you would have to use two string or equivalence and now for the last one moving over to tip number 10 and we have the single responsibility widgets now you don't have to be familiar with the solid principles of course it would help but i will try to explain this as simple as possible so right now i'm just renaming everything to keep consistent with all of the tips and we will now create a new widget now what i mean with single responsibility widgets is that we are going to define widgets for specific tasks and they will not do anything else they will in sense have one single responsibility so in this case we will have a custom text widget which responsibility is to display a text with a custom style now what this will actually do for us is that we actually have a very much simpler implementation and we can make sure that this implementation is really good so for example instead of just having custom text we will have a custom headline text now the main purpose of this widget is used to display a text which is of headline 1. now we can make this even better by utilizing a constructor and a variable and passing in a new headline and now used to be consistent with our previous tips as we are not using this file or this class in any different file we're just going to make this private now as we are trying to keep with single responsibility we know that we can improve this one even further so as we are not using null safety yet in this case we could be able to pass a new value to this headline and then the text would result in an error so what we are going to do is first add in the add required this means that we have to pass a value to the headline when we're using the widget but the problem is still that we can pass a null so we're going to use an assert for that now don't feel demotivated because you don't know about assert or something like that we can learn about all of these things by going into the sdk of flutter so in this case as we are implementing the text widget we can shake the text widget and see how they handle new values so if we go ahead and control click the text widget we are going to navigate and see how the implementation looks of that widget and scrolling down a bit we can already see that they have a data is not equals null and they also have a text for that one so we're going to go ahead and copy that text and add it to our widget as well this will also make it easier when null safety comes and we want to implement null safety into our applications and just to make sure if you are watching this in the future and no safety is already in you won't need this specific assert as well as required will not exist so you can go ahead and remove the assert line as well as the add sign and you will have the specific implementation for null safety but as we are not there yet we will just go with the typical implementation of at required and a assert

Channel: Robert Brunhage

Views: 36,911

Rating: 4.9346604 out of 5

Keywords: Flutter, Flutter tips, Flutter Tricks, Flutter tips and tricks, flutter app, flutter tooling, flutter best packages, flutter tutorial, app development tips, Flutter linting, Flutter tricks, Flutter code tips, flutter guide, robert brunhage, flutter productivity, improve productivity in coding, flutter productivity tips, Flutter tips 2021, flutter tips and tricks 2021, flutter tricks 2021

Id: 14VtPQ1aoaU

Length: 13min 25sec (805 seconds)

Published: Sat Jan 23 2021

Reddit Comments

[u/RobertBrunhage]

As a lot of you have asked for it, I now have fully written guides as well!

https://robertbrunhage.com/videos/10-tips-to-be-productive

[u/ankmahato]

Nice.

Tip #11: Use https://fluttergems.dev

It has definitely made my life easier as a Flutter Dev.

[u/angelbroz]

Great video!

Keep up the good work