share

ENGINEERING

7min read

Native Developer’s Look on Flutter

Flutter is a hot topic among the developers. In case you haven’t heard about it—it’s a new mobile app SDK that helps developers and designers build modern mobile apps for iOS and Android (at least according to the official website). The first commit was made on 23 Oct 2014. To be honest, I’ve never been a fan of cross-platform mobile development. Every time I’ve used one of the apps built this way I’ve had this weird feeling that something is wrong. I mean things like scrolling speed, button behavior, performance, and responsiveness. When I first heard about Flutter I was skeptical. I didn’t even want to compare Flutter vs native Android, because I thought I knew what will be the answer. I thought that it’s no different than other similar frameworks so it’s not worth my time. I have to admit that I was wrong and despite some minor flaws, it’s just awesome.

What’s so special about it?

Flutter is an open source project developed mainly by a group of engineers at Google. But it also has external contributors (there were about 130 of them at the time of writing this post). It’s written in Dart language which is also maintained by Google. Of course, I would prefer Kotlin but when Flutter’s development started, Kotlin was not so popular as it is today so Dart seems like a reasonable choice. Having Flutter and Dart in control allowed for creating an awesome tooling and IDE integration. It works seamlessly with IntelliJ and Android Studio. Just think about things like debugging and Hot Reload that actually work. But the most important thing that makes Flutter special for me is the fact that apps built with Flutter are really smooth and beautiful. Flutter has a built-in library of Material (Android) and Cupertino (iOS) widgets that are pixel-perfect implementations of Google’s and Apple’s guidelines. As an Android developer, I have to admit that it has more material widgets implemented than are available even on Android. Playing with demo app convinced me that cross-platform apps can look and feel good. Flutter takes care of things like scrolling speed, so it feels as close to native Android/iOS app as possible. It’s impressive how much attention to details the developers had paid. At that point I knew that I wanted to give it a try and experiment with it for about 2 weeks.

Discover the story
of the revolutionary telecomms app

Demo project

I love creating fancy, custom UI so I decided to test Flutter capabilities in this area. Recently I was working on Folx app, which has a lot of non-standard widgets and patterns. (You can read more about this project here. As it turned out I had to change my plan twice. You’ll find out why in a minute.

Idea #1

My first idea was to implement a screen with a map to test how the communication between Flutter and OS works. It turns out that Flutter doesn’t support OpenGL yet, so there is no MapView or VideoView. I know that the team is working hard on it so it will be available eventually. But I had to change my project idea at this point.

Idea #2

Folx app has an interactive main screen with rounded buttons that are morphing into rounded rects and translating around the circle. The content of the circle uses crossfade effect to change its values and all of that is controlled by a user swipe gesture. At the beginning, I was convinced that it’s extremely complex but after reading the Flutter docs I’ve decided to give it a try. It quickly turned out that making Flutter’s PageView widget to use crossfade instead of translating to animate changes between pages is not trivial. It’s definitely doable but it required reaching the lower level machinery. Taking into account that it’s just a small part of the whole screen, I felt that it would be a waste of time. I had to change my project idea again.

Idea #3

I didn’t want to waste more time on thinking what to code so I decided to implement two or three first screens of the Folx app. In the meantime, I found out that Flutter can be used as a View on Android and UIView on iOS. Since the app idea doesn’t seem spectacular I thought that maybe I could at least make the background animated like in the original app where it uses OpenGL to render it. Maybe Flutter view could be made translucent and then background (or even maps) could be rendered natively? I gave it a try and it almost worked. “Almost” because there is a bug. I can’t use it so the background will be a static image.

Implementation

From that time, I’ve focused on implementing the screens as close to the original as possible. The first thing I did was to implement styled buttons, add custom fonts, define colors etc. In Flutter all of these things you do in Dart code. There is no resource system similar to Android. I have to say that it was the thing I missed the most. Anyway, creating custom widgets is simple and fun! You basically compose them out of other widgets like Text, Padding or Container (for background). I remember learning about custom views on Android, where the learning curve is much steeper. Here I was able to create all necessary widgets in a couple of hours. Making TextField look like in Folx was quite time-consuming. Flutter does a great job in implementing Material Spec but Folx uses slightly different styles and behaviors. I was worried that it won’t be possible since copying and modifying original views on Android is often painful (they use internal APIs that are not available outside the framework). I was pleasantly surprised to discover that I was able to just grab the TextField implementation from Flutter and modify it the way I needed. The code is pretty straightforward and easy to change. Having widgets ready, I could finally start implementing screens. As I already got used to the style that Flutter enforces devs to use, it was a matter of hours to make them look great. Of course, it was not a seamless process. It turned out that Flutter doesn’t allow to put flexbox widgets inside scrollable containers yet so I had to assume that the screens won’t be scrollable. The other thing that slowed me down was animations. Animations in Flutter are widgets too and you compose them like the rest of the components. This requires a change of your mindset. But even when I finally understood how to use them, I was not able to implement an animation for the widget size changes. Like I said before—it’s definitely doable but it requires using lower level mechanisms so I decided to leave it without animation. Check out a couple of screenshots from the final app I was able to make:

screens_flutter.png

Conclusion

I won’t lie, Flutter is not perfect yet. It lacks some important things like OpenGL, MapView, VideoView or the accessibility support. But it’s just a matter of time—all of these things are going to be developed one day. After all, it’s an active project, as you can see on the public roadmap. Many of you are probably wondering—what about tests? Shouldn’t we care about testing? I have great news for you: Flutter supports testing and it’s awesome! You can even write unit tests for UI! Unfortunately, I didn’t have enough time to try it but you can read more about those tests here.

Flutter changed my point of view on cross-platform frameworks. Its performance, focus on details and UI, Dart as a language, IDE support, and community around it gave me hope. I think that someday we’ll be able to write an app without sacrificing user’s habits and apps built with Flutter will work great on both Android and iOS (and Fuchsia—I didn’t mention that Flutter is also a framework to write Fuchsia apps). Wonder no more and just go and try it yourself! And if you have any question you can ask the Flutter team on GitHub, Gitter or subscribe to their mailing list.

Visit our GitHub to check it out yourself!

How can we help?

Is going native the only way to succeed? We have touched upon this issue in our article devoted to React Native—you can check it here. We would be more than happy to help you decide, just tell us about your project!.

share


MichałSenior Software Engineer

LEARN MORE

Contact us if you have any questions regarding the article or just want to chat about technology, our services, job offers and more!

POLIDEA NEWSLETTER

Sign in and expect sharp insights, recommendations, ebooks and fascinating project stories delivered to your inbox

The controller of the personal data that you are about to provide in the above form will be Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”). We will process your personal data based on our legitimate interest and/or your consent. Providing your personal data is not obligatory, but necessary for Polidea to respond to you in relation to your question and/or request. If you gave us consent to call you on the telephone, you may revoke the consent at any time by contacting Polidea via telephone or email. You can find detailed information about the processing of your personal data in relation to the above contact form, including your rights relating to the processing, HERE.

Data controller:

The controller of your personal data is Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”)

Purpose and legal bases for processing:

 

Used abbreviations:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

ARES – Polish Act on Rendering Electronic Services dated 18 July 2002

TL – Polish Telecommunications Law dated 16 July 2004

1)        sending to the given email address a newsletter including information on Polidea’s new projects, products, services, organised events and/or general insights from the mobile app business world |art. 6.1 a) GDPR, art. 10.2 ARES and art. 172.1 TL (upon your consent)

Personal data:name, email address

2)       statistical, analytical and reporting purposes |art. 6. 1 f) GDPR (based on legitimate interests pursued by Polidea, consisting in analysing the way our services are used and adjusting them to our clients’ needs, as well as developing new services)

Personal data:name, email address

Withdrawal of consent:

You may withdraw your consent to process your personal data at any time.

Withdrawal of the consent is possible solely in the scope of processing performed based on the consent. Polidea is authorised to process your personal data after you withdraw your consent if it has another legal basis for the processing, for the purposes covered by that legal basis.

Categories of recipients:

Your personal data may be shared with:

1)       authorised employees and/or contractors of Polidea

2)       persons or entities providing particular services to Polidea (accounting, legal, IT, marketing and advertising services) – in the scope required for those persons or entities to provide those services to Polidea

 

Retention period:

1)       For the purpose of sending newsletter to the given email address – for as long as the relevant consent is not withdrawn

2)       For statistical, analytical and reporting purposes – for as long as the relevant consent is not withdrawn

Your rights:

 

Used abbreviation:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

According to GDPR, you have the following rights relating to the processing of your personal data, exercised by contacting Polidea via [e-mail, phone].

1)       to access to your personal data (art. 15 GDPR) by requesting sharing and/or sending a copy of all your personal data processed by Polidea

2)       to request rectification of inaccurate personal data
(art. 16 GDPR) by indicating the data requiring rectification

3)       to request erasure of your persona data (art. 17 GDPR); Polidea has the rights to refuse erasing the personal data in specific circumstances provided by law

4)       to request restriction of processing of your personal data (art. 18 GDPR) by indicating the data which should be restricted

5)       to move your personal data (art. 20 GDPR) by requesting preparation and transfer by Polidea of the personal data that you provided to Polidea to you or another controller in a structured, commonly used machine-readable format

6)       to object to processing your personal data conducted based on art. 6.1 e) or f) GDPR, on grounds relating to your particular situation (art. 21 GDPR)

7)       to lodge a complaint with a supervisory authority,
in particular in the EU member state of your habitual residence, place of work or place of the alleged infringement if you consider that the processing
of personal data relating to you infringes the GDPR
(art. 77.1 GDPR)

No obligation to provide data:

Providing your personal data is not obligatory, but necessary for Polidea to provide you the newsletter service

Refusal to provide the above data will result in inability to receive the newsletter service.

Profiling

In the process of providing the newsletter service, we make decisions in an automated way, including profiling, based on the data you provide.

 

“Profiling” means automated processing of personal data consisting of the use of your personal data to evaluate certain personal aspects relating to you, in particular to analyze or predict aspects concerning your personal preferences and interests.

 

The automated decisions are taken based on the analysis of clicked and viewed content. They affect the targeting of specific newsletter content to selected users registered to receive the newsletter service, based on the anticipated interests of the recipient.