First Flutter App
Posted On March 18, 2020
If you were to build a small app thats needs to support Android, iOS and perhaps even a web app you got 3 options.
- Go full native
- Go hybrid
- Go cross platform
Each approach has his pro’s and con’s and could be used for its own suitable projects. I had the opportunity to play around with Flutter. Just to see if it could work to create small apps fast and reliable. So here a small introduction and my findings while creating a small app.
First a demo
Setting up my machine with the Flutter SDK was a bit of a hassle. Mostly added the Flutter SDK to the systems variables was pure hell for me.. but this is more a Mac issue for me than Flutter. The command
flutter doctor really helped me out to solve any remaining issues.
When starting a new project you already get a small demo app that shows you how to build up the UI and handle user interactions which helped me a lot. So in the beginning I mostly played around with this Declarative UI structure that Flutter has. This was a bit of a learning curve since I’m used to build UI in XML within Android. But it’s a curve I needed to learn anyway because Android is introducing Android Compose and even iOS has something similar with Swift UI. Luckily the IDE helps out a lot with shortcut-keys.
When building the app I needed help of the internet.. like a lot. How to do navigation? How to build a list? How to add an icon? But what I noticed that at least for building UI after 1 day of using Google and Stack Overflow and of course the Flutter website which hold every widget and more, you start to learn and see the logics behind declarative UI and flutter in general.
When I started to see that building the app on an Android and iOS device worked I also wanted to have the web variant. Sadly this is still in Beta and flutter clearly states to not use this in production just yet. I ignored that advise for this small project and added a web build as well which was easy to create since its only 2 commands in the terminal. But then when started the website I ran into problems like CORS and Service Providers.. no idea what I needed to do and I spend some time on the internet figuring this out.
It’s nice to build a new screen or feature and see it running on all these different platforms. I had no issue at all except for the share functionality. I used a public library that controls the sharing feature for me. Sadly this feature doesn’t work on web. Luckily there is an easy way to check on which platform the user currently is and therefor I could disable the share feature with ease for web only.
Some pro’s and con’s
+ Learning curve was not that steep
+ Flexible in design, not limited by native components because Flutter controls every pixel
+ Native components can be used
+ Multi platform
+ It’s fast
+ Adoption and community is getting stronger
+ Easy animations
– Has not proven itself for complex apps with more hardware related features
– No best practises yet
– You still need to have some knowledge about the platforms you building for like CORS for web
– Investment since you need to learn Dart and Flutter
– Biased, I just started Flutter and only see the positive sides now
Widespread Developer Adoption
It seems that Flutter is evolving in a real competitor with other cross-platform tech and native development. Developing with Dart in Flutter wasn’t that difficult in the end and the results are amazing. Therefor I advise to give Flutter a go.
Links that helped me out
https://flutter.dev/docs – Everything you need to know
https://dartpad.dev/ – Great for trying out some widget
https://pub.dev/ – Useful for finding libraries
https://flutterawesome.com/ – Widget library