Flutter — 5 little things to know — Part 0


In this series, I will be listing out five things that I feel every flutter developer should know. With more experience and observation, I will create more parts. If you are an experienced flutter developer, you may know these already, but I’ll still put them out there. Who knows! Someone else might find them Interesting.

No 1: Container — The Swiss Army Knife.

Container is a very powerful widget, but sometimes we tend to miss out on some of its benefits when working with it. I can’t count how many times I’ve missed out on taking advantage of this tool and ended up adding some unnecessary widgets to the widget tree. I call it “the widget of widgets” because a single container has the properties of some other Flutter widgets such as Align, Padding, ConstrainedBox, etc. when properly used. You can check out this article, Flutter’s Container: This ain’t your Daddy’s div for more amazing container properties.

The sample code below shows examples of code snippets producing similar results with the second code taking advantage of the benefits of containers.

Taking advantage of Container’s properties.
Result of sample codes.

No 2: Don’t animate Opacity widget

Animating an Opacity widget directly causes the widget (and possibly its subtree) to rebuild each frame, which is not very efficient. Consider using an AnimatedOpacity instead.

According to the opacity documentation, animating the opacity widget should be avoided. Using the AnimatedOpacity or the FadeTransition widget should be preferred for implementing a similar behavior.

No 3: Consider making use of cascade notation (..)

Cascade notation allows multiple methods to be called on the same object. If you are coming from other OOP languages, It might feel strange to see this syntax because achieving such in other languages requires you to return “this” from the methods.

This often saves you the step of creating a temporary variable and allows you to write more fluid code.

A typical example of when cascade notation can come in handy is when creating a custom clipper.

No 4: Fitted box is here for you

Have you ever been in a Situation where you want a widget to fit in another widget or the screen irrespective of the size? If you have had such a need, fitted box is the right widget for you.

In the example below, I try to fit the number boxes in a row into different containers of different sizes. This leads to an overflow in the second and third case since the contents are number box row is bigger than the containers.

Code without FittedBox
Result without FittedBox

In the case below, I simply wrapped the number box row with a FittedBox widget and it quickly adjusted the number box to fit in perfectly into all the containers.

Wrapped with FittedBox
Result with FittedBox

No 5: Discard the new keyword

If you are new to Flutter, You might come across some old codes where object instances are created with the new keyword. Its usage became optional with the introduction of Dart 2 (check more on it here ). Writing your code without the new keyword makes it much neater to work with.


Flutter is very interesting to work with and the more you work with it is the more you get to learn new things about it. I will be writing some more articles after this as a way of contributing to the flutter community.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top