Flutter app development good practices

#flutter #dart

Hello everyone,

Please be lenient on the quality of the writing as this is my first article. Nevertheless I would make efforts to improve myself in my next essays.

Note: This article may include elements mentioned on the documentation at https://flutter.dev/docs/perf/rendering/best-practices.

The content you will read in this article is based on my own experience and may be very opinionated.

The guidelines

I know, it can be a pain in the ass to do so much reading, but you'll thank me later.
Before you start developing mobile applications (with Flutter, or any other technology), please read the guidelines.

They'll give you strong knowledge about platform specific design patterns to improve your users experience.

Don’t make costly operations in your build methods

Do nothing else than building your UI in your build method; adding costly operations (like async calls or too big calculations) can lead to performance losses or unwanted behaviors (yeah, Flutter is very fast, but let's not abuse it 😉)

Avoid large trees, split your code into small widgets instead

Dividing your code into small reusable widgets not only promotes its reusability, but also its readability. So, you should split your code into different Widgets based not only on encapsulation but also on how “it changes”

Use widgets instead of _buildXXX (methods) to build UI elements

Build widgets instead of builder methods. Using methods instead of classes to build UI elements can not only lead to performance losses, but also to unwanted behaviors or silly-nilly bugs.

Use absolute positioning only when it’s truely necessary

Responsiveness/adaptability is a well-known topic today. Not all devices have the same pixel density, nor the same size, etc... so it's important to build UIs that adapt to all theses changes. I personally use absolute values for some cases (paddings, margins, border radiuses, etc...)

Flex is life

Prefer using Flex widgets as much as you can. The ones that come to my mind are (Row, Column, Flex, Expanded, Flexible). You can find further explanations here

"const", my friend

Use const constructors whenever possible when building your own widgets or using Flutter widgets. This helps Flutter to rebuild only widgets that should be updated.

Widget build(BuildContext context) {
    return Column(
        children: const [
          AspectRatio(aspectRatio: 10/1),
          Text("Hello world");
        ],
    );
}

Widgets choice matters

It is important to choose the widgets to use when you want to build a view. A bad choice of widgets can lead to a too large tree and a lot of useless code.
Always remember to check if a native widget does not exist before creating yours.

Use packages only when necessary

Packages can be a good choice when you want to speed up your building process and pub has a ton of them. Nonetheless, they can have significant effects on your app performances when they are used without prior study

Dealing with lists

Use the default constructor ListView for rendering small lists of known size; for longer lists (for example a list returned by the API call), use the ListView.builder constructor which renders list elements as users scroll to them.

Important notice: The shrinkWrap attribute on a ListView will force it to calculate it's size and thus to render all the elements at once.

Linting

Dart is great and we love it. It offers us a lot of freedom, but sometimes too much, so it is important to limit its features to prevent bugs in the application later.
One of your first reflexes when creating a new Flutter project should be to create the analysis_options.yml file at the root of your project.

[UPDATE: 11/04/2022]
When you create a project with the latest versions of Flutter, the analysis_options.yml file is now created by default with the official lint rules