First Look at Flutter

Amazon! 
Australian Launch Date? 
$10 on the launch date and a whiteboard of names with a red marker to eliminate those that miss the date in the office.
As one of Melbourne’s leading Mobile app developers a quick look in the mirror made us question our 1900’s office sweep set up.
Throw Flutter into the equation and we whip up a cross platform internal app to display everyone’s predictions. The backend data is stored in Firebase Firestore, so the client works in real time keeping track of everyone’s entry, who’s out, and who the winner will be.

 

What is Flutter?

Flutter is Googles crack at write once, run anywhere mobile apps. The language of choice here is Dart, and it compiles into native Android and iOS Apps. They’ve made it pretty easy to get it up and running, especially if you are using IntelliJ, install the plugin and run the wizard, and you are away.

Best thing about it

Instant Reload: Hit save, and a couple of seconds later, your app is updated, making the development cycles really quick, and making it really ease to tweak your UI’s and layouts, which is important without any graphical layout tools. And it runs fast when it’s running, I was getting real time data updates, pushed out the device, and smooth scrolling with a big, albeit simple list.

Something Interesting

Building UI Components can create big indented trees of UI widgets. Instead of having complicated UI elements with lots of attributes to to get all the details, Flutter has a lot of simple UI elements, that you can nest together to create complex UI element. Want to have padding around an item, wrap a padding widget around your element, want to add a transition or a gesture, wrap your elements with these. You have a small list of elements to get your head around, and can combine to make more complicated elements, but you will need to be careful and abstract out your components or you end up with a massive indented tree in your code. Below is a pretty simple card in a list item, with some conditional formatting.

return new Padding(
  padding: const EdgeInsets.all(2.0),
  child: new SizeTransition(
    axis: Axis.vertical,
    sizeFactor: animation,
    child: new GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: onTap,
      child: new SizedBox(
        height: 64.0,
        child: new Card(
          color: dateTime.isBefore(new DateTime.now())
              ? Colors.black12
              : Colors.orange,
          child: new Row(
            children: [
              new Padding(
                padding: new EdgeInsets
                    .fromLTRB(8.0, 0.0, 8.0, 0.0),
                child: new Text(
                  '$name - $date',
                  style: textStyle,
                ),
              ),
              isWinner
                  ? new Icon(
                      const IconData(0xe24e, 
                              fontFamily: 'MaterialIcons'))
                  : new Text(''),
            ],
          ),
        ),
      ),
    ),
  ),
);

Worst thing I found

Debugging, an underlying issue can be a real challenge. I integrated Firebase Fire store to pull in my data, and managed to get something wrong, throwing null pointers thrown in the underlying Firebase wrapper, in a seperate thread, so wasn’t able to catch and deal with the issue. The issue was eventually resolved with some data changes, but trying to debug the more complicated bugs that happen down in the depths of your libraries or OS is a lot more difficult when you are working through one platform into another, flutter driving Java underneath.

An Interesting Twist

Most cross platform mobile platforms, have a single environment for your app, and you break out, or integrate custom native components when needed, with some kind of bridge or wrapper. Flutter does this as well, but also has another option, integrating a Flutter view into your native app. Pull in a FlutterViewController and load up a piece of cross platform functionality. Build out your native application framework, use the standard native controls for navigation and the more complicated, device dependant sections, but create cross platform views for your news page, the help section or any other platform dependant section of your application.

Will I use it?

So Flutter is still in Alpha, but it’s an interesting play, and possibly more interesting once we know what Google is going to do with Fuschia. I think the idea of including some cross platform views in your native apps has merit and is something I’ll be considering more of. I’ll keep an eye on it, and see where it ends up when it gets to production.

Will you use it?