7 things we learned writing a camera app in Flutter
So my friend approached me with the idea of creating a simple camera app that serves as a disposable camera, you take 24 pictures and then you get them delivered as prints to your home address.
Here is our story of writing that app (Lightsnap) in Flutter for the past 2 months.
Prelude
Who are we you ask? We are two web fanatics from Iceland in our late 20's.
What do we know? We are mostly web developers but we have experience in writing apps in Native iOS, Ionic and React Native.
Why did you pick Flutter? We have the same problem as other Web developers that we always think the grass is greener at the other side of the compiler, and when Google releases a relatively cool new cross-platform framework, we hear that as a mating call and want to try it out TODAY.
We did around 2 hours of research comparing mostly React Native with Flutter and since we are both working as React devs day-to-day we decided to shake things up and go for it.
1. Tooling and IDE is sufficient
Support for flutter is surprisingly good, VS Code, IntelliJ, and other editors have great plugins to ease your transition into the world of Dart.
It’s of course not at the same level as its competitors but it’s good enough for most, if not all developers.
Installing flutter was a bit weird, instead of having an installer or recommending installing via Homebrew, you have to clone the repo to a particular place of choosing instead of them just doing that for you. But it’s nothing to complain about.
TLDR:
- You can almost use whatever editor you like and your good to go
- Getting started is simple and fast
2. Check for plugin support for native features you need to use
Okay, you are going to create a camera app, what should be your main concern while developing it? No, those of you who were thinking about the number of stars on Github, you are incorrect! The camera support of the platform you are picking is the correct answer.
What we did:
We came in, installed the camera plugin ran the basic example, everything looked good, it took photos and was super easy to set up so that’s a win-win-win i.e. triple win in my books.
What we should have done:
Install the camera plugin, try out the example code and then check for the support of flash, exposure, focus, zoom and so much more.
After perhaps 3 weeks of setting up the project and creating all the major screens, we noticed that the photos from the camera were not that great and therefor started a long battle with the camera that ended up in us writing our own implementation of the camera plugin for iOS and Android.
TLDR:
- The camera plugin in Flutter is far from being ready
- Do good research for your major requirements
- Here is a link to the repo CustomCamera plugin
3. Dart/Flutter is really easy to learn
How good does it feel when coming into a new programming language with no experience at all and be able to jump in without any major hurdles? I would say that you feel like a god (of course until you find out that one thing that you know in your favorite language is not supported).
Darts learning curve is really easy for web developers. I would say it’s fairly comparable with using Typescript.
Writing the UI is also quite easy to learn and building Widgets (Flutter’s version of React components) is super intuitive, although you will have to deal with some weird UI errors like:
TLDR:
- Dart is kind of like Typescript
- Flutter documentation is great
- Building Widgets is really fast
4. Yes Flutter is quite new
We are used to thinking
“Hey I need a nice tab component to be able to switch between tabs, why don’t I go to npm/yarn and find something awesome”
This is not the case in Flutter
Flutter is growing quite fast but the dev community and the amount of packages out there is not nearly as big as it’s rival React Native. Therefore we were forced to write our own implementation of some basic packages that you would normally find on npm/yarn for React Native.
But the positive side of this is we became masters of Flutter quite fast by writing most of the code ourselves.
Though community packages are not many, there are many built-in widgets that are going to be good enough for you most of the time.
TLDR:
- Flutter is new
- More community packages in React Native
- Built-in Flutter packages work fine for most things
5. “My state management is better than yours”
The favorite topic of all web developers:
“MOBX IS BETTER THEN REDUX”
“REACT CONTEXT IS WAY BETTER THEN MOBX”
“I ONLY USE INTERNAL STATE FOR EVERYTHING AND I’M THE BEST”
And it’s no different here, should you use Mobx, Redux, Bloc or Providers. There are tons of articles about the pros and cons of each but we just went with the official docs and used Providers and were fairly happy with that. It’s pretty straightforward coming from React, you just change the value you want to change and then notify the world about it.
TLDR:
- State management with providers is easy to use
6. You write one code and it just. simply. works. plus it’s fast
For real, this is so awesome. We never had the issue of building something that looked awesome on an iOS device but was broken on the Android device. And coming from React Native this happens really often.
Now to address the naysayers out there that are always saying something like:
“You’re never gonna match native performance with cross platform solutions”
This is perhaps true to some extent but boy can I tell you that you can barely tell that our app was made via Flutter. Everything looks native, feels native and performs like it’s native.
TLDR:
- Cross-platform works like a charm
- Performance is great
- Naysayers will be naysayers
7. Releasing was a breeze
Like we pointed out earlier, the documentation of everything in Flutter is superb, and instructions on how to release are no different. Nothing to talk about here, things just work and that’s the way the cookie crumbles.
TLDR:
- Releasing in Flutter is straightforward
Conclusion:
9 out of 10 times would we recommend Flutter as your go-to I want to create an app and get it out there as soon as I can. But please learn from our mistakes and check the support of major features, because, for us, most of our development time went into creating and modifying native plugins instead of polishing UI and improving UX.
We had a blast developing Lightsnap in Flutter and we’re looking forward to seeing how Flutter will impact the app development industry in the near future!
Links:
CustomCamera plugin (unstable fork from official plugin)
Android app link
iOS app link
