Flutter tips and good practices

Some tips and good practices to you have a good relationship with flutter!

Hi, today i'm gonna write about some tips and good practices to you work with flutter. this article can and will be right opinionated, so if you don't agree with something just ignore ok? Let's go!

If you have something that could be added to this article, just comment below let's discuss about it.

1. Always use commas:

when you don't put commas at the end of some declaration and you try to ident your code it is not gonna end good. The indentation process use the commas to break the lines and without them the code looks like trash and it is difficult to understand what's happening.

Expanded(
child: InkWell(
onTap: _onAddTap, <---
child: Container(), <---
), <---
), <---

The default value for max characters it is 80, and when you do not use commands your code feels like a hadouken.

2. Choose the right state management:

Look the needs of your project and your team, do not choose Bloc, Mobx … Or wherever, just because someone say that it is good, you need to think if everyone of your team will be comfortable to work with your choice and if your project will scale as you need with the state management that you choose. Each one of them will have pros and cons, so you need to search and have some POCS (prove of concept) to decide which one will fit for your context.

There is a lot of example projects and articles showing different approaches to manage and architect you application, waiting you to find them. Google it!

3. Create widgtes lots of widgets:

Everything in flutter is a widget and this is perfect to create reusable codes, do not let your widget or your screen grows and become a massive something. Create widgets of widgets, separate in different methods.

4. Use the LINT:

Add the file analysis_options with the rules that fits to your project, the lint helps you especially when you have more than one dev in the project to have a more organize and concise code, and sometimes when you writing some code that could be outdate in your version the lint will tell you that there is a better way to do that!

If you just create the file analysis_options in the root of your project the lint is already running, you just ned to check the rules that you want and done. This works in VSCode and Android Studio.

analyzer:
errors:
missing_required_param: error

linter:
rules:
- always_declare_return_types
- always_put_control_body_on_new_line
...

You can get all the rules on the dart doc here.

5. Use const modifier:

Always use const modifier when you can, the const helps flutter to decide whenever he needs to rebuild the widget. So if you have a widget that is immutable he never changes after he is created, there is no need to rebuild it if we call setState function for example.

const SizedBox(
height: 10.0,
),

Spaces normally is something that never changes on apps, they exists or no. So just add the const modifier. If you are using the lint whenever he finds that the widget support const he will warn you to add the const modifier.

6. SetState use wisely:

When you call the function setState flutter will rebuild the current widget three and changes what need to be changed, but you need to be aware that if the widget doesn't have the const modifier, flutter will rebuild everything, so look to your code and think if you really need to rebuild all the screen just to change some texts and colors, of course most part of the time is not just text and colors, but be aware that using setState on the wrong place or the wrong way could lead your app to lose frames.

7: Dispose everything:

Memory leaks are something that is not easy to find and fix, so always dispose your logics on the dispose method of your widgets or bloc or wherever. If you don't dispose something that you don't need anymore like a stream, he will still be using memory even if you are in another screen already, and this can also lead to call setState function when the widget is not mounted anymore.

8: Avoid static declarations:

Static declarations can prevent you to use const modifier in your widgets, for example if you declare a color to reuse in different widgets, when you add the color as a static reference in the testStyle flutter will not accept the const modifier in the style, but if you declare the color as const it will work.

Good:

const Color sanMarino = Color(0xFF4357AD);

Bad:

class AppColors {
AppColors._();

static const Color sanMarino = Color(0xFF4357AD);
}

This example is valid for anything not just colors.

The static reference is not the only think that can prevent you to use the const modifier, it is just one of the many thinks, like if you widgets access some variable or receive it, it can be a const because the variable can change it's value.

9: Organize your styles:

Create a style class that have different styles for your widgets, for example if you have some texts with a common style:

TextStyle(
fontSize: 56.0,
color: whiteColor,
fontWeight: FontWeight.bold,
)

Create one style that defines it and just import it to use in your widgets. And remember to declare them as const so you can use const modifier in your widgets too.

const titleTextBold = TextStyle(
fontSize: 56.0,
color: whiteColor,
fontWeight: FontWeight.bold,
);
Text(style: titleTextBold)

10: Svg files

If you have the possibility to work with SVG files instead of png and jpeg files it will be great, why? When you work with svg files you do not need to have 1x, 2x and 3x files in your app only one the svg, this will help you to have a small installation package at the end and of course less files to manage in your project. The SVG files are a math representation of the image so when needed it can increase or decrease the size of the image. There is a lot of packages that allow's you to work with svg files in flutter.

I recommend this one -> package.

11: Avoid big widget hierarchies

When you increase the size of the widget hierarchy you also increase the cost of rendering, so before you start creating Columns inside of Rows inside of Columns inside of Container … Just try to mentalize what is the best approach to layout this view, maybe we can use a Stack or something else, this is just a let you know warn to everyone think more before start the real implementation. I'm not telling you that you need to avoid this, some times the layout is so complex that is difficult to find different approaches, but i think it worth to try!

12: Use the devTools:

The flutter team give us a lot of great tools to help us understand problems and improve or app quality, so like in memory leak problems you can use the performance feature to check and see more deep what is happening. There is a lot of tutorials teaching you how to use these tools, in the flutter channel on youtube for example we have some cool videos.

13: Packages:

Do you really, really, really … Need that DateUtil (for example) package just to simplify the way that you handle dates? The date package is just an example but this can happen with all sort of packages. Some times we add packages to resolve some problem but we forget that the package comes with a lot of code that we may never use, so think twice before add any package that you see. When you add packages on the project you also increase the final app size. If you really need the package, check the license on gitHub, most of the packages are open source, you can get only the code that you need and add to your project, that way you don't need to import features that you will never use. (Just for big packages) … I'm saying that but it is not to you stop using packages, just use wisely.

14: Android (appbundle)

This is just for Android deploys, when you are submitting some version to play store, she will warn you but in case that you don't see, always generate app bundles instead of apk files. Why? app bundle is a new format that google create to help us decrease the app size, you can learn more app bundles here

15: Architect your app

Your project structure is important because as it grows you need to ensure that it will grow healthy and stable, allowing you to scale without structure problems.

When you are working in team (most of the time) you have different people putting code to the project and it is important that everyone follows some guides to keep you project well.

I this article i do write about clean architecture in flutter and how to architect you app using some concepts of uncle Bob.

Be brave and boldly go where no man has gone before. Let's discover the future!