5 things I like about Flutter and 4 things that annoy me.

Back in early 2018, I came across a video introducing Flutter as an alternative to React Native for building a cross-platform app. I was very excited back then as the idea of Google, the developer of Android introducing their cross-platform development framework was quite promising for its adoption.

I have experience developing in Native Swift & Java, and it’s 2019 now, I thought I draw some comparison and write down some of the features in Flutter that makes it more adoptable and a pleasant to use.

1. Forcing you to choose Stateful & Stateless Widget

A stateless widget holds no state; it is what it is; it doesn’t react to changes on its own. A stateful widget has state information that describes how the widget should look. The widget itself has specific mutating properties that manipulate the state causing the widget to change its state, therefore, its appearance. Typically a stateful widget is where you put your on click listener and API callback as they cause the state to change.

You could build an application without strictly following any design patterns but having the reactive paradigm baked directly into the core of Flutter offers a refreshing approach. It creates the blueprint for implementation that makes it compulsory as you build your highly interactive and data-driven application without needing to pick a framework for it.

The unexpected outcome of this design is that it dramatically reduces code lookup time when I am trying to change something small; as stateless widget is often your styled component that describes how a widget looks. While your stateful widget often encompasses state changes which are usually where feature and functions of the application are.

2. Incorporated Design & AutoLayout

Flutter widget is also very modular. When you need a particular style or feature, you wrap it inside a widget providing that style or feature. When you need padding on each side, you wrap your widget inside a Padding widget. When you need a corner radius, you use a BoxDecoration with a BorderRadius property.

The modularity of Flutter widgets allows very high reuse of its UI component as they don’t belong to any implementation. You don’t have to worry about whether a widget can be used for list view or grid view (UICollectionViewCell and UITableViewCell) you can easily swap them out as they are non-exclusive.

The side effect of this modular design forces you to place your widget in a widget tree. I like working with this widget tree structure as widgets are tightly packed together and traversing up and down the widget tree describes the causality they have with each other. Imagine a bunch of <div> in HTML but instead of <div><div><div></div></div></div> its

<border radius 3>
<padding 16>
<icon></icon>
</padding>
</border>

The best part is that it isn’t a templating language. It’s in code.

ClipRRect(
borderRadius: BorderRadius.circular(3),
child: Padding(
padding: EdgeInsets.all(16),
child: Icon(
url: "image.png"
),
),
)

When the tree gets too complicated, you can wrap it inside a newly created widget.

class ComplicatedWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(3),
child: Padding(
padding: const EdgeInsets.all(16),
child: Icon(
url: "image.png"
),
),
),
}
}

When you need to use that widget tree structure, you can just ComplicatedWidget().

3. Dart Lang & Type Safety

Many advantages of a type-safe language do not just end with the obvious arguments that people usually make (type safety). I like working with an IDE (IntelliJ) when developing. Statically typed language does make it easier for the IDE to predict what to autocomplete, and the analysis tools are much better and faster.

I also like working with Dart lang. It is what you expect a modern language to be: concise, asynchrony, functional, class-based and streamable.

4. Performance

Performance is always important, but what I could gather is that the proper understanding of stateful & stateless design dramatically affects the performance of a Flutter application. If you are doing multiple state manipulation individually in each widget in a list view while scrolling, you are bound to notice the lag. Carefully designing your widget tree tends to negate the lag.

5. Open Source & Debugging

Flutter Shortcomings & Concerns

SCROLL TO INDEX PROBLEM

There are, of course, a few shortcomings and concerns when adopting new technology. All of my shortcomings are situational to what and how I was building my app and should not reflect entirely on your Flutter adoption.

Lack of Engineering Talent

If it’s a solo project and you are planning to build your app to cater to both Android & iOS (and hopefully Fuchsia soon) then it’s perfect, you can build it with Flutter and probably shave some time off.

However, if you already have a team or is planning to hire a team. Then it’s little tricky as there isn’t any senior Flutter engineer floating around in the market.

Very limited SDK Support

Your support team might want to use Intercom to support customer in-app. But Intercom SDK doesn’t have an SDK for Flutter. You pray to the open-source community that there is an open-source plugin written by a saint. You went ahead with the implementation, and it all works out well but… a few months later it comes to haunt you as Intercom dropped support for the version you are using. You checked the public repo and realised the maintainer is now busy with another project and dropped support for that repo. You now have to clone and maintain the project just to implement the change.

Map View Support

You may opt to develop the map feature natively, but you end up having to maintain three codebases with their relevant engineering talent (iOS, Android, Flutter) which is not ideal.

Scroll To Index

However, if your items in the list view are dynamically generated and you have no way to determine the height then tough luck. Depending on your use-case, there are certainly ways to overcome it, but it won’t be obvious enough.

This feature might impact your decision for adoption, but I will gladly go ahead with this handicap as the layout system that Flutter uses is god damn amazing.

Conclusion

I am a full-stack capable Web, Android, iOS, DevOps, software engineer and architecture.