Dart Flutter Cross Platform Chat Application Tutorial

Having worked on a bunch of different mobile applications; I have tried to use many of the mobile application solutions over the years. I have worked with everything from React-native to Cordova and Xamarin; and most of the non-native mobile solutions tend to be fairly underwhelming in two categories: performance and aesthetics. This isn't to say that you can't achieve fairly satisfactory results with one of these other solutions, it just means that the average production level program built with one of these "hybrid" frameworks tends to lose in one of these categories.

This is where Flutter comes in. For the past few years, the folks over at google have been working on improving the Dart virtual machine. This includes large increases to performance as well as a fairly satisfactory developer story. From Dart came the Flutter Framework as well. The Flutter framework leverages the speed and optimization of Dart with native code bindings to create a set of tools that allows the user to build one single application that works on three different mobile operating systems; Android, IOS and the soon to be released "Code Name Fuchsia". Not only is Flutter better optimized then most of the hybrid and non-native mobile solutions on the market, it also allows the user to build beautiful User interfaces that are decoupled from the application's data layer which also look and feel like their native counterparts.

In this basic flutter tutorial, we look at the more basic and core concepts of the flutter framework by building out a simple chat application. This application makes use to flutter's widget-based design and it also uses the flutter Cuperino library to implement native IOS solutions. The application is not fully functional, but it could be easily extended with a real-time database or a Web API to pass messages from one client to another. We create a fairly simple screen widget and embed a extendable list view of messages into it. We then are able to add small little animations to make the application feel more authentic.

The source code for this project can be found here