35 Flutter Tips That Will Change Your Life

35 flutter tips and tricks when you start your journey with flutter you will quickly realize that there is too much file inside the explorer but there is actually one solution for this you can open the comment palette inside the view tab search for the file called setting the json and inside you can add this i will make sure to add all the code of this video inside the description and you can see that there is now four files nested inside the pubspec.yalm your folder structure is now clean but if you think this is cool there is way better tips inside this video now it's time to add dependencies inside your new project if you are like me and you go online to find the package version this is a big mistake because you can just open the comment palette and write add dependency with this you can search for any package and it will add it inside your popspec.com if you like to save time like this i have many more tips you can also generate big chunks of code by using the awesome flutter snippet extension most of the time i will use this to create stateful or stateless widget but you can also use this to create the init state the dispose and many other chunks of code this extension is actually a huge time saver but at this point we have a code format problem and i'm sure you can find it on the screen right now yep it's the const but we don't want to add it manually every time so i have a little magic solution for you you can go back inside the setting.json file and add this code this will make sure that every time you save all the cons will be added automatically i'm about to save the code right now and you can see that all the const has been added automatically and since we talked about shortcuts did you know that you can add multiple variable inside the same line of code in this way you don't have to write the type of the variable every time flutter will understand now that we have set up our project it's now time to code and my first tip is to define your code with very very small widgets it will be more readable and more clean but that's not actually correct because instead of creating functions you should create widgets and the reason is if you create stateless widget they will not be rebuilt inside your app which is better for the performance it's now time to create a notch for the floating action button for this you will have to use the floating action button location center docked and create a circular notch rectangle shape for the bottom up bar to make sure the background goes behind the floating action button you will have to extend the body you can even add a nikon animation for your floating action button for this you can use the animated icon widget and you can decide how the animation will look like in 5 simple steps first you need to create the controller and the animation then you define them inside the init state i used an animation controller and a curved animation the controller will not work if you don't have the ticker provider state mixing the fourth step is to dispose the controller and finally you can control the animation with the controller.forward and reverse but what if your code throws an error inside the init state this will return the red screen and nobody really likes it so i have a solution for you to never have this red screen again before the run app you will add the error widget.builder this one will give you access to the flutter error details which you can use to create your custom red screen now if i have a problem in my app this is what i will see i no longer have the red screen but a custom error page and now let's say you want to print something before the error but the message is just way too long well for this you can use the log instead just make sure to add the developer import the print message on the left is too long to be printed in the terminal the log will always display the entire message but if you still want to use the print you should wrap it with the condition is debug mode this one is accessible with the foundation import the next tip is how to create a glassmorphism design within your flutter app this will create a glass effect for your containers and you can actually do this in three simple steps you first need the clip erect then the backdrop filter and finally inside you have the container just keep in mind that this is one of the morphism you could also create the clay or the neuromorphism design i have a video about it on the top corner if you want to check it but the next tip is really cool let's say you want to change the color of the glassmorphism design with visual studio you could just go over the color and select a new color that you prefer and this will automatically give you the argb colors now let's talk about the scrolling fading animation at the bottom of the app i will show you the code but as always everything is in the description there will be something special in the code let me know if you can find it inside the stack list we have first the scrollable widget over this one we have the ignore pointer with the animated opacity and the opacity will be visible only if the value is 1. we can create a condition for the opacity add a duration and inside the container we have a linear gradient and the special thing was the comments with colors if you want to create such colorful comments you can add the better comments extension in your flutter app you can animate the transition between two widget with the animated crossfade all you need is to define the first child and the second child create a condition for the crossfade state which will return either the first or the second child and add any duration with this i'm able to animate the transition between the title and the search bar and now that we have the search bar we have also the keyboard what if i want to remove the keyboard as soon as i scroll well for this you can use the scroll view keyboard the miss behavior and you can use it either inside the list view or the grid view talking about search bar i have something pretty cool for you you can actually create super simple search bar within your flutter app you need to start by calling the show search and inside you will have your custom search delegate and for this one you will create your own class that extends the search delegate and everything can be controlled with these four override first you need to create a list of search terms if you want the complete explanation of the build action leading result and suggestions you can click the video on the top corner of this video or check out inside the description it's pretty much the easiest way to create a search bar with flutter but i would like my search button to also have an icon inside did you know that you could add the dot icon after the elevated button but i don't think it's enough i still don't like the shape of the button i think it would be better if it would be more rounded and for this i can use the shape stadium border at this point the buttons are very great but what happen if my title is actually null since i use the null aware operator i will have the default text to no title the null aware operator can be used to create a default value if the variable is null and since the title equal null is inside the set state and the set state is the only thing triggered inside the unpressed we are able to replace the curly bracket with the arrow but this is only possible because we trigger one thing inside the unpressed now let's say you want to wrap your text with a center widget i'm not sure if you know this but you can use the refactor and wrap with a center flutter will then make sure to wrap everything perfectly for you after this we will create a list of custom widget and because i don't want to add another column inside my widget 3 i will use the spread operator it's a nice way to reduce the number of nested widgets within your app okay but what is the overflow bar that's funny because it's my next tip the overflow bar will act like the wrap but only if every widget can enter inside a row otherwise it will act like a column now let's say you want to trigger the high and the yellow function within your code you could either use the say something that hi and say something that hello or you could use a cascade operator if you put two points after the class you will be able to trigger any function one after the other and these two code will do absolutely the same thing let's say you want to have access to a calendar inside your app for this you can use the show date picker and it's actually way simpler than you can think you need four things the context the initial date the first date and the last date and just like this you have access to the information of a calendar that's cool but the next one is even better have you ever end up in a situation where you need the height and the width value of the screen and did you know that there is a widget just for that called the layout builder this one will give you access to the height and width value available in the moment on this example every time i press the padding button this will add more and more padding and reduce the available space if you don't use the app bar inside the scaffold you might end up with something like this and to solve this issue and make sure the widget is not in the status bar you can use the safe area widget inside my list of steps i would like to add a switch inside a list style oh and by the way this is the stepper widget but let's not count this as a tip okay so to solve my problem i can use the switch list style but what if i would like the switch to look different on android and ios i can add the dot adaptive after the switch list style and this will make sure to fit the current platform you can do the same thing with the icons you can add the icons.adaptive and have a different visual on ios and android at some point you will need to create some marketing for your application or just create the picture for the apple store and the play store you can use the previewed app website to do all of this but how do you know if your application have great performance under the material app you have an argument called the show performance overlay when you set this as true you will see in real time when you play with the application every location where you need to improve the performance this is represent as spike inside the second graph but just make sure to run the application in profile mode otherwise you will not have the real time performance maybe your goal is to test your application and you would like to automate this process as you can see on the screen right now everything is done automatically and this is because i use the integration test this allows me to automate the process of testing the application most of them we work with api and i used to debug the calls by printing the header and the body inside the terminal but this is absolutely so wrong because you could actually open the dev tool click on the network tab and see all the information about your api calls at the same location and if you want to have more tips like this to make your application perform better you can check the module 3 of our new flutter advents course i will do part 2 of this video really soon so you should highly consider subscribing also it will help us to achieve our goal to beat william the react native guy if you want to see more flutter tips you can click the playlist available on the screen right now i will also make sure to add it inside the description so that's it for this one bye [Music]

Channel: Flutter Mapp

Views: 291,164

Keywords: Flutter, flutter tips and tricks, flutter tips, flutter tricks, flutter tips & tricks, flutter widgets, flutter performance tips, tip flutter, tips flutter, tips and tricks flutter, flutter mapp, flutter tricks and tips, flutter tip, flutter noob vs pro, flutter pro vs noob

Id: mhxoXm8lWIo

Length: 10min 52sec (652 seconds)

Published: Thu Mar 24 2022