Transitioning from Titanium to Flutter: a technical summary

  • Text and TextFields
    Flutter’s Text and TextField widgets are more comprehensive than Titanium one’s. They support more styling out-of-the-box, although one can always reproduce this in Titanium by creating Titanium custom Widgets. Forms likewise have a bit more cladding. Flutter Text widgets at their base level are composed of pure Rich Text widgets and so are very configurable and styling text, with accurate font metrics (using advanced features such as ligature control, for example), is really easy and much more powerful than with Titanium.
  • Navigation
    Navigation is a strange one in Flutter. Titanium navigation has always been really easy with smooth native-performance transitions and support — on iOS especially — for the standard Navigation Window and Tab Group hierarchies. Basic navigation is also easy in Flutter, with super smooth transitions, but you have to create more boiler plate (not so much) to do transitions and there are automatic platform specific transitions, but again on iOS they are emulated and not 100% the same . Also, the standard hierarchies are not supported so well (Tab Group’s are supported, but a little fiddly, and Navigation Window’s don’t easily collapse to the root). Flutter basic navigation has problems such as supporting the Android back button fully and managing a complex stack of windows. A new version, Navigator 2.0, has been developed to deal with these issues, but there is a huge amount of dissent and complaints in the community about how complex the Flutter dev team have made it. The complication is that, for Flutter, navigation has to apply to the web (supporting things like the back and forwards browser navigation buttons) as well as mobile and other platforms. An annoying side-effect is that everything is couched in terms of the very web-centric “routes” and “pages”, rather than screens or windows, but that is a minor grouch.
  • Theming
    Theming in Flutter is completely Material Design centric. A lot of theme properties in Material Design are quite obscure and so unless you are from a native Android background and used to using Material Design it can be quite confusing. Also, theming is not iOS friendly, so I roll my own theming for colours and styles. One example are buttons, where I hate the ink well effect on Android/Material Design and prefer the simpler iOS version of button states and so I choose to roll my own for that too.
  • General Layout
    Layout with both frameworks is pretty straightforward. Flutter has a vast array of layout widgets to help with this such as Row, Column, ListView, Grid and many others. The weird thing, coming from a Titanium background, is that to align an object in some way, instead of setting that as a property (such as left, right, top and bottom) in Flutter you have to nest child widgets in an “aligning” widget. Even padding often requires nesting the widget you want to pad inside a Padding widget. With Titanium it is obviously easier to see layouts schematically in an Alloy view, although you can always examine the Flutter widget tree. Flutter can be a bit more frustrating than Titanium as far as overflowing widgets are concerned, which it shows graphically as an error on screen, but often is difficult to work out why there are issues.
  • App Config.
    App configuration is easier with Titanium. There is no single file where specific iOS or Android native config can be done, as there is with tiapp.xml (for example Info.plist properties for iOS or Android manifest settings). The config for Flutter has to be done in the respective iOS or Android template projects.
  • State Management
    Flutter doesn’t do much state management out-of-the-box, but if you want to get more sophisticated there are numerous packages that offer this such as Bloc. State management in Flutter is designed to manage state in a series or stack of widgets. It is more similar to React Native in concept. In all my time using Titanium I never needed any very sophisticated state management, managing with data models and libs and passing data between modules. Backbone handles some of that for you with model and collection syncing.
  • Events
    Events in Flutter are in some ways much more complex, and in some ways much simpler, to use than in Titanium. Events in Flutter are handled by Dart Streams, which are a much more sophisticated model of a sequence of events. Rarely does one use a simple event listener, although some widgets do take an event listener handler as a property. Streams can be complex to grasp and use, although in practice you don’t often have to manipulate them directly and you might do something like pass a stream that a data loader supplies into a ListView, for example. All the complex, background, creating and responding to events is hidden from you.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store