Flutter Live ’18 Recap with Martin Aguinis
Martin Rybak: Tonight we are super proud to welcome our special guest Martin Aguinis who is the Marketing Lead for Flutter at Google. You may have seen him in many videos online including the new Flutter Widgets 101 series. He is stopping by New York on his way home from London where he helped organize the Flutter Live event, so let’s give him a warm Flutter NYC welcome!
Martin Aguinis: Alright, thanks so much! Thanks Martin for organizing this and thank you so much everyone for being here on a Friday night. I know there’s a lot of excitement happening with Flutter but there’s also a lot of other things happening in New York so I really appreciate you being here. So before I get started, as I was putting these slides together I realized I actually have no idea what level of familiarity everyone has with Flutter or with mobile apps or Google so I just wanted to get a little bit of a sense of that so that I can maybe adjust the presentation to fit the audience. So, who here is working on some sort of Flutter project? Who here is a mobile app developer? What about a developer in general? Any business-focused? Who here knows very little about Flutter? And who here was able to catch Flutter Live this week? Awesome, so there’s a good mix. We’ll try and therefore go both a little bit high level briefly and then deep dive into certain parts too — and we’ll definitely leave some room for questions as well. One of my favorite parts is just getting to see what type of questions you have and obviously hope to answer them; if not I have luckily some other people on the team that can help.
Actually one more thing, who’s ever heard one of my talks before, whether online or in person? Great, so some of you might have seen a few of these slides already, but what I want to do is first start by talking a little bit about the mobile landscape in general and why Google cares so much about Flutter and innovating in that space. Then we’ll talk about Flutter Live and some of the announcements we heard. Then we’ll hear from Will Larche from our team who runs our Material Design and Flutter collaborations he’s done excellent work. Will was on stage as well at the event. We’ll also hear from Clay Elliot about his experience with Flutter and we’ll take some questions, so let’s get started.
I wanted to start with this fact, which is that from 2016 to 2022 the mobile app economy is growing from $1.31 trillion to $6.35 trillion. Absolute numbers for me are sometimes hard to conceptualize so that’s like saying that every human being on this planet has contributed $835! This is partly because the number of apps actually downloaded are growing as well.
As you can see in this chart, in 2018 we have about 205 billion downloads a year, and that’s going to grow to about 258 billion in 2022. Pretty crazy.
Now this is another really interesting study which is taking the top 1,000 mobile apps versus the top 1,000 mobile web properties. In other words, apps and the mobile web have done very well, and if you compare those along the same range you’ll realize that there’s a 10x in terms of the time spent on mobile apps. So it’s really important to have a good experience on apps and if done right they can engage your users very well. And something we did as Google, one of the studies we did, was trying to understand how do you boost apps’ usage? If everyone knew the answer that none of us would be here today, right? So the study results had a consistency of eliminating friction which means making it a lot easier for your users, very simple designs, somewhat intuitive.
Sometimes you look at apps — my first app back in college that I made up was basically like an Uber for the fraternity and sorority systems called Greek Ride — and the way it works is you would press a button and they would help you get to your organization. And at first we had like five tabs in there and it was really hard to use and then we realized who our target demographic was for this app and we realized, wait a minute, we only need one button right? Make it very simple, one use case, and that’s it! But that’s something we saw in this study too, which is simplicity, intuitiveness, being consistent across devices. That’s not very easy to do, right? And again, if you’ve seen this before maybe don’t say the number, but if you haven’t, let’s play a little game of roulette to try and understand the challenges in the mobile space.
So can someone yell out a number 0 trough 36? 25? Alright let’s test your luck tonight. If we get 25 maybe you can come up here and give the rest of this talk. Alright, 17 so you didn’t get it right. But don’t worry, you only had a 3% chance of getting that right. And according to AppsFlyer, only about 3% of users remain active on an app after 30 days. So if we were to take an average app from the Play or iOS store, and a hundred people were to download it today, only around 3 of them would be active users after a month! So it’s like playing game of roulette, right? But that’s not the only challenge we have with mobile.
A lot of you might be familiar with some of these challenges. On the business side we have things like time to market. You have a great idea, by the time I executed on it there’s already 15 apps like it. Fragmentation and agility — especially with different app stores nowadays. Having to coordinate between your designers and your developers and having 2 split codebases. And also testing and prototyping — a lot of times you just want to build out the concept and start iterating from it, instead of having to invest thousands of dollars into making an app.
Some of the technical reasons which you all might be familiar with, and one of the reasons why people really like Flutter, are having to have split code bases. So if you have to make an app as a brand — in the US it’s 50/50 Android/iOS market penetration and the rest of the world’s it’s about 80% Android/20% iOS, so it’s still a ridiculous amount of users are using both. So obviously many times brands have to have those but even let’s assume you have to just have one, let’s just assume you only want to make an iOS or Android because you’re biased — I have both phones, so as you can see I’m not that biased — but even if you only have to have one, you still have to coordinate between the designers and the developers. So, a designer will make this beautiful app in InDesign or on Sketch and give it to the developer and then the final product, and they’ll be like, what happened? This is not exactly how I wanted it. They have to make compromises. A few other other problems there.
So in other words, this is my favorite visualization that describes this dilemma. So on the left you can see what 80% of people nowadays still do, which which is develop two separate iOS Android applications. At the end you get that castle but, that maze represents a lot of those challenges that I just said. It takes a lot more time, you have to give double the effort. So what’s the alternative before Flutter? Well, you can use a traditional third-party cross-platform solution. Now, we’ll dive a little bit into technologically why this is, but long story short, most solutions like PhoneGap, Cordova, React Native, a lot of them use Javascript, so essentially you’re passing the bridge, you’re building it with a web language and it’s converting into native code so you’re not technically building a native app, and so that means that in that process it slows the app down sometimes, it’s just not fully native. We’ve all been there where, I mean nowadays we all have such high expectations in our apps that we assume it’s going to scroll a certain way or do some behavior, and when it does of course we’re not very grateful for it, but when it doesn’t, you know forget ever using that app again, especially with that 3% number I gave you.
So that’s where Flutter comes in. It’s funny, because I was giving a talk similar to this a year ago and even at Google people were like, what’s Flutter? And it’s amazing to see the amount of awareness that has grown, and now as marketer my challenge no longer becomes raising awareness, that’s always a challenge, but it’s also making sure we are clearly articulating the value proposition, clearly articulating what Flutter is for, and as you’ll hear from the Keynote that happened, it’s beyond mobile. But I thought what I’d do is show you a quick sizzle reel that we made in one minute of this past week and the event and then I’ll go through the rest, so let’s see if this works.
Great so here are some pictures from the event itself. That claw machine on the on the left — I was in Shanghai, China, and we went into this place called Pig Pink and it’s five stories of just claw machines, and everything is pink. And when I’m there — we have this mascot called Dash, which some of you might have, I’m like, that would be so cool if we had it — so as a joke I pitched it to our Events Coordinator, hey we should have a claw machine at the event! Two months later I get a deck to approve some of the branding and they’re like, oh this is where we’re going to place the claw machine. I’m like, no way, no way! I show up, there’s a claw machine with Dashes and the line is literally out the door. That was the most popular thing. So, if you have an idea you think is stupid, pitch it, I promise you, great advice.
But anyway, this was the event and it was great, but I think the most incredible part about this was not the physical event, but this was a global launch. And at Google usually we have dev summits like Chrome, Android, and a lot of the focus goes on the physical events, but we understand that most people can’t make it there. And I know a lot of you were in this New York City meetup this week, and I heard it was a lot of fun and you had your own cheering crowd going at certain moments, and I’m sure you have much more candid feedback then what we heard at the event itself. But it was amazing because we had over 150 viewing parties around the world, just people getting together watching this. And we actually did a My Flutter Story campaign where we had people submit their Flutter stories from around the world, and it was amazing to see the diverse responses and that’s something that we’re very proud with Flutter. So thank you all for tuning in, those that did, and those that didn’t, the last few days for me and my team has been all about the recap videos and recordings, so now we have a nice 10-minute keynote, so if you don’t have an hour you can watch the 10-minute version which has all the highlights and skips out the part where Matt and Emily miraculously finish coding an app in like 10 minutes, it was pretty incredible.
So that was it, that was the event. Flutter 1.0. So I thought today for some of you in the audience that didn’t get to watch it, why don’t we do Flutter 1.0 in 10 minutes. So I’m going to give you the abridged version of Flutter 1.0 and after that I’ll bring up Will Larche to give a little bit more deep dive into some of the actual code and the demos that we showed. Hopefully no one’s timing because I’ve never timed myself here, but I really think I can keep it under 10 minutes, we’ll see.
So, we use four pillars to describe Flutter. Flutter is beautiful, Flutter is fast, Flutter is productive, and Flutter is open. By beautiful — Flutter gives you you basically control over every pixel on the screen. So unlike general mobile app development, with Flutter, everything you write, every line of code is actually what shows up on the final app. There’s no process between what you’re coding as a developer or designer and what’s actually showing up on the phone. What that means is you have full control — this is a canvas, you’re basically an artist and as you can see from this example that came in two days on Twitter before the event, but people are just making these beautiful interfaces. And you saw the statistics on how much time individuals spend on mobile apps, so given that, being able to have these experiences will make a huge difference for organizations, for even smaller apps or startups. So you basically you don’t have to compromise between designers and developers and Will will definitely talk more about that.
The second one is that it’s fast. So, we use this high powered graphics engine called Skia. And Flutter compiles ahead of time, so you basically all the apps are running over 60 frames per second, so they’re incredibly quick. We’ve seen things like these gaming apps, 2Dimensions which I’ll talk about in a bit, are able to do all these amazing animations and you don’t have to compromise. I mean, we’ve all been in that situation, usually it’s an airline app, but some sort of app, where you’re like what is this janky app, or this scrolling? We’ve all been there, and you’re waiting in the streets and you’re just waiting for something to scroll. We don’t want that, right? We want it to be really, really fast.
The third one is productive. We introduced something called stateful hot reload. What stateful hot reload is, it allows you to literally paint an app to life. So you write the Flutter code, or Dart code, and within milliseconds, you press a button and the app will change. So you can literally have a designer and developer sit next to each other and say, ok move this 1 pixel to the right, then hot reload, and it moves. What happens in other development environments is move this 1 pixel to the right. Ok, well something broke, come back in ten minutes, let me recompile it, let me port the app, let me see what happens. That doesn’t happen with Flutter. Let’s say that something does happen and the app breaks. It’s state-ful, which means it doesn’t lose state. There is a video of me talking about stateless widgets (shameless plug), but if you didn’t see it, the way it works is — if you break part of the app, let’s say this button broke, the app is still running, only that part would stop working, and then you could quickly hot reload with a fix, so it’s really easy to find that. As you can see here what’s happening is we’re changing the word clicked to push and when that happens we press hot reload and in 654 milliseconds it changes. But also it’s interesting as the business logic also changes, so we’re now changing it so that instead of adding, it subtracts and that works as well.
Finally, open. One of the things we’re most proud of is that Flutter is free and open source. It’s completely free and open source and same thing with the community. So Flutter is an open project, and what we mean by that, as Will mentioned that doesn’t always happen on private API’s, is we are very open to the the community and we have so many contributors that are outside of the Flutter team and outside of Google. So we’ve had thousands of packages and plugins that people like yourselves wrote for your apps and then put in Flutter for other people to use, whether it’s widgets or different platform API’s. So that’s really exciting because a lot of times one of us will be giving a talk and we’ll be like I’m not sure if that exists, and then we go on Github or StackOverflow and we look it up and someone’s already written something for it.
So what’s new with Flutter 1.0? A lot of you have already raised your hand saying you’ve already been following Flutter and we’ve heard your feedback and we really care about that, so these are some things we know that are very important that what we’ve been working that are new in this release. I won’t name all of them, but I think giving iOS a lot of love is important. A lot of times you want to have that brand-centric design, meaning like the Hamilton app for example, looks very much like a Hamilton app, it doesn’t look like an Android or iOS app, but a lot of apps do want to have that Android or iOS feel, and we’ll talk about that in a sec. But we also have things like adding to existing applications. A lot of people are like oh, I’d love to use Flutter but I already have an app. I’ve good news for you! That’s what Alibaba did actually, and you can basically make certain parts of your app, if you want to redesign the homescreen and make it more beautiful, but not lose all your users and have to make an app from scratch. I’m definitely going go over ten minutes if I don’t speed it up.
So these are the high-level statistics. We launched beta at Mobile World Congress in February this year and since then we’ve seen over 200 million people using apps that are built with Flutter. You can read the other numbers but we have thousands of apps and the popularity has continued to grow.
So the rest of the keynote we structured in four ways which is the process of building an application, you go from the design to the release. So with the design, and this is something that Will covered live on stage but a lot of people basically talked about when you get an app from a designer and you have to actually develop it, what happens, right? I’m sure a lot of friendships have been lost in this process. What happens is the designer gives you an app like this and you end up shipping an app like that.
And it looks kind of similar but you can look at the top navigation, you can see some of the scrolling and the popups, it’s just easier to use certain parts that are provided by the OEM or other things that aren’t widgets or custom-made properties. So that’s some we really want to fix and achieve something like this. So, like I mentioned a lot of people still do want to have that iOS and Android look and feel so you can specify differences on purpose if you don’t want to have just one branded experience but still want that platform-specific look.
Another thing that was announced that people got very excited about was Flare. Flare is a third-party integration from an agency called 2Dimensions. There were two twins on stage and one was a developer and one was a designer, they were identical. Basically they were saying how do you coordinate between those two, and they launched this animations platform that’s free for everyone to use and you can build these beautiful animations and then with one line of code have them appear on Flutter. And I don’t have it on here and I’m definitely going to go over 10 minutes, but the cool part about their demo was you could move this person up and down and their skeletal structure will stay the same. And you can also have all these other custom things that if you catch the keynote you’ll definitely be able to see their demo here.
The second part was develop. So once you design the app you have to develop, right? Coding should be fun. I’m pretty sure this circled through other words but this is the one that we’re stuck with but it’s true, it should be very fun. So we showed a live coding demo during this part of the keynote and we also announced Dart 2.1. Dart is the language that powers Flutter. It wasn’t as popular and now it’s becoming very popular and the great thing about Dart, besides the fact that it compiles ahead of time and has a lot of things that make Flutter the way it is, is that Dart is really intuitive to learn. On the home page of the new design website we worked on we added Flutter for iOS developers, Android developers, web developers, React Native developers, all sorts of things because we realized that Flutter should not be something as a developer that you’re putting things aside to learn Flutter. It should be in addition to your toolkit. So you don’t have to give up your identity as an iOS developer or as an Android developer or as a web developer. Dart is just like an object-oriented language you can just learn on top of those other languages and still maintain those identities. And that’s something we want to stress with the team, we don’t want you to drink this Flutter kool-aid, hop on the Flutter train, and never hear about anything else, right? But we made it really easy with documentation to make that transition if you’re already familiar with a certain language to learn Dart. I saw someone tweet the other day saying they’re not hiring for Dart developers because it’s just very quick to learn, so if you know how to code you should be fine.
The third is connect. So we mentioned about the open source and all the packages. Square also launched a couple of things, a reader SDK and an in-app payments SDK for Flutter to really easily integrate and hopefully make money off your apps because I assume not all of your making apps just for fun. So this is a really useful tool.
And then finally release. Tim showed this picture on stage. I saw him on this the day before the keynote and I was like Tim are you doing, you should be practicing, but now I know why. He wanted to demonstrate what CI/CD, or basically releasing your app is like nowadays. Because you have the app ready, and you’re like alright great, all I have to do is the APK, the IPA release it on both stores, and I’ll be done. Yeah right. You have to get all the screenshots, you have to basically making the app ready, it’s a whole process to release the app. So luckily we have a partnership with Nevercode, and they launched CodeMagic and this is also a third-party integration with Flutter that allows you, once you build the app, to actually ship it really quickly to both iOS and Android stores. Obviously Flutter being for both it’s a really good tool and you can also use it just for one of them and it still makes it a lot easier.
And finally, beyond mobile. When I joined the Flutter team the value proposition was make it easy to build mobile apps. But the team at the time when I joined said yeah but long term that’s not our vision. The title of this presentation is not building beautiful mobile apps, it’s Google’s portable UI toolkit. UI toolkit because we want Flutter to run on all screens, not just moboie. If you think about your day, we have screens everywhere. We have screens in cars, we have screens on watches, we have screens on phones, but as developer you literally have to adjust at every platform, and that’s so frustrating. Obviously we’re trying to solve the iOS and Android problem first but eventually you should just be able to focus on what you love which is building the application, the design, and have that work on the screen.
So we talked about Flutter Desktop Embedding. This was the mind-blowing moment of the keynote I heard from the New York people, as soon as we said the whole presentation, not mine, I didn’t have time to do it, but the whole Flutter presentation at 1.0 was running on a Flutter app, so we weren’t using Google Slides, we weren’t using PowerPoint, the whole thing was built off of Flutter. So we kind of exited out and showed that, and then we previewed something called Hummingbird. This is where a lot of the excitement is as well, which is Flutter running on web. I mentioned earlier that unlike some of the third-party cross platform toolkits, Flutter the way it works, is it compiles directly to native ARM code, native machine code. But with Hummingbird, it compiles to JavaScript, so you’re able to write Dart and Flutter for the web. I’m sure they’ll be questions about this, so I’ll skip it.
I’m done. I’m not sure if that was 10 minutes. Learnings for next time. I should’ve done a countdown clock like Emily Fortuna and Matt Sullivan. On the flight here I was watching Mission Impossible, and Tom Cruise stops the detonation a second before, and I’m like, that’s Emily on stage. Literally, a second before she’s like, boom, the app worked and then the time was up, it was unbelievable, I was sweating.
Ok, technical overview. So, sometimes it’s helpful to visualize how Flutter works. So basically the way Flutter is built is that we have this underlying engine that’s powered by Skia, this graphics engine, and Dart. And everything in green and everything else is the framework and that’s what you as a developer have full control over. So you basically can go all the way down in the code, but obviously not a lot of people have a lot of time so what we do is we provide all these widgets. Everything in Flutter is a widget. Which means instead of starting from scratch, if you want to add scrolling or navigation, even if it’s custom you can start with one of our widgets and then start customizing that. Makes a lot of sense. But the good news is if you’re really really really picky and nothing has been created before, you can go down and actually make something custom. Not only that, but you can also upload it, have other people use it, they’ll become your best friends, you’ll grow your Twitter following, it will be great. So that’s a Flutter overview. What I want to do now is bring up Will Larche. Will is our head of design, he spoke at the event, he’s going to now talk a little bit about the demos that you saw at Flutter Live, and how he built them.
Will Larche: First, I’m going to apologize, I’m kind of a little hoarse from the after-party. It was crazy, in this pizza place that had karaoke and seven-foot ceilings, and all these people having a really good time, and it was nuts and we said like this is always like this, on a Tuesday? And the waitress goes, “no…” So we don’t even know why it was so crazy. I also wanted to thank Martin Rybak and Nitya Narasimhan who’s not here, for arranging the viewing party that we had in New York at the Google office. I couldn’t be up but my team, Anthony Robledo and MH Johnson also helped out. It seemed like it was a lot of fun, and I’m glad we were able to do that even though I wasn’t going to be here.
So, I want to talk about the studies that I showed during the design segment of the talk. Who am I? I’m Will, the Flutter Engineering Lead at Google, in the Material Design Department. Most people forget that we have actually more engineers than designers in Material Design. We have them on web, iOS, Android, and then last year I added Flutter to that. And my team works in partnership with Flutter on all things really having to do with design engineering for Flutter directly, as well as supporting the apps inside Google that are built with Flutter.
So, almost all the examples that I showed during my session come from the Material Guidelines section on studies. What are these? These are hypothetical products that our designers use to stress-test the design guidelines that we have and also see what opportunities there are to extend the components to other places and practice naming and branding. You can get to it at that website that’s up there or you can just go to material.io, you’ll be able to find it in the navigation.
One of the things that we wanted to make really special at the Flutter Live event was that I was going out to show a lot of all these animated gifs and I wanted them to be backed up by real code so that you call could go look at it later and have really rich examples of how you use material components in so many different ways for all these different actual cases. And it turns out that we ended up having six and then a couple of tiny examples on the sides. And why is this important? Because this is how you can practice your Flutter. So, I don’t imagine that every single person that’s in this room is actually working at a job where Flutter is what you’re doing all day yet, but you probably want to spend more time learning and practicing Flutter. We create these studies and put their requirements up for them inside material.io so that you could go make one of these.
I like the guy that I brought up during the design session, Jacob Christensen from Reflectly. One of his Flutter engineers practiced Flutter by building one of our apps called Reply and then that was enough skill for him to end up getting a full-time Flutter job. But, he didn’t have an idea an idea of his own to build out an app, and sometimes that can be intimidating when somebody says something like, oh yeah just build an app, and you’re like, on what? That’s not very helpful. Also I don’t have a designer and really I should be practicing what it’s like to work with good designs if I’m going to be learning something. So these are really good places to do that. We’re going to be sending out a blog post with more information about them, publishing all the code for them online so that you can interact with them, but then we’ll leave them all unfinished and that’s a great place for you in the community to submit code and practice PR’s and have code review from us and expand the examples to include the other sections that the designers made that we haven’t had a chance to create. And all of these are studies that I used in the Keynote.
So the most complete studies that we have are Shrine, which you may have seen from a bunch of other things, or code labs; Rally, which was built by Anthony here and how many days did you have to build the first version of this? Three? Anthony did it in a hackathon and it was like one of the best things in it, it got my highest vote from all the things, and it shows a lot of cool stuff, like how do you deal with those kinds of graphs, and that custom navigation; and then the last one is Crane, which was built with an intern of mine and then a few people including MH who’s not here, which shows a lot of custom things, including the tab bars and the backdrop components, and the choreography between them. So animation, I’ll be honest, in Flutter, is a little bit difficult to learn. There’s a learning curve for it. One of the reasons why it’s like that is because it’s so crazy powerful. It is far more powerful and finely tunable then what I’m used to coming from iOS, and I was a Core Animation expert, so I know what it’s like to get to the lowest level that I can get you before and I’m going to OpenGL. And this is another layer lower really, there’s so many things that you can do by saying how you want things to be interpreted or lerped without having to create individual keyframes. So you should look at how we’re doing animations in there as examples because there’s often many different ways to do something in a framework as big as Flutter and it’s good to know all of them.
So they also showed some custom drawing. Rally has a graph in it that you see right there. I never practiced drawing a chart like that and so now Anthony’s given us some code that we can use to do that. All of these are just super custom, so they don’t look like that kind of cookie cutter Material Design app that you get. These have all been branded and expressed through a company’s brand guidelines, which is something that you will do on your regular job, and if you’ve practiced doing that, that could be really useful once you begin.
Then we had three that were focused on a single partner. This one is Basil and I’ll be honest with you, I misspelled spinach the first time I made this, and that was what was in our backup deck, so if the app that we had made for some reason wasn’t working we were going to go to slides and then the entire world would have seen that I can’t spell spinach. So, I’m so glad there were no problems with that. But then, I saw someone on Reddit today spell it just S-P-I-C-H, which is just “spinch.”
This one was to show off typography. The kind of letter spacing and word spacing control that we have in the TextStyle object instead of buried down in Core Text. That’s something that I’m not used to being able to do easily coming from iOS dealing with attributed strings. Again, they are a really great data type that can store a lot of information, but they are not too easy to create. They are not easy to make complicated, and also when it comes to letter spacing I don’t even think that’s something that’s in attributed strings, I believe you do have to drop down to Core Text for that, and that’s nuts because that’s really hard. And you would be like, well it’s just not worth it for that label. But maybe now you don’t have to say well it’s just not worth it, you can just say we’ll just do it. [correction: Attributed strings have kerning. It was word spacing I was thinking of. You’d have to do that manually in Core Text.]
Another example that we had up for typography was Fortnightly which is a hypothetical newspaper out. This one, it’s just really pretty. I don’t think that the thing else except proove that we can have print-quality typography in Flutter. A lot of people assume when you’re going to be using a tool like this, that you’re going to have to make a lot of compromises and then you’ll get some crappy results, and that’s not the case for Flutter. Because I would just assume that that was just made in…well if I’m not mistake the New York Times used to make all of their stuff directly in OpenGL so they could have complete control over what’s going on with the typography, which is weird because OpenGL isn’t exactly made for typography, and so I would have assumed that maybe somebody went through a lot of trouble on that for this. Didn’t, made it in two minutes!
This one was one that I’m also showing because I made it so quickly. Aside from the presentation of that thing which we call the Extended Bottom Sheet which I borrowed some code that was not made for this example but made for the Shrine example, I made this in less than half an hour kind of in emergency style on the 4 train on my way to work with a lot of distractions and stuff. I’ve never been able to make something that I could put it into a televised-to-thousands-of-people example that quickly and never have to go back to it again. There’s no polish that I had to do for that to express what I needed it to do here. It’s also a good example for teaching how to deal with Safe Areas which are for avoiding things like the notch at the top or the home bar on an iPhone and how to do that in Flutter.
And then again, this is Anthony’s charts here. And drawing something like that is something that can be very, very intimidating. You know, like everybody’s just like oh it’s a line, it’s just a chart or whatever, but until you’ve practiced that sort of thing it seems like this could either be easy or this could be so hard that I’ll never get it done in time and I should ask them to just do something else or bring in a package like some sort of charts package and just bring it in. Which is also fine if that’s what you need to do, but it’s also a really valuable skill to be able to do custom drawing like that.
And then we had another one that was made by Andrew Brogdon and his intern out in Mountain View to specifically show Cupertino in action. So this is a Veggies app, it lets you know what’s in season, and you get to say things that’s what’s going on there, search, but this you can see, the aesthetic is expressing Apple’s iOS design language which is an official term that I found inside Apple’s documentation…once. They only describe that they do this…once. See you can look at those switches are iOS switches, they don’t look like Android switches. All this stuff, I think it looks like the sort of thing that could’ve just come right from Apple themselves. And so like I said, we’re working on a blog post right now where we’ll have really good distribution for you all. Hopefully these are going to get into the actual Flutter gallery which is an app that you can build and compile and run when you get the Flutter project cloned to your computer. In the meanwhile, almost all of this is already on our repo which is Material Components Flutter Experimental. I’m going to do a push once I get home because I forgot on my other computer to put even more of them up there, so while those aren’t totally done yet, you can still go look at them and see real live how we made them. It’s just the whole point, oh and that was it for my stuff, ok thanks!
Martin Aguinis: Thank you Will. It’s crazy, I once saw an open-source project — someone made an app that looks like iOS for Android devices and Android for iOS devices and it was freaking everyone out, because you have an iPhone and it’s seeing doing all the Android behaviors, and that shows the flexibility of Flutter.
So I wanted to talk about Hummingbird a little more. We briefly mentioned it in the keynote, but there is a blog post out there that has more of these details, but it’s really interesting because the blog post details as the Flutter team what were the things we were thinking of and we’re making Flutter for the web? And these are the three approaches we had to build Hummingbird. The first one was just widgets, so basically using all the web capabilities but building it just in widgets. The second one was some widgets and custom layout, so as you see provided by the RenderObject we have some HTML elements. And then finally the one we ended up choosing was Flutter Web Engine, which would have a Dart UI underlying engine in that blue area you saw earlier where you didn’t have control over, but then everything else would be a widget so you have full control that would render to JavaScript and that’s what we ended up doing. So this is kind of that same diagram you saw earlier tech-wise for Flutter for mobile, but for web you can see that bottom one would be the Flutter Web Engine, and the top is is everything you have control over. And I really encourage you to visit our blog post especially if you are interested. Obviously we say we’re only previewing this, this isn’t something that we say is widely available right now, go build for web, but I know people are really interested in it, so I did want to provide a little bit more context there.
Will Larche: So I’ll talk about this. And actually if I can go back to that last thing, I have a hard time kind of understanding what those one two and three options were. Obviously the only one that matters is three because that’s what we went with, but I think what they’re trying to express is that they tried, can we just replace the widgets later with web stuff, what does that look like, all the layout still happening by the DOM, it’s all browser style. Well, layouts may be not working so well, let’s try replacing the rendering layer with our stuff and then they were like, hey how about we go all the way down because that seems to be the only way that we can get these to work the way people were really expecting them to? And what does that mean?
So this is a hypothetical tree that could happen if your app had these widgets and stuff where you can see the green boxes are things that come rather than regular HTML and CSS, they’re dealing with the DOM and we’ve taken our widgets and converted them into regular objects that way. That’s what we want to do as much as possible. When you’re dealing with widgets that have text in them, wouldn’t it be really great if they just worked the way the web span, div or whatever works or something that had some text in it. If we can get that to work, that’s great. If you need to do something that goes beyond that, then we switch to drawing directly onto the canvas, which is a little more complicated because it’s a bitmap, and you can read in the blog post on Medium.com definitely some more details on that. This is all subject to change by the way because this is experimental and it’s in the lab and it’s not something that we’re working on in the open yet until we’ve totally decided what we’re going to do. I say “we” like I’m working on this; I have nothing to do with this. I’m just really freaking excited about it and when I saw this I was like, oh, I think I bet on the right horse here, so yeah.
Martin Aguinis: Thanks Will. Great, so it’s funny, when I joined the team, I had to bet all of my marketing energy toone app, which was the Hamilton broadway musical. So any time I would go somewhere I’d be like, yeah, Hamilton uses it. We use it a lot within Google as well, but now it really really has turned and it’s no longer obviously a beta product, and that’s very indicative also in terms of who’s using it. So we created this really cool asset, this video that we showed, and I’m going to show it now, which kind of highlights some of the apps since the beta launch this past February that have been built with Flutter.
So we’ll share a little bit more about other apps that have been built, but we have the privileged to have Clay Elliot with us today. Clay has made an app with Flutter and it’s always great to hear first-hand from from some of those experiences, so without further ado, welcome Clay!
Clay Elliot: Thanks. Hey guys, I’m Clay. I’m not a developer, I’m usually on the business side of startups and this is my contact info. I know we’re a little short on time so if any of you non-developers need help navigating the space, feel free to reach out. But what I wanted to show you was the performance of the app in real time, I just screen recorded it right before I came down here, and it is really snappy. So I started with Ionic and WordPress and I was pretty happy. The app performance was okay, but the features, what I could do with it, was just not as good as what you could do with native. So I tried out Flutter and I moved to Firebase as well, and not only did I get the performance, but build it once and I got my iOS app out of the same codebase. And not only that, because in Ionic you also build it once and then it goes to both codebases, but more code worked when you built it in Flutter, like every time. And the other thing is the the hot reload. When you’re dealing with different time zones, it is so valuable to just have that, not send you a build and then go to sleep and have to wait for hours. So that was a lifesaver for me, I know that not going to be the same for every situation but I can’t say enough about the hot reload.
So it’s in preview right now, it’s called TicTic Bucket List, but it works like Tinder. You can pick places that you want to go, you say yes I did that or I’ve already done that, or I’m not interested in that. So any questions from from the business side that I can answer real quick? How do you make money? So just like Tinder there’ll be some interstitial ads and then as well when you flip that card over, it is a description of the place and so I can send a person off to to Wikipedia or send them to a place to book that cruise. Were you at full release under Ionic and then how long did it take you to roll over? I started from scratch and I was in beta with Ionic, and it probably took me about 2 months to just rebuild it from scratch. I saved a little bit of time because I had the designs basically but the app to be built in Ionic, even that took three and a half months, so saved 30–40% of time. Alright I think we have to move on. Thanks guys, sorry I couldn’t show you the video, but come on the 17th of January and I’ll show you the whole thing.
Martin Aguinis: So I mentioned Hamilton, that was one of the first big wins. They took a huge bet. The team was like, you know Hamilton himself, young scrappy and hungry, he took his shot, so we’re going to take one with Flutter. We were definitely in alpha very early on but they took a bet with us and it worked. They had three months to launch this app, because that’s when their touring show was starting, and that was really hard deadline. Not only did they get it out in three months but it was featured on both the iOS and Google Play stores. The app got over a million installs, but more impressive to me is that it’s over half a million monthly active users, which means that over half a million people are going on this app monthly, which shows the retention levels, that people are happy with the app. Because you get a lot of users by paying for a lot of ads, but the retention is really important. I won’t show it now but we have a really cool case study video with the Hamilton team about this, so if you look up Hamilton Flutter you’ll find it and I think it’s great. And if you look at the pre-show for Flutter Live I did rap a little bit of Hamilton in there at some points, and someone tweeted Martin you’re a rap God, I’m like alright let’s not go that far, that was pretty bad. But the pre-show had some also interesting content with interviews from the Flutter team.
The second one was Google Ads. So we as Google have large internal bets on Flutter. All of our ads system is built with Dart and our ads app is built on Flutter and that powers hundreds of billions of dollars for Google. So when people said oh is this an experimental project, we say, ads. Google has some big bets on that. We also have, and I won’t show it now because again we don’t have much time, but we have an Alibaba case study video as well where you can see how Alibaba used Flutter to power parts of their app with over 50 million downloads. So millions of devices.
Will brought up Reflectly during the keynote. They are a really cool app on meditation that was featured as a top 10 meditation app on iOS. It was really great, and they have an iOS look and feel which shows that perfectly. And finally we talked about how we have you covered. Clay just mentioned the interstitials or ads. We have a lot of plugins and ways to integrate Firebase and cloud but also a lot of things as I mentioned, it’s very open, but also a partnership. So we feedback from the community and we’re very reachable. One of the biggest things we get complimented on as the Flutter team is how open we are and how quick we are to listen to your feedback and answer your questions. And also the community so responsive. I was building a Flutter app so I made an alias and I had a question so I asked, and of course they didn’t know I was on the team, and within 30 seconds someone on Gitter chat answered and then DM’d me and said, “Hey, I love Flutter, what do you think about it?” That’s pretty cool! And I don’t get that in many other communities, so anyway that was really really cool.
And then finally I want to end with this, which is that there’s four different ways you can get started with your Flutter app. A lot of people think, oh I have to have an app idea to start with Flutter. That’s not true. The first way though is obviously starting an a from scratch. So if you want to go with a brand new app you can build with Flutter on one code base and it will run natively on iOS and Android.
The second way is prototyping a new idea. Let’s say you just have a concept in mind and you don’t care too much about design yet or you want to design just a part of it, can quickly build it out in Flutter, test it out, see what happens, and then pivot building your MVP.
The third is bringing your app to the other platform. So you already have an iOS app built, or already have an Android app. You can build for the other one, and eventually merge the codebases. That’s something that Topline from Abbey Road Studios did. We actually opened up the Flutter Live event with that video; that’s another case study you can check out. They made a music recording app and they already had an iOS app, and they made their Android really really quickly with Flutter and now they’re integrating both. And what’s nice about that is once you launch the app, it’s just the beginning because every time you want to do an update to the app or launch a new feature you have to synchronize the releases. You’re going to have to do the do the same thing on both platforms, sometimes one takes longer to improve than the other, so those half of your users are not happy and they think you’re A/B testing things and you’re not, it’s just because you couldn’t release it. So with Flutter obviously eventually merging it’s really really easy.
And then finally, using Flutter for part of your app. And that’s something that Alibaba did for the Xianyu app which is like their eBay. Millions of people use this app to buy and sell things in China and other parts of the world. And what they did is they realized that their item detail page and a few other parts of the app weren’t beautiful and they weren’t working very well so they just wrote those parts in Flutter, put it into their already existing app, they didn’t lose any of their users, and it was a pretty flawless transition. Funny story I’ll end with which you wouldn’t hear at the keynote, but we as Google have another internal app that was built natively. And this was the beginning of Flutter and they decided to rebuild in a Flutter and relaunch i, and to this day users have no idea it’s a Flutter app. Because that transition, it still looks exactly the same, so I thought that was pretty powerful. So thank you so much for being here and we’ll take a few questions and we’ll stick around at the bar!
