A collection of 12 #tips and #tricks for building efficient and maintainable #Flutter apps 🧙. Learn how to use your IDE effectively, animate easily, and handle app complexity https://fireship.io/courses/flutter-firebase/ 

Robert Brunhage - https://www.youtube.com/channel/UCSLIg5O0JiYO1i2nD4RclaQ 

FilledStacks - https://www.youtube.com/channel/UC2d0BYlqQCdF9lJfydl_02Q 

Snippets: https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets
Launcher Icons: https://pub.dev/packages/flutter_launcher_icons

Flutter Docs - https://flutter.dev 

Take the Flutter quizzes 🤓 

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8 

Android https://play.google.com/store/apps/details?id=io.fireship.quizapp 

Upgrade to Fireship PRO at https://fireship.io/pro Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:44:08.052Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
f5f5c747-ea45-4598-bdb7-37914fa64a46
01bfffea729189c8fb4356782d2534a73edfacd588fdb43c9c1dfaf420cbbde2
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
You may have heard that 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.
For my first trick, I'll show you how to write code automatically using nothing but the tab key and the mouse.
I talk 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.
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 stateless or stateful widget.
And the refactor tool can easily handle that while also setting up a structure with the necessary input properties.
So you should really never have to write a custom widget from scratch.
Now tip number 2 I learned from Robert Brunhag's YouTube channel, which you should definitely be subscribed to if you're using Flutter.
You won't be able to use the Versus 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 Nash Romdial.
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 zip 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 60 FPS 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.
Swing now.
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 define 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 4, 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.
Yes.
That's awesome.
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 5 different box shadows simultaneously.
We could animate each of these shadows 1 by 1, 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 never actually leaves the screen even though we're moving to a completely different screen.
So the user's focus is never broken and it just looks really nice and polished.
To make this animation happen, you just need to have 2 screens that you switch between using the navigator, then 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 2 d vector scene, and you want the user to be able to interact with those graphics?
Tip number 6 is Flare, which is a 2 d 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 Flare comes from the Field Stacks YouTube channel, which is a must subscribe for Flutter developers.
In that tutorial, he shows you how to create the animations in Flutter's design tool and then support them and make them interactive in a Flutter app at 60 FPS.
Now I've mentioned 60 FPS 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 app's 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, then enter capital p and that will show this overlay on your device.
This.
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 60 FPS, you might want to tweak things based on the platform you're targeting.
Flutter ships with 2 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 macOS.
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 spin 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 JS, 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 list view, 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 list view 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 list view 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.
Keep it simple, stupid.
Great advice.
Hurts my feelings every time.
And there are 2 libraries that stand out in my experience with Flutter that help me do that.
The first library is Gitit 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 in 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 in 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 Fireship quiz app.
And the way it works is very simple.
You declare a provider at one point in the widget tree, then 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 11 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 last annoying 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 package is a command line tool that only requires you to save 1 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.
If this video helped you, please like and subscribe, and consider becoming a pro member on Fire chip.
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.

Speaker 0: You may have heard that 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. For my first trick, I'll show you how to write code automatically using nothing but the tab key and the mouse. I talk 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. 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 stateless or stateful widget. And the refactor tool can easily handle that while also setting up a structure with the necessary input properties. So you should really never have to write a custom widget from scratch. Now tip number 2 I learned from Robert Brunhag's YouTube channel, which you should definitely be subscribed to if you're using Flutter.

You won't be able to use the Versus 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 Nash Romdial. 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 zip 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 60 FPS 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.

Swing now. 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 define 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 4, 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. Yes. That's awesome. 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 5 different box shadows simultaneously. We could animate each of these shadows 1 by 1, 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 never actually leaves the screen even though we're moving to a completely different screen.

So the user's focus is never broken and it just looks really nice and polished. To make this animation happen, you just need to have 2 screens that you switch between using the navigator, then 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 2 d vector scene, and you want the user to be able to interact with those graphics? Tip number 6 is Flare, which is a 2 d 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 Flare comes from the Field Stacks YouTube channel, which is a must subscribe for Flutter developers. In that tutorial, he shows you how to create the animations in Flutter's design tool and then support them and make them interactive in a Flutter app at 60 FPS. Now I've mentioned 60 FPS 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 app's 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, then enter capital p and that will show this overlay on your device.

This. 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 60 FPS, you might want to tweak things based on the platform you're targeting. Flutter ships with 2 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 macOS. 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 spin 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 JS, 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 list view, 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 list view 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 list view 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. Keep it simple, stupid. Great advice. Hurts my feelings every time. And there are 2 libraries that stand out in my experience with Flutter that help me do that.

The first library is Gitit 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 in 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 in 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 Fireship quiz app. And the way it works is very simple. You declare a provider at one point in the widget tree, then 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 11 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 last annoying 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 package is a command line tool that only requires you to save 1 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. If this video helped you, please like and subscribe, and consider becoming a pro member on Fire chip. 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.
You may have heard that 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. For my first trick, I'll show you how to write code automatically using nothing but the tab key and the mouse. I talk 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.
programming
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. 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 stateless or stateful widget. And the refactor tool can easily handle that while also setting up a structure with the necessary input properties. So you should really never have to write a custom widget from scratch.
Now tip number 2 I learned from Robert Brunhag's YouTube channel, which you should definitely be subscribed to if you're using Flutter. You won't be able to use the Versus 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 Nash Romdial. 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.
youtube
games
video gaming
animation
In many cases, control period will fix your code with a single keystroke. And another zip 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 60 FPS 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. Swing now. 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 define 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 4, 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. Yes. That's awesome. 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 5 different box shadows simultaneously. We could animate each of these shadows 1 by 1, 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 never actually leaves the screen even though we're moving to a completely different screen. So the user's focus is never broken and it just looks really nice and polished. To make this animation happen, you just need to have 2 screens that you switch between using the navigator, then 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 2 d vector scene, and you want the user to be able to interact with those graphics? Tip number 6 is Flare, which is a 2 d animation tool that allows you to integrate complex animations directly in your Flutter app.
animation
programming
visualization
video gaming
toys
graphic design
robotics
computer science
And one of the best practical demos that I've seen using Flare comes from the Field Stacks YouTube channel, which is a must subscribe for Flutter developers.
In that tutorial, he shows you how to create the animations in Flutter's design tool and then support them and make them interactive in a Flutter app at 60 FPS. Now I've mentioned 60 FPS 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 app's performing.
animation
Now this only works on physical devices and not emulators, but you simply run your app from the command line using the profile flag, then enter capital p and that will show this overlay on your device.
This. 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 60 FPS, you might want to tweak things based on the platform you're targeting. Flutter ships with 2 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 macOS.
animation
graphic design
multimedia
robotics
video gaming
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 spin 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 JS, 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 list view, 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 list view 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.
programming
architecture
But the magic doesn't even stop there. The list view 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. Keep it simple, stupid. Great advice. Hurts my feelings every time. And there are 2 libraries that stand out in my experience with Flutter that help me do that.
software
architecture
software development
systems
management
The first library is Gitit 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 in Angular, although that's not a perfect one to one comparison.
streaming
And the other state management solution that I really like is Provider, which is a little more similar to the context API in 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.
management
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 Fireship quiz app.
And the way it works is very simple. You declare a provider at one point in the widget tree, then 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 11 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 last annoying hurdle to get over.
management
systems
telecommunications
networking
operations
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 package is a command line tool that only requires you to save 1 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. If this video helped you, please like and subscribe, and consider becoming a pro member on Fire chip. Io to get access to the full Flutter course.
software
animation
video gaming
software development
And if you have additional Flutter tips, let me know in the comments below. Thanks for watching and I will talk to you soon.
You may have heard that 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. For my first trick, I'll show you how to write code automatically using nothing but the tab key and the mouse. I talk 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. 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 stateless or stateful widget. And the refactor tool can easily handle that while also setting up a structure with the necessary input properties. So you should really never have to write a custom widget from scratch. Now tip number 2 I learned from Robert Brunhag's YouTube channel, which you should definitely be subscribed to if you're using Flutter. You won't be able to use the Versus 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 Nash Romdial. 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 zip 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 60 FPS 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. Swing now. 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 define 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 4, 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. Yes. That's awesome. 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 5 different box shadows simultaneously. We could animate each of these shadows 1 by 1, 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 never actually leaves the screen even though we're moving to a completely different screen. So the user's focus is never broken and it just looks really nice and polished. To make this animation happen, you just need to have 2 screens that you switch between using the navigator, then 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 2 d vector scene, and you want the user to be able to interact with those graphics? Tip number 6 is Flare, which is a 2 d 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 Flare comes from the Field Stacks YouTube channel, which is a must subscribe for Flutter developers. In that tutorial, he shows you how to create the animations in Flutter's design tool and then support them and make them interactive in a Flutter app at 60 FPS. Now I've mentioned 60 FPS 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 app's 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, then enter capital p and that will show this overlay on your device. This. 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 60 FPS, you might want to tweak things based on the platform you're targeting. Flutter ships with 2 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 macOS. 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 spin 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 JS, 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 list view, 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 list view 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 list view 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. Keep it simple, stupid. Great advice. Hurts my feelings every time. And there are 2 libraries that stand out in my experience with Flutter that help me do that. The first library is Gitit 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 in 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 in 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 Fireship quiz app. And the way it works is very simple. You declare a provider at one point in the widget tree, then 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 11 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 last annoying 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 package is a command line tool that only requires you to save 1 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. If this video helped you, please like and subscribe, and consider becoming a pro member on Fire chip. 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.
You
you
may
may
have
have
heard
heard
that
that
Flutter
flutter
is
is
almost
almost
like
like
Magic
magic
when
when
it
it
comes
comes
to
to
building
building
native
native
apps.
apps
So
so
you
you
decided
decided
to
to
jump
jump
on
on
the
the
Flutter
flutter
train,
train
but
but
now
now
you
you
find
find
yourself
yourself
refactoring
refactoring
this
this
giant
giant
nested
nested
nightmare
nightmare
of
of
widgets.
widgets
Luckily,
luckily
Flutter
flutter
has
has
a
a
whole
whole
bunch
bunch
of
of
tricks
tricks
up
up
its
its
sleeve,
sleeve
so
so
you
you
should
should
never
never
have
have
to
to
battle
battle
with
with
code
code
like
like
this.
this
In
in
today's
today's
video.
video
We'll
we'll
look
look
at
at
12
12
different
different
strategies
strategies
for
for
building
building
efficient
efficient
and
and
maintainable
maintainable
Flutter
flutter
apps.
apps
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
leave
leave
a
a
comment
comment
below
below
for
for
a
a
chance
chance
to
to
win
win
this
this
t
t
shirt.
shirt
For
for
my
my
first
first
trick,
trick
I'll
i'll
show
show
you
you
how
how
to
to
write
write
code
code
automatically
automatically
using
using
nothing
nothing
but
but
the
the
tab
tab
key
key
and
and
the
the
mouse.
mouse
I
i
talk
talk
about
about
this
this
in
in
detail
detail
in
in
my
my
full
full
Flutter
flutter
course,
course
which
which
you
you
can
can
access
access
as
as
a
a
pro
pro
member,
member
but
but
there
there
are
are
a
a
few
few
things
things
that
that
you
you
absolutely
absolutely
must
must
know.
know
If
if
we
we
take
take
a
a
look
look
at
at
this
this
code
code
snippet,
snippet
you
you
can
can
see
see
a
a
lot
lot
of
of
closing
closing
tags
tags
on
on
a
a
single
single
line,
line
making
making
it
it
very
very
hard
hard
to
to
understand.
understand
But
but
you
you
can
can
easily
easily
fix
fix
this
this
by
by
adding
adding
trailing
trailing
commas
commas
to
to
your
your
arguments
arguments
and
and
lists,
lists
and
and
the
the
end
end
result
result
is
is
an
an
easy
easy
to
to
read
read
tree
tree
structure
structure
when
when
we
we
format
format
the
the
file.
file
But
but
doing
doing
this
this
manually
manually
all
all
the
the
time
time
would
would
get
get
really
really
annoying.
annoying
That's
that's
why
why
you
you
should
should
get
get
really
really
good
good
at
at
using
using
the
the
tab
tab
key
key
because
because
the
the
tooling
tooling
is
is
so
so
good
good
in
in
Dart
dart
and
and
Flutter
flutter
that
that
almost
almost
everything
everything
can
can
be
be
auto
auto
completed
completed
with
with
IntelliSense.
intellisense
Just
just
hover
hover
over
over
the
the
thing
thing
you
you
want,
want
hit
hit
tab,
tab
and
and
the
the
trailing
trailing
column
column
will
will
be
be
added
added
for
for
you.
you
But
but
the
the
most
most
powerful
powerful
tool
tool
you
you
have
have
at
at
your
your
disposal
disposal
is
is
the
the
refactor
refactor
tool.
tool
It
it
allows
allows
us
us
to
to
insert
insert
new
new
widgets
widgets
into
into
the
the
widget
widget
tree,
tree
especially
especially
commonly
commonly
used
used
ones
ones
like
like
container
container
and
and
center.
center
And
and
we
we
can
can
also
also
use
use
it
it
to
to
remove
remove
widgets
widgets
without
without
having
having
to
to
think
think
about
about
where
where
the
the
opening
opening
and
and
closing
closing
characters
characters
are.
are
And
and
if
if
the
the
widget
widget
tree
tree
starts
starts
to
to
become
become
too
too
deeply
deeply
nested,
nested
that
that
usually
usually
means
means
we
we
need
need
to
to
refactor
refactor
out
out
into
into
our
our
own
own
stateless
stateless
or
or
stateful
stateful
widget.
widget
And
and
the
the
refactor
refactor
tool
tool
can
can
easily
easily
handle
handle
that
that
while
while
also
also
setting
setting
up
up
a
a
structure
structure
with
with
the
the
necessary
necessary
input
input
properties.
properties
So
so
you
you
should
should
really
really
never
never
have
have
to
to
write
write
a
a
custom
custom
widget
widget
from
from
scratch.
scratch
Now
now
tip
tip
number
number
2
2
I
i
learned
learned
from
from
Robert
robert
Brunhag's
brunhag's
YouTube
youtube
channel,
channel
which
which
you
you
should
should
definitely
definitely
be
be
subscribed
subscribed
to
to
if
if
you're
you're
using
using
Flutter.
flutter
You
you
won't
won't
be
be
able
able
to
to
use
use
the
the
Versus
versus
Code
code
refactor
refactor
tool
tool
in
in
every
every
situation,
situation
but
but
there's
there's
still
still
a
a
few
few
things
things
you
you
can
can
do
do
to
to
make
make
your
your
life
life
easier.
easier
First,
first
install
install
the
the
awesome
awesome
Flutter
flutter
Snippets
snippets
from
from
Nash
nash
Romdial.
romdial
That
that
will
will
give
give
you
you
shortcuts
shortcuts
to
to
generate
generate
things
things
like
like
stateful
stateful
and
and
stateless
stateless
widgets.
widgets
Then
then
when
when
you
you
run
run
into
into
issues
issues
with
with
your
your
code,
code
you
you
can
can
hit
hit
control
control
period
period
to
to
run
run
a
a
quick
quick
fix.
fix
A
a
common
common
example
example
is
is
when
when
you're
you're
adding
adding
properties
properties
to
to
a
a
class
class
and
and
you
you
want
want
to
to
add
add
the
the
properties
properties
to
to
the
the
constructor
constructor
along
along
with
with
a
a
key.
key
In
in
many
many
cases,
cases
control
control
period
period
will
will
fix
fix
your
your
code
code
with
with
a
a
single
single
keystroke.
keystroke
And
and
another
another
zip
zip
from
from
Robert
robert
is
is
to
to
use
use
the
the
bracket
bracket
pair
pair
colorizer
colorizer
plugin
plugin
to
to
visually
visually
match
match
the
the
opening
opening
and
and
closing
closing
characters
characters
between
between
widgets,
widgets
adding
adding
additional
additional
clarity
clarity
to
to
your
your
editor.
editor
Using
using
your
your
tools
tools
effectively
effectively
is
is
one
one
thing,
thing
but
but
now
now
let's
let's
look
look
into
into
some
some
of
of
the
the
magic
magic
tricks
tricks
that
that
are
are
built
built
into
into
the
the
Flutter
flutter
framework
framework
itself.
itself
Flutter
flutter
renders
renders
animations
animations
beautifully
beautifully
at
at
60
60
FPS
fps
or
or
better,
better
But
but
animations
animations
traditionally
traditionally
require
require
a
a
lot
lot
of
of
complex
complex
code.
code
Animated
animated
container
container
is
is
a
a
widget
widget
that
that
you
you
can
can
apply
apply
styles
styles
to
to
just
just
like
like
a
a
regular
regular
container,
container
but
but
if
if
those
those
styles
styles
change
change
then
then
it
it
will
will
automatically
automatically
animate
animate
in
in
between
between
them.
them
Swing
swing
now.
now
You
you
can
can
animate
animate
things
things
like
like
position,
position
size,
size
color,
color
shadow,
shadow
and
and
gradients
gradients
just
just
to
to
name
name
a
a
few.
few
And
and
all
all
you
you
have
have
to
to
do
do
as
as
a
a
developer
developer
is
is
provide
provide
the
the
duration
duration
and
and
timing
timing
curve
curve
of
of
that
that
animation.
animation
Then
then
define
define
some
some
dynamic
dynamic
properties
properties
on
on
the
the
widget,
widget
And
and
when
when
those
those
properties
properties
change,
change
Flutter
flutter
will
will
automatically
automatically
animate
animate
between
between
them.
them
So
so
the
the
animations
animations
can
can
be
be
implicitly
implicitly
tied
tied
to
to
the
the
underlying
underlying
data
data
or
or
state
state
of
of
the
the
application.
application
And
and
that
that
brings
brings
me
me
to
to
tip
tip
number
number
4,
4
Dart.
dart
It
it
might
might
not
not
be
be
the
the
most
most
exciting
exciting
programming
programming
language
language
in
in
the
the
world
world
but
but
it
it
has
has
some
some
nice
nice
sugary
sugary
features
features
that
that
can
can
make
make
your
your
code
code
concise
concise
and
and
readable.
readable
Yes.
yes
That's
that's
awesome.
awesome
One
one
of
of
my
my
favorite
favorite
features
features
is
is
the
the
ability
ability
to
to
add
add
conditional
conditional
logic
logic
and
and
for
for
loops
loops
directly
directly
inside
inside
of
of
lists.
lists
Let's
let's
imagine
imagine
we
we
have
have
this
this
button
button
and
and
we
we
want
want
to
to
animate
animate
5
5
different
different
box
box
shadows
shadows
simultaneously.
simultaneously
We
we
could
could
animate
animate
each
each
of
of
these
these
shadows
shadows
1
1
by
by
1,
1
or
or
we
we
could
could
simply
simply
combine
combine
an
an
animated
animated
container
container
along
along
with
with
some
some
conditional
conditional
logic
logic
and
and
a
a
for
for
loop
loop
inside
inside
of
of
a
a
list
list
and
and
we're
we're
done.
done
So
so
once
once
you
you
understand
understand
how
how
to
to
use
use
these
these
tricks,
tricks
you
you
can
can
combine
combine
them
them
together
together
to
to
get
get
things
things
done
done
even
even
faster.
faster
But
but
Flutter
flutter
can
can
actually
actually
provide
provide
even
even
more
more
magic
magic
when
when
it
it
comes
comes
to
to
animating
animating
between
between
screens
screens
using
using
the
the
hero
hero
widget.
widget
If
if
you
you
look
look
closely
closely
here,
here
you
you
can
can
see
see
that
that
the
the
image
image
that
that
we
we
click
click
on
on
never
never
actually
actually
leaves
leaves
the
the
screen
screen
even
even
though
though
we're
we're
moving
moving
to
to
a
a
completely
completely
different
different
screen.
screen
So
so
the
the
user's
user's
focus
focus
is
is
never
never
broken
broken
and
and
it
it
just
just
looks
looks
really
really
nice
nice
and
and
polished.
polished
To
to
make
make
this
this
animation
animation
happen,
happen
you
you
just
just
need
need
to
to
have
have
2
2
screens
screens
that
that
you
you
switch
switch
between
between
using
using
the
the
navigator,
navigator
then
then
you
you
wrap
wrap
the
the
part
part
of
of
the
the
UI
ui
that's
that's
shared
shared
between
between
the
the
two
two
screens,
screens
usually
usually
an
an
image,
image
using
using
the
the
hero
hero
widget.
widget
Both
both
instances
instances
of
of
the
the
hero
hero
will
will
share
share
a
a
common
common
tag
tag
and
and
Flutter
flutter
will
will
match
match
these
these
two
two
tags
tags
together
together
and
and
handle
handle
all
all
the
the
animation
animation
stuff
stuff
for
for
you
you
under
under
the
the
hood.
hood
But
but
what
what
if
if
you
you
have
have
something
something
super
super
complex
complex
like
like
a
a
fully
fully
animated
animated
2
2
d
d
vector
vector
scene,
scene
and
and
you
you
want
want
the
the
user
user
to
to
be
be
able
able
to
to
interact
interact
with
with
those
those
graphics?
graphics
Tip
tip
number
number
6
6
is
is
Flare,
flare
which
which
is
is
a
a
2
2
d
d
animation
animation
tool
tool
that
that
allows
allows
you
you
to
to
integrate
integrate
complex
complex
animations
animations
directly
directly
in
in
your
your
Flutter
flutter
app.
app
And
and
one
one
of
of
the
the
best
best
practical
practical
demos
demos
that
that
I've
i've
seen
seen
using
using
Flare
flare
comes
comes
from
from
the
the
Field
field
Stacks
stacks
YouTube
youtube
channel,
channel
which
which
is
is
a
a
must
must
subscribe
subscribe
for
for
Flutter
flutter
developers.
developers
In
in
that
that
tutorial,
tutorial
he
he
shows
shows
you
you
how
how
to
to
create
create
the
the
animations
animations
in
in
Flutter's
flutter's
design
design
tool
tool
and
and
then
then
support
support
them
them
and
and
make
make
them
them
interactive
interactive
in
in
a
a
Flutter
flutter
app
app
at
at
60
60
FPS.
fps
Now
now
I've
i've
mentioned
mentioned
60
60
FPS
fps
a
a
couple
couple
times
times
now
now
because
because
it's
it's
so
so
important
important
for
for
the
the
user
user
experience,
experience
But
but
how
how
do
do
you
you
know
know
if
if
your
your
app
app
and
and
your
your
animations
animations
are
are
actually
actually
hitting
hitting
this
this
benchmark?
benchmark
Flutter
flutter
actually
actually
has
has
a
a
built
built
in
in
performance
performance
profiling
profiling
tool
tool
that
that
you
you
can
can
use
use
on
on
an
an
actual
actual
device
device
to
to
determine
determine
how
how
well
well
your
your
app's
app's
performing.
performing
Now
now
this
this
only
only
works
works
on
on
physical
physical
devices
devices
and
and
not
not
emulators,
emulators
but
but
you
you
simply
simply
run
run
your
your
app
app
from
from
the
the
command
command
line
line
using
using
the
the
profile
profile
flag,
flag
then
then
enter
enter
capital
capital
p
p
and
and
that
that
will
will
show
show
this
this
overlay
overlay
on
on
your
your
device.
device
This.
this
If
if
you
you
see
see
any
any
red
red
bars
bars
as
as
you're
you're
using
using
the
the
app,
app
then
then
you
you
know
know
that
that
you
you
have
have
a
a
performance
performance
bottleneck
bottleneck
that
that
needs
needs
to
to
be
be
addressed
addressed
somewhere.
somewhere
Now
now
that
that
you
you
know
know
you
you
have
have
beautiful
beautiful
animations
animations
at
at
60
60
FPS,
fps
you
you
might
might
want
want
to
to
tweak
tweak
things
things
based
based
on
on
the
the
platform
platform
you're
you're
targeting.
targeting
Flutter
flutter
ships
ships
with
with
2
2
widget
widget
libraries
libraries
out
out
of
of
the
the
box,
box
Material
material
and
and
Cupertino,
cupertino
designed
designed
to
to
look
look
perfect
perfect
on
on
Android
android
and
and
iOS.
ios
Most
most
of
of
the
the
apps
apps
that
that
I've
i've
worked
worked
on
on
have
have
a
a
very
very
customized
customized
UI,
ui
but
but
there
there
are
are
times
times
where
where
you
you
might
might
want
want
widgets
widgets
to
to
look
look
like
like
they
they
came
came
directly
directly
from
from
the
the
platform
platform
itself,
itself
especially
especially
when
when
it
it
comes
comes
to
to
dialogues,
dialogues
forms,
forms
and
and
alerts.
alerts
And
and
it's
it's
also
also
worth
worth
noting
noting
that
that
Flutter
flutter
is
is
starting
starting
to
to
target
target
the
the
web,
web
Windows,
windows
and
and
macOS.
macos
And
and
platform
platform
checking
checking
gives
gives
us
us
a
a
way
way
to
to
customize
customize
the
the
experience
experience
without
without
having
having
to
to
duplicate
duplicate
all
all
of
of
our
our
code
code
for
for
every
every
single
single
app.
app
As
as
an
an
example,
example
if
if
you
you
have
have
a
a
widget
widget
that
that
should
should
look
look
different
different
on
on
iOS
ios
spin
spin
it
it
does
does
on
on
Android.
android
You
you
can
can
simply
simply
wrap
wrap
it
it
in
in
your
your
own
own
stateless
stateless
widget
widget
and
and
then
then
do
do
platform
platform
checking
checking
to
to
show
show
the
the
material
material
widget
widget
on
on
Android
android
and
and
the
the
Cupertino
cupertino
widget
widget
on
on
iOS.
ios
Both
both
widget
widget
libraries
libraries
share
share
a
a
very
very
similar
similar
API.
api
So
so
in
in
most
most
cases,
cases
you
you
just
just
need
need
to
to
separate
separate
them
them
with
with
some
some
basic
basic
conditional
conditional
logic.
logic
And
and
if
if
that
that
weren't
weren't
easy
easy
enough,
enough
a
a
lot
lot
of
of
Flutter
flutter
widgets
widgets
include
include
this
this
adaptive
adaptive
static
static
method
method
on
on
it,
it
which
which
will
will
do
do
all
all
the
the
platform
platform
checking
checking
and
and
conditional
conditional
rendering
rendering
for
for
you
you
automatically.
automatically
Now
now
let's
let's
switch
switch
gears
gears
into
into
builders.
builders
When
when
you
you
first
first
get
get
into
into
Flutter
flutter
development,
development
you'll
you'll
see
see
the
the
word
word
build
build
or
or
builder
builder
a
a
lot.
lot
And
and
a
a
builder
builder
is
is
just
just
a
a
function
function
that
that
returns
returns
a
a
widget.
widget
If
if
you've
you've
ever
ever
used
used
something
something
like
like
React
react
JS,
js
this
this
should
should
feel
feel
very
very
familiar
familiar
because
because
it
it
gives
gives
you
you
a
a
declarative
declarative
way
way
to
to
describe
describe
the
the
entire
entire
UI.
ui
Now
now
the
the
really
really
cool
cool
thing
thing
about
about
Flutter
flutter
is
is
that
that
a
a
lot
lot
of
of
the
the
widgets
widgets
will
will
allow
allow
you
you
to
to
directly
directly
pass
pass
in
in
a
a
list.
list
For
for
example,
example
a
a
list
list
view,
view
which
which
gives
gives
you
you
a
a
scrollable
scrollable
list
list
of
of
items,
items
and
and
you
you
can
can
create
create
that
that
by
by
just
just
passing
passing
in
in
a
a
static
static
list
list
of
of
widgets.
widgets
But
but
in
in
many
many
cases,
cases
you'll
you'll
need
need
to
to
build
build
your
your
UI
ui
more
more
dynamically.
dynamically
And
and
what
what
you'll
you'll
find
find
is
is
that
that
a
a
lot
lot
of
of
widgets
widgets
like
like
list
list
view
view
have
have
a
a
builder
builder
method.
method
And
and
this
this
allows
allows
you
you
to
to
define
define
a
a
builder
builder
function
function
that
that
will
will
be
be
called
called
every
every
time
time
the
the
user
user
scrolls.
scrolls
And
and
that
that
gives
gives
you
you
access
access
to
to
the
the
current
current
index
index
so
so
you
you
can
can
describe
describe
exactly
exactly
what
what
should
should
be
be
shown
shown
in
in
the
the
UI
ui
based
based
on
on
that
that
index.
index
And
and
that's
that's
extremely
extremely
powerful
powerful
if
if
you
you
have
have
an
an
infinitely
infinitely
long
long
list
list
or
or
you
you
need
need
to
to
do
do
something
something
like
like
server
server
side
side
pagination.
pagination
But
but
the
the
magic
magic
doesn't
doesn't
even
even
stop
stop
there.
there
The
the
list
list
view
view
also
also
has
has
a
a
static
static
method
method
called
called
separated
separated
And
and
it
it
works
works
just
just
like
like
the
the
builder,
builder
except
except
it
it
also
also
gives
gives
you
you
access
access
to
to
build
build
a
a
divider
divider
in
in
between
between
the
the
items.
items
And
and
that's
that's
incredibly
incredibly
useful
useful
if
if
you
you
need
need
to
to
group
group
and
and
divide
divide
items
items
in
in
a
a
specific
specific
way
way
at
at
runtime.
runtime
So
so
Flutter
flutter
does
does
all
all
kinds
kinds
of
of
amazing
amazing
stuff
stuff
for
for
you
you
out
out
of
of
the
the
box,
box
but
but
one
one
thing
thing
it
it
doesn't
doesn't
really
really
have
have
a
a
strong
strong
opinion
opinion
on
on
is
is
state
state
management.
management
It
it
gives
gives
us
us
a
a
few
few
low
low
level
level
building
building
blocks
blocks
like
like
a
a
stateful
stateful
widget
widget
and
and
inherited
inherited
widget.
widget
But
but
most
most
apps
apps
are
are
going
going
to
to
need
need
more
more
than
than
just
just
these
these
building
building
blocks.
blocks
But
but
before
before
you
you
just
just
go
go
and
and
jump
jump
into
into
a
a
big
big
complicated
complicated
state
state
management
management
solution.
solution
I
i
recommend
recommend
applying
applying
the
the
proven
proven
software
software
design
design
paradigm
paradigm
of
of
keep
keep
it
it
simple.
simple
Keep
keep
it
it
simple,
simple
stupid.
stupid
Great
great
advice.
advice
Hurts
hurts
my
my
feelings
feelings
every
every
time.
time
And
and
there
there
are
are
2
2
libraries
libraries
that
that
stand
stand
out
out
in
in
my
my
experience
experience
with
with
Flutter
flutter
that
that
help
help
me
me
do
do
that.
that
The
the
first
first
library
library
is
is
Gitit
gitit
and
and
one
one
of
of
the
the
things
things
it
it
does
does
is
is
allow
allow
you
you
to
to
create
create
a
a
global
global
singleton
singleton
that
that
can
can
be
be
shared
shared
throughout
throughout
the
the
widget
widget
tree.
tree
I
i
find
find
it
it
especially
especially
useful
useful
when
when
working
working
with
with
broadcast
broadcast
streams
streams
because
because
you
you
can
can
create
create
the
the
stream
stream
once
once
and
and
then
then
use
use
it
it
in
in
multiple
multiple
widgets
widgets
even
even
if
if
they're
they're
on
on
completely
completely
different
different
screens
screens
or
or
in
in
completely
completely
different
different
parts
parts
of
of
the
the
widget
widget
tree.
tree
Get
get
it
it
should
should
feel
feel
very
very
natural
natural
if
if
you've
you've
ever
ever
used
used
something
something
like
like
dependency
dependency
injection
injection
in
in
Angular,
angular
although
although
that's
that's
not
not
a
a
perfect
perfect
one
one
to
to
one
one
comparison.
comparison
And
and
the
the
other
other
state
state
management
management
solution
solution
that
that
I
i
really
really
like
like
is
is
Provider,
provider
which
which
is
is
a
a
little
little
more
more
similar
similar
to
to
the
the
context
context
API
api
in
in
React.
react
But
but
the
the
reason
reason
that
that
I
i
really
really
like
like
Provider
provider
is
is
that
that
it's
it's
mostly
mostly
just
just
syntactic
syntactic
sugar
sugar
for
for
things
things
like
like
inherited
inherited
widget
widget
and
and
stream
stream
builder,
builder
which
which
are
are
built
built
into
into
Flutter
flutter
natively.
natively
And
and
on
on
top
top
of
of
that,
that
it
it
works
works
really
really
well
well
with
with
Firebase,
firebase
which
which
I
i
made
made
an
an
entire
entire
video
video
about
about
a
a
couple
couple
weeks
weeks
ago.
ago
And
and
it's
it's
the
the
state
state
management
management
solution
solution
that
that
I
i
use
use
in
in
the
the
Fireship
fireship
quiz
quiz
app.
app
And
and
the
the
way
way
it
it
works
works
is
is
very
very
simple.
simple
You
you
declare
declare
a
a
provider
provider
at
at
one
one
point
point
in
in
the
the
widget
widget
tree,
tree
then
then
you
you
can
can
access
access
that
that
data
data
and
and
also
also
react
react
to
to
changes
changes
in
in
a
a
deeply
deeply
nested
nested
child.
child
So
so
provider
provider
will
will
solve
solve
a
a
lot
lot
of
of
your
your
state
state
management
management
problems
problems
without
without
a
a
ton
ton
of
of
boilerplate.
boilerplate
Now
now
hopefully,
hopefully
you
you
can
can
use
use
these
these
11
11
tricks
tricks
that
that
we've
we've
looked
looked
at
at
to
to
build
build
a
a
production
production
ready
ready
app.
app
But
but
once
once
you
you
get
get
to
to
that
that
point,
point
there's
there's
going
going
to
to
be
be
one
one
last
last
annoying
annoying
hurdle
hurdle
to
to
get
get
over.
over
And
and
that,
that
of
of
course,
course
is
is
generating
generating
your
your
app
app
icons
icons
for
for
both
both
iOS
ios
and
and
Android.
android
If
if
you
you
run
run
into
into
a
a
challenge
challenge
during
during
development,
development
chances
chances
are
are
somebody
somebody
else
else
has
has
already
already
faced
faced
that
that
same
same
challenge
challenge
and
and
open
open
sourced
sourced
their
their
solution.
solution
And
and
that's
that's
exactly
exactly
the
the
case
case
when
when
it
it
comes
comes
to
to
generating
generating
your
your
launcher
launcher
icons.
icons
This
this
package
package
is
is
a
a
command
command
line
line
tool
tool
that
that
only
only
requires
requires
you
you
to
to
save
save
1
1
single
single
image
image
in
in
your
your
Flutter
flutter
assets
assets
and
and
then
then
will
will
automatically
automatically
generate
generate
all
all
the
the
icons
icons
for
for
both
both
iOS
ios
and
and
Android
android
for
for
you.
you
And
and
that's
that's
a
a
hell
hell
of
of
a
a
lot
lot
easier
easier
than
than
trying
trying
to
to
do
do
it
it
by
by
hand
hand
from
from
a
a
design
design
program.
program
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
on
on
Fire
fire
chip.
chip
Io
io
to
to
get
get
access
access
to
to
the
the
full
full
Flutter
flutter
course.
course
And
and
if
if
you
you
have
have
additional
additional
Flutter
flutter
tips,
tips
let
let
me
me
know
know
in
in
the
the
comments
comments
below.
below
Thanks
thanks
for
for
watching
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss the benefits of building Flutter apps, including the ability to write code automatically and the potential for efficient development. They provide tips for building a maintainable app, including fixing mistakes by adding trailing commas to arguments and lists, reusing the tab key, and using the refactor tool. They also discuss the use of flexible elements and Flare in creating dynamic versions of apps, and recommend using a library and a state management solution. The speakers emphasize the importance of performance profiling and customization for the user experience, and provide examples of use cases for Flutter development.
Top 12 Flutter Tips & Tricks
You may have heard that 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. For my first trick, I'll show you how to write code automatically using nothing but the tab key and the mouse. I talk 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. 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 stateless or stateful widget. And the refactor tool can easily handle that while also setting up a structure with the necessary input properties. So you should really never have to write a custom widget from scratch. Now tip number 2 I learned from Robert Brunhag's YouTube channel, which you should definitely be subscribed to if you're using Flutter. You won't be able to use the Versus 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 Nash Romdial. 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 zip 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 60 FPS 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. Swing now. 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 define 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 4, 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. Yes. That's awesome. 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 5 different box shadows simultaneously. We could animate each of these shadows 1 by 1, 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 never actually leaves the screen even though we're moving to a completely different screen. So the user's focus is never broken and it just looks really nice and polished. To make this animation happen, you just need to have 2 screens that you switch between using the navigator, then 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 2 d vector scene, and you want the user to be able to interact with those graphics? Tip number 6 is Flare, which is a 2 d 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 Flare comes from the Field Stacks YouTube channel, which is a must subscribe for Flutter developers. In that tutorial, he shows you how to create the animations in Flutter's design tool and then support them and make them interactive in a Flutter app at 60 FPS. Now I've mentioned 60 FPS 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 app's 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, then enter capital p and that will show this overlay on your device. This. 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 60 FPS, you might want to tweak things based on the platform you're targeting. Flutter ships with 2 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 macOS. 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 spin 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 JS, 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 list view, 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 list view 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 list view 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. Keep it simple, stupid. Great advice. Hurts my feelings every time. And there are 2 libraries that stand out in my experience with Flutter that help me do that. The first library is Gitit 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 in 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 in 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 Fireship quiz app. And the way it works is very simple. You declare a provider at one point in the widget tree, then 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 11 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 last annoying 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 package is a command line tool that only requires you to save 1 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. If this video helped you, please like and subscribe, and consider becoming a pro member on Fire chip. 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.
The speakers discuss the benefits of building Flutter apps, including the ability to write code automatically and the potential for efficient development. They provide tips for building a maintainable app, including fixing mistakes by adding trailing commas to arguments and lists, reusing the tab key, and using the refactor tool. They also discuss the use of flexible elements and Flare in creating dynamic versions of apps, and recommend using a library and a state management solution. The speakers emphasize the importance of performance profiling and customization for the user experience, and provide examples of use cases for Flutter development.