Rapid cross-platform native app development with Flutter

Just some quick thoughts on my experience with Flutter, the framework from Google to facilitate mobile app development.

(Photo by Koen van Ginkel)

I wouldn't say I am a native app developer. My development experience is mainly around web and backend & integrations - I would say integrations are definitely the area where I have most confidence and experience . However, for a series of reasons I decided to look into native app development.

For sure, working as a Solutions Architect at Poq I am exposed to native development on a daily basis, although not in a coding role - we have excellent software engineers in the team that are highly skilled at that.

Nevertheless, I wanted to open up the hood and gets my hands dirty a little. 🧐 Furthermore, as I continue my learning journey in the cloud space, I wanted to start a little side project - which would allow me to use and experiment first hand some of the Cloud services I haven't tried yet, such as Amazon Cognito. Granted, I could have started with a web application to keep things easier for me - but where is the fun in that?

As I can't clearly become a skilled iOS AND Android developer overnight, I decided to investigate the cross-platform frameworks available. React Native was the obvious candidate, giving my familiarity with Javascript as well as the fact that you code once for all platforms. Another major plus point is that the AWS Amplify framework can be embedded with minimal effort in a React Native app and give immediate access to higher-order abstractions such as authentication, fully fledged GraphQL APIs and so on.

I recently attended to the AWS Builders Day in London, and in one of the talks Martin Beeby demonstrated the point by whipping up a fully functional To-Do web app with React, including 2FA Authentication, Serverless backend and CDN support.

I spent some time playing with React Native and Amplify on my app prototype. I was able to obtain some results quickly, especially on the Amplify side of things. It is truly a superb tool that can speed up the integration of key features, avoiding the coding too much boilerplate code.

However, I didn't feel like the React Native app I was building was particularly optimised for a mobile. I liked using Expo and the additional libraries provided to speed up implementation, but I didn't investigate much further than that.

I am sure the problem is mainly me, there must be a significant learning curve in front to obtain optimised results and I can't shortcut that out. But that is exactly the point: if I am not a super skilled mobile developer, or I don't have a ton of time to invest, how can I obtain decent results quicker? I don't want to spend ages learning a framework, I want to get good results in a reasonable amount of time, while learning the framework.

Enter Flutter - the Google framework that promises allowing me "to build beautiful native apps on iOS and Android from a single codebase." . And indeed, I have found the journey so far much, much easier for me as a "newbie" by using this framework, once set on this path by one of my colleagues.

One of the main things I noticed is how easy it is to use high level components that already encapsulate all the best practices around Material Design. Remember when I said I ain't no iOS/Android dev? Let's add UI designer to that list of roles 😉 For sure, I do try (more often than I actually should) to come up with mockups and wireframes when the situation requires me to put that hat on ... but that's really not my forte.

If I compare my Flutter attempts to my React Native attempts, it was really easy for me to get up and running with a decent UI just on the basis of a quick scan of the available documentation and tutorials. That's exactly what I want.

I want to create a MaterialApp with a Scaffold including an AppBar with a title and action icons. Let's also add a Drawer with a DrawerHeader and a list of Tiles for navigation. The main screen will include a Colum with some nice Padding and a few Text elements. I'm sure you can understand what that screen looks like even from just reading the text.

Finally - I took the occasion to get more acquainted with Redux. My starter Flutter app very quickly became a hotchpotch of spaghetti code as I added more features and started to pass references all around the place. Anyone who has met me surely knows that I have a thing for pasta. However, not specifically this kind. Flutter already supports this approach with quite mature packages (see redux and flutter_redux). I highly recommend the below talk to get the idea if you are new to this.

The only thing that is missing is support for Amplify (plenty of interest on that already) , which means implementing my Amazon Cognito authentication will be a bit more involved (but there is a promising package for that too). If you want to integrate with Firebase instead, that's clearly a first class citizen here as it's all Google stuff. There is even a tutorial about Firebase + Redux setup if you want to overtake me while I tinker with Cognito.

That's all for now. I promise to come back with more detailed findings and outcomes, but at least you know where I disappeared for the past couple of weeks
😉