Top 12 Flutter Tips & Tricks

Key Takeaways

you may have heard the flutter is almost like magic when it comes to building native apps so you decided to jump on the flutter train but now you find yourself refactoring this giant nested nightmare of widgets luckily flutter has a whole bunch of tricks up its sleeve so you should never have to battle with code like this in today's video we'll look at 12 different strategies for building efficient and maintainable flutter apps if you're new here like and subscribe and leave a comment below for a chance to win this t-shirt or my first trick I'll show you how to write code automatically using nothing but the tab key in the mouse I talked about this in detail in my full flutter course which you can access as a pro member but there are a few things that you absolutely must know if we take a look at this code snippet you can see a lot of closing tags on a single line making it very hard to understand but you can easily fix this by adding trailing commas to your arguments and lists and the end result is an easy to read tree structure when we format the file but doing this manually all the time would get really annoying that's why you should get really good at using the tab key because the tooling is so good in dart and flutter that almost everything can be auto-completed with intellisense just hover over the thing you want hit tab and the trailing column will be added for you [Music] but the most powerful tool you have at your disposal is the refactor tool it allows us to insert new widgets into the widget tree especially commonly used ones like container and center and we can also use it to remove widgets without having to think about where the opening and closing characters are and if the widget tree starts to become too deeply nested that usually means we need to refactor out into our own state list or stateful widget and the refactor tool can easily handle that while also setting up a constructor with the necessary input properties so you should really never have to write a custom widget from scratch now tip number two I learned from Robert Brune heggs YouTube channel which you should definitely be subscribed to if you're using flutter you won't be able to use the vs code refactor tool in every situation but there's still a few things you can do to make your life easier first install the awesome flutter snippets from gnash rom dial that will give you shortcuts to generate things like stateful and stateless widgets then when you run into issues with your code you can hit control period to run a quick fix a common example is when you're adding properties to a class and you want to add the properties to the constructor along with a key in many cases control period will fix your code with a single keystroke and another tip from Robert is to use the bracket pair colorizer plugin to visually match the opening and closing characters between widgets adding additional clarity to your editor using your tools effectively is one thing but now let's look into some of the magic tricks that are built into the flutter framework itself flutter renders animations beautifully at 60fps or better but animations traditionally require a lot of complex code animated container is a widget that you can apply styles to just like a regular container but if those Styles change then it will automatically animate in between them you can animate things like position size color shadow and gradients just to name a few and all you have to do as a developer is provide the duration and timing curve of that animation then to find some dynamic properties on the widget and when those properties change flutter will automatically animate between them so the animations can be implicitly tied to the underlying data or state of the application and that brings me to tip number four Dart it might not be the most exciting programming language in the world but it has some nice sugary features that can make your code concise and readable one of my favorite features is the ability to add conditional logic and for loops directly inside of lists let's imagine we have this button and we want to animate five different box shadows simultaneously we could animate each of these shadows one by one or we could simply combine an animated container along with some conditional logic and a for loop inside of a list and we're done so once you understand how to use these tricks you can combine them together to get things done even faster but flutter can actually provide even more magic when it comes to animating between screens using the hero widget if you look closely here you can see that the image that we click on it never actually leaves the screen even though we're moving to a completely different screen so the users focus is never broken and it just looks really nice and polished to make this animation happen you just need to have two screens that you switch between using a navigator and you wrap the part of the UI that's shared between the two screens usually an image using the hero widget both instances of the hero will share a common tag and flutter will match these two tags together and handle all the animation stuff for you under the hood but what if you have something super complex like a fully animated 2d vector scene and you want the user to be able to interact with those graphics tip number six is flare which is a 2d animation tool that allows you to integrate complex animations directly in your flutter app and one of the best practical demos that I've seen using player comes from the filled Stax YouTube channel which is a must subscribe for flutter developers in that tutorial he shows you how to create the animations in Flair's design tool and then export them and make them interactive in a flutter app at 60fps now I've mentioned 60fps a couple times now because it's so important for the user experience but how do you know if your app and your animations are actually hitting this benchmark flutter actually has a built in performance profiling tool that you can use on an actual device to determine how well your apps performing now this only works on physical devices and not emulators but you simply run your app from the command line using the profile flag and enter capital P and that will show this overlay on your device if you see any red bars as you're using the app then you know that you have a performance bottleneck that needs to be addressed somewhere now that you know you have beautiful animations at 60fps you might want to tweak things based on the platform you're targeting flutter ships with two widget libraries out of the box material and Cupertino designed to look perfect on Android and iOS most of the apps that I've worked on have a very customized UI but there are times where you might want widgets to look like they came directly from the platform itself especially when it comes to dialogues forms and alerts and it's also worth noting that flutter is starting to target the web Windows and Mac OS and platform checking gives us a way to customize the experience without having to duplicate all of our code for every single app as an example if you have a widget that should look different on iOS than it does on Android you can simply wrap it in your own stateless widget and then do platform checking to show the material widget on Android and the Cupertino widget on iOS both widget libraries share a very similar API so in most cases you just need to separate them with some basic conditional logic and if that weren't easy enough a lot of flutter widgets include this adaptive static method on it which will do all the platform checking and conditional rendering for you automatically now let's switch gears into builders when you first get into flutter development you'll see the word build or builder a lot and a builder is just a function that returns a widget if you've ever used something like react Jas this should feel very familiar because it gives you a declarative way to describe the entire UI now the really cool thing about flutter is that a lot of the widgets will allow you to directly pass in a list for example a ListView which gives you a scrollable list of items and you can create that by just passing in a static list of widgets but in many cases you'll need to build your UI more dynamically and what you'll find is that a lot of widgets like ListView have a builder method and this allows you to define a builder function that will be called every time the user Scrolls and that gives you access to the current index so you can describe exactly what should be shown in the UI based on that index and that's extremely powerful if you have an infinitely long list or you need to do something like server-side pagination but the magic doesn't even stop there the ListView also has a static method called separated and it works just like the builder except it also gives you access to build a divider in-between the items and that's incredibly useful if you need to group and divide items in a specific way at runtime so flutter does all kinds of amazing stuff for you out of the box but one thing it doesn't really have a strong opinion on is state management it gives us a few low-level building blocks like a stateful widget and inherited widget but most apps are going to need more than just these building blocks but before you just go and jump into a big complicated state management solution I recommend applying the proven software design paradigm of keep it simple and there are two libraries that stand out in my experience with flutter that helped me do that the first library is get it and one of the things it does is allow you to create a global singleton that can be shared throughout the widget tree I find it especially useful when working with broadcast streams because you can create the stream once and then use it in multiple widgets even if they're on completely different screens or in completely different parts of the widget tree get it should feel very natural if you've ever used something like dependency injection and angular although that's not a perfect one-to-one comparison and the other state management solution that I really like is provider which is a little more similar to the context API and react but the reason that I really like provider is that it's mostly just syntactic sugar for things like inherited widget and stream builder which are built into flutter natively and on top of that it works really well with firebase which I made an entire video about a couple weeks ago and it's the state management solution that I use in the fire ship quiz app and the way it works is very simple you declare a provider at one point in the widget tree and you can access that data and also react to changes in a deeply nested child so provider will solve a lot of your state management problems without a ton of boilerplate now hopefully you can use these eleven tricks that we've looked at to build a production ready app but once you get to that point there's going to be one less annoint hurdle to get over and that of course is generating your app icons for both iOS and Android if you run into a challenge during development chances are somebody else has already faced that same challenge and open sourced their solution and that's exactly the case when it comes to generating your launcher icons this packages a command-line tool if that only requires you to save one single image in your flutter assets and then will automatically generate all the icons for both iOS and Android for you and that's a hell of a lot easier than trying to do it by hand from a design program I'm gonna go ahead and wrap things up there this video helped you please like and subscribe and consider becoming a pro member on fire ship IO to get access to the full flutter course and if you have additional flutter tips let me know in the comments below thanks for watching and I will talk to you soon [Music]