Flutter- Google’s latest innovation for mobile, web, and desktop apps
How's. Going I'm. Martin and I lead marketing for flutter it's an honor to be here thank you for welcoming us to this keynote. Stage, see. If the slides, go up there we go, all right so. Flutter. Is Google's. Portable UI toolkit for building apps on Android, iOS. And, the web among. Other places but. Before we get started I'm really curious who here is a mobile developer. Okay. About 50% what, about web developer. Very. Nice, who, here has already heard of flutter. Wow. About, half the room who's, actually used flutter build something with flutter already nice. Okay. So. It seems like we have a difference in, terms of exposure to flutter and knowledge, of flutter so this, is how we're gonna structure the talk we're, gonna start with just a very quick overview, of what flutter is and. Why it really matters at Google and beyond then. We're actually gonna pack on some flutter code live on stage so, hopefully, the demo gods are with us today and then. We're actually gonna have some partners talk to you and show us use some other really cool demos. So. I mentioned, what flutter is but. A lot of times when we talk about flutter we do it with, four pillars so. We say that flutter is beautiful. Flutter. Is fast. Flutter. Is productive, and flutter. Is open so. Let me dive into each one of these for a little bit the. Reason flutter is beautiful is because Fleur allows you to paint every pixel to the screen, everything. In flutter is a widget which is customizable, which means that you as a developer have full control over your, application we. Also have some, app widgets. That we give you such as the material design and cupertino widgets so you can make your app look to certain platforms so you can also customize them to make it a very brand driven app as you can see in the example behind. Me and I'll show you a few more examples. Secondly. Footers. Fast we. Use Askia. Graphics. Rendering engine, and flutter. Apps render, over 60 frames per second as you, can see in the sand built by two dimensions, and. That's actually overlaid. As you can see by texts and other custom things you can create these highly, powered animations, that are jank free because. We've all been in that situation where, you have an app and it's a little bit laggy but, obviously we expect our apps to have really, good performance, so as, soon as it lags you know all the investment, you put into the app can, can go go away, thirdly. Productive, so. Something. We love at flutter that we created because our developers love is called, stateful, hot reload which, allows you to make changes to your code and literally in real time see them up here on the application, as you can see what's happening right here so, we're, tapping we're changing the word click to tapped and hot reloading it we're also changing some of the business logic so we're actually making it count downwards, and set up upwards and you can see it reloads, that in you. Know half, a second or so so. Finally. Flutter is open and this is something that's really exciting to us which, is flutter, is entirely free and open source in fact, a ton of our community members are probably, here in person and watching online and they've, contributed a lot of code packages. And plugins to flare itself and because. It's open source we keep that nature with us as well so a lot of things you can go in and actually see all the code to it as, well as the demo will show you later will actually share all the code there as well so you can see how it was built, so. These, are our four pillars and, we've. Seen an incredible, amount of momentum this past year with flutter so I want to show you a quick video of some examples of apps that have been built this past year. All. Right. So. Those are cool apps but obviously, at the we are Developers Conference we want to show you the code behind it and actually do some of this live so, I want to bring up the stage now my colleague Matt Sullivan, who's going to hack on some flutter code for you Matt. Hello. This. Is the part, of the talk or.
Things Feel horribly wrong which is why Martin asked me to do it so we'll. See where we get to so. I've got my Visual Studio code I have my, iOS. Simulator which is what I decided use today and notice that my simulator. Is set for. German. Locale so. Let's start this up so. I was, trying to think what would I do for. 10 minutes on stage. To show and typically I kind of build simple things from scratch so, I had to look around at some api's and I found that there was an open API for the Berlin transportation. System and. I thought that's cool I'll hack on that and then two weeks passed by and I realized that I'd, gone a little overboard so, we're gonna do today is look at some of the handiwork I've done and tinker around with a few pieces so. Every. App needs, a splash screen. Splash. Screen and, what. We see here is as I work through it for, those of you who are not familiar with flutter just, keep one thing in mind that everything is a widget so. I have my splash, screen widget. Here which is my entire page and, then. I have my, build method and what this does is I take a scaffold, which is a widget and that, gives me some basics, around theming. The page which I have made this Berlin, bright yellow and then. Inside, my. Page I have a column because, widgets. Are not only UI components, that you see it, also controls, your layout. So. What I have in here on my column is I have a couple of widgets two, of them which are flexible and one, of them holds, a transportation, animation. And the other holes a flat button down the bottom so. Let's take a look at this page and see what I can do well let's say that I wanted to give my button more space I could change my flex to two okay. So that's given me sort of 50/50. I could, even go back and I could give my. Piece. Of the top more. Space and so, you can play around with it and this is heart reload in action, so. Moving things around it is all well and good well. We can also do is we can take a look at our transportation, animation animation, this. Is using the, flare plugin built by two dimensions, and. I see here that I have an animation of a bus and I have my box fit well this. Is nice but maybe I want to play. With this a little differently instead of containing it why don't I try to cover the whole area with my bus animation, there, we go I can blow it up a bit that looks kind of cool well, maybe I actually want to fill, the whole thing and not lose anything on the sides and that stretches it a bit and, so what you can see here is as I play, around with. Flutter I can. See. In the real time what's happening so, maybe I don't want a bus maybe I want to train, so. I got this cool train animation, that's nice what, else do I have I have. A metro. Animation. And. This Metro animation is kind of cool it doesn't quite fit in with the yellow so. Maybe, I could come up here and I could instead, make, this color stop black, and. See what that looks like and. That looks a little better and I get this cool tunnel, effect going on and so, again I can play around so it's completely hitting my button so let's undo. That let's go back to bus for the time being and. That's great so down the bottom I have this flat.
Button Which doesn't pop very much it's not very exciting No. How, can I make it better one. Thing to notice is that my text, widget. Is actually, using localization, because I've localized, this both, for English and for, German and, we can check that out in a little bit but, let's say this, is a boring button, let's make this button a little more exciting, so I'm gonna make this a raised, button and now. It looks ugly but at least you can see it so, that's nice what. We can also do is maybe we can make it the same, color, as. My. Page. Okay. Fits in a little better but it's kind of hard to see so let's. Elevate. That a bit let's give let's, give it ten, okay. It's a bit much but I can see a little better now, and. So that's nice but. It'd. Be nice I don't like squares particularly, much let's make our button a little, more shaped so let's put in a shape and I. Have a handy. I cannot, spell, which. Is fine I have, a handy. Rectangle. Border here and let's get rid of this because people can't see what I'm doing I have a rectangle, border, widget which, seems to give some sort of circular radius that's. Cool and I can play around with what this looks like let's. Keep it at 20 and finally. I kind. Of want this to pop a bit so, let's. Stick a little border let's, make that actually a little bigger and. Do that and. So there you go this is a typical, workflow for. Building UI in flutter I change, my code in heart, reloads and pushes the code over in real-time near. Real-time and it. Makes. It pop, and. Change, so. This is cool now let's move on and actually look at what the app does but. Before. I do that I. Want. To make an announcement and the. One thing that developers absolutely. Love or, hate is a. New feature, so. For the first time here. We're, going to announce a brand new feature and Martin. Come. On come on coop. Come. On we're. Gonna announce a brand new feature for. Flutter. Which. I have. Dubbed. And. I cannot spell Oh God. The. Martin widget. There. We go, our. Big release and our who wants to see that again you want to see that again I'll do I'll, do a love hunt restart here and hopefully we're gonna get this again there, we go are we gonna have it there we go we have the Martin widget which. Is now going, to be available for everyone to play with and you and our mortalized in flutter so you go Martin thanks. Matt. Okay. So. I'm, gonna pay for that later, let's. Move on here. We, go I have my app this is nice I can give it a start and and give it a final destination and it's gonna work out what routes I can take now, I've got this, preferences. Area and as I said before I have translated this so we've, got some nice ways of handling. Internationalization. In flutter and, one thing I'm using is I'm using the open. Transportation, API, for. The Berlin transportation, system and occasionally.
It Kind, of fires me 502 errors, which. It does irregularly, but I was like this is gonna happen on stage so I'm gonna put in an offline mode and I'm gonna activate this now while I build things but I'll switch it off at the end and we'll see just well. Just see how we do okay. So. Let's, go back. So. Here. I have my, search page and. This. Search page is actually entirely, built using. What we call a search delegate which is another feature in flutter, and you'll find that if you dig through the flutter API there are a lot of things, in there that can make your lives easier so, this search delegate, gives me a lot of things like it will build suggestions. Or I can give suggestions in real time I can build results, I can, build some actions at the top and so, what I've done is I've created this and I. Can search for something and I'm gonna use Bob because that's the standard, search term I use and. It's. Gonna say where my place is why does it does that because I haven't actually implemented. Building the places list yet because I wanted, to show you what it was like building something, a little more complicated like, a list in flutter, so. First, off how do you build a list in flutter well. It's, simply, a case of using a list view and. You. Know you asked well what about like you know recycling. Your views when they're off screen how does it handle thousands. Flutter. Takes care of that under the hood for you you can create a list view and you can let the, platform. Handle, all those complexities for you so list view takes some. Children, and what. Do I want to show here well I've got a list of stops. And. So that's not gonna work and, why is that that's, because everything is a widget so, we need to give it a widget so I can do some slightly, fancy. Functional. Piece here, and I'm gonna map my stops. To. A text widget and for the time being I'm just going to show the name and this, gives me an iterable, so I go back to, list and there. We go I have the world's ugliest most, boring list it's a list thing it moves doesn't, click it doesn't do anything so this is clearly unacceptable. So. Let us use some, more out of the box which is flutter we're gonna create a list tile and a. List tile we, can give it a title which I'm gonna keep as my text, and, I'm gonna balance my braces you, know what I'm gonna do that to make it readable and, there we go okay so it's, added some spacing, that's ok let's put, in a, leading. And you're like where's, he coming up with all these well what I can do is I can hover over and I, can see what's there, what's really cool is I can actually go to the source code for, a list tile and I can see how the whole thing is implemented, because all of the, UI code and flutter is written in dart all the sources available and compiles, into your app when you actually compile, it so you can actually dig in and you can learn and, customize, and do all sorts of things that you want with, the existing out-of-the-box, so.
I Mentioned dart and. The, dart team actually is at. Google as well so they sit right with us in the flutter team and we worked in the last few years very, hard to re-engineer, dart, to really work well with flutter so, you can actually go to dart dev to see the, new site and some of the new features but here are some of the pillars that that. Make dart a really great programming, language for flutter. So. I, want. To talk briefly about momentum, you, know just, a year ago if. I asked who knew about flutter here probably most people wouldn't raise their hands but. We've seen a lot of momentum, within. Google and outside of Google with flutter here, are just a few stats that. I found, you, know I don't have to read him but, also, it, Stack, Overflow which, I know he we just heard from the CEO said. That flutter was ranked number three most loved toolkit so you know and the reason I'm saying this is not to convince you to use flutter it's just to encourage you to just check it out do some of our code labs it's free, and open sources within an hour you can be doing some of that hot reloading that matt has done. So. I mentioned some apps I use flutter it, started within Google and, we use it a lot internally. Some. Examples are our Google ads app we, just announced assistant support for flutter at Google i/o, there are a few examples here as well, massive, for example a French insurance. Company which over five million users I believe they're here somewhere as well just. Build their app with flutter and we, have one up there that's uh you. Know be relevant to where we are today so instead. Of me telling you about them I wanted to bring up Joseph, from BMW to give you his perspective, on using flutter welcome. Thank. You for having me over. The. Last couple of years the complexity, of building and operating an app for a premium brand like BMW, kind of exploded. Multiple. Platforms. A lot. Of form factors, and the need to maintain multiple. Apps over different brands means that keeping the quality high isn't easy anymore. On. Top of that BMW. Is operating, in a highly regulated market, and is, convinced, that we always have to deliver the, best quality to our users, all. Of that together means that, the efforts of building, and maintaining, and, testing, and running an application, in the BMW group is actually quite significant. So. Our teams are. Constantly, on the lookout for technologies, that help us to, both improve, the quality and the fruit food of our work all. Of those technologies, fell short in one way or another until, we, looked at flutter so. What kind of interested, in flutter was. The, integration in visual studio code the, quality of the application that comes out and the performance of the application that we see at the end what. Kind of really excited, was. The support of the community out there and, of. Course the amazing team at, Google. And. On top of that coding. In dart and flutter was actually quite fun again compared, to everything we did before. So. After, a very for evaluation. Period our, teams, decided. To go up to management and. Highly. Recommend flutter for, future development, so. After playing with flutter for with himself mr., guy Duncan that you see on the slides here CTO, of the connector company with him the B&W group had to say the following by. Combining Darden flutter we have the first true cross-platform, mobile, toolkit. And we feel it's a game changer to ensure feature parity for digital touch points and IOT by. Moving forward with the world-class tooling, automation, and modern, functional, programming, patterns we can improve feature cycle, time security. And cost of delivery of features, for the business. So. For our team's flutter. Is sheer development, pleasure we. Can deliver features quicker, and with higher quality to the business. We. Really, enjoy the, theming capabilities, of flutter and we're, interested, to see what we can do with flutter for the web and desktop, in the future the. Open source nature of flutter was a big reason for us to commit to it and that means we also want to give back so, over the next couple of months we will open source a couple of libraries we built internally to, the community. In fact there's already a couple out there you might have seen them already. BMW. Is the ultimate driving machine, and we, believe that flutter, is the ultimate front and develop machine thank. You very much. Thank. You. So. One of the pillars I mentioned earlier was beautiful, and as. You can see behind me you know the pattern in apps today award-winning. Apps are really about. Beautiful, animations. And design right. That's why we have all these custom, components, to it and. That's. Something that we, as flutter from the beginning knew so, that's, why I mentioned we provide ways to make it look like iOS and Android applications but we also want you to be able to customize everything, and, so I thought what, I want to do today is actually.