Flutter- Google’s latest innovation for mobile, web, and desktop apps

Flutter- Google’s latest innovation for mobile, web, and desktop apps

July 12, 2019 28 By Bernardo Ryan



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'll go back to creating my leading and I'm gonna make this an icon just because quickness icons not trained and okay there we go it's looking a little better let's I want to know is it going to be a bus this is gonna be a train is it going to be the the underground so in a subtitle here I know that we have the stop types of strings this gives me a list of strings not very useful so let's join them together and that's also not very useful cuz everything is a widget and so I can make this text and then I can do that and then notice that it's actually styling the text for me based on where it is in the list style so this is great still doesn't do anything that's not very useful so finally I can give it a gesture and because this takes our closure and because I've used the search delegate that gives me a handy close function which takes returns my value which in this case is my stop so now theoretically hopefully if I haven't messed any of this up I can go and I can click here okay so it's fun it's it's passed it back here I'm going to say well we want to go to where we currently are and I think that's the stop and then that goes and that pulls the data and then now this is all of our stops now this is cache data so the times are wrong so as I wrap up let's just see if this behaves itself over the Internet now just to show you I'm doing you know he's doing behind the scenes API stuff it's probably very complicated and whatnot how do I make an API call well let's take a list this is how I pull back my list of locations and all I'm doing in here is you know super boring I'm creating a URL string I'm calling this fetch data function and notice that this returns the future and dart is asynchronous like JavaScript by Nature which means you can do the whole make a call on i/o it's gonna be non-blocking so I don't have to worry about threads processes new tasks I can just make it and the platform should continue to behave itself in terms of its rendering time so I'm gonna get the body and then I do some JSON decoding magic where I'm at them into the appropriate data types and then to make the actual call itself is one line of code and that's it that's how you make an HTTP call and flutter you can either return the future I'm awaiting here so I can handle that and I do a little bit of error handling which you hopefully won't see and let's see now if this actually works let's go back here I'm gonna switch this off I'm gonna pull this down yes I am and so I am gonna search for what did I test earlier Brandenberg yeah there we go ok we have Internet access and it's working so I can go to Brandenburg and I can click on this and it updates and there we go so that is at actually working through our Wi-Fi here over to that and I know it's not you know super amazing but this took me like you know a few days of hacking together and playing around with it so hopefully what you take away from this is the developer experience with flutter flutter is great you can do all these cool UI things but I enjoy when it works standing up here showing you all this because this is how I wrote this flutter app this is we played around with it I am also the world's worst person for styling and UI and everything else and you may think this is terrible but you should see what I typically build and with flutter I actually produce something that's vaguely useful so with that I will hand it back to Martin thanks Matt never thought this job would come with my own widget that was pretty interesting so I want to show you this slide really quick just to show you the actual tech of what behind what Matt was just using so everything Matt was building is part of the flutter framework and flutter is written completely using Dart the programming language so that gives Matt and flutter developers control over a lot of things within the frameworks like the widgets animations and gestures now all that sits on top of an engine made with C++ that uses skia and this allows us to have runners to go to iOS Android and we also have a JavaScript implementation for the web which I'll touch up upon now 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 preview a video that we made for this conference of a company based in Europe that created their app using flutter because of the fact that allows them to really express themselves in this brand driven design so let me show you reflect a story beautiful design was the critical success factor for reflect late reflect a is a journaling app that we created to counteract the stress that comes with social media in technology digital well-being is important now more than ever so our goal for this app is to provide a safe space and break from the stress that technology can bring therefore this app must be personalized safe and beautiful so all users can open up and feel they have a unique relationship with reflect the beginnings of perfection Shirley was very humble we were a very small team and only two engineers however we wanted to reach users on both iOS and Android so we built the first version of reflect Lea using a traditional cross-platform framework but even that reflector is all about beautiful design and user experience we felt restricted in our ability to deliver a consistent personalized design for both platforms for example frequently shadows were cut off an animation were always sluggish and so it became clear to us that we needed to find a new solution and luckily we found flood it just worked so out of the box we've got an extreme amount of value who can then use and we knew we had to use reflecting and that was kind of a key deciding moment and from the first line of the photo code was written who had done in only two and a half months that included some large new features like our entire premium subscription implementation photo paints every pixel on the screen directly so now we don't have to worry anymore about difference between iOS and Android render our content it is still adapts to the unique characteristics of each platform we didn't keep a common code base and still build iOS and Android specific UI where it's appropriate it was a revelation for us they were actually able to move so fast while still not compromising our visions so Fleur is great because it gives you control of every single pixel on the screen but it allows you to actually structure your code in a way that's maintainable and refactoring for example to create the elegant and informative new view transitions we use the hero widget and because we're able to nest basic widgets across the federal framework our initial build of the you was quick and effective while still maintaining and great performance so we deployed the app to millions of users all around the world and they loved it after we launched reflects a 2.0 one thing that made us particularly happy was how well the design was received we thought it was beautiful but it was great to hear that from our users as well overall we're very satisfied with her floors before you it has enabled us to build the beautiful UI that we envisioned we've got a feature in Apple's new apps we love this cutter built in time in half and we can release new features simultaneously on Android and iOS and now with flooding for the web we can deploy our existing code base for Android iOS and the web what flower were able to deliver this beautiful experience to millions of users and month-over-month were seeing double ticket home cool so at i/o a month ago we announced flutter was already in 1.0 but we announced slaughter 1.5 and flutters main focus was mobile but our vision statement is to expand beyond phones and we actually announced the technical preview of flutter for the web and as you see in reflections example a lot of people are already playing around with that so you today can go and actually build things on the web using flutter which compiles dart code to JavaScript we're also experimenting with other places you can use flutter such as desktop and other embedded form factors and here's one example which is New York Times KenKen puzzle app now they the New York Times as you know famously for the crosswords and other games needed to build this so that it runs everywhere and they actually built the whole thing using flutter which runs on mobile web and desktop and using that link behind me you can actually go to it and play with it right now it's also in our booth here if you want to check it out now I want to bring that back on because I thought it'd be fun to take his transportation app and actually put it on the web so let's bring that back on and see if he's ready to do this Matt there he is [Applause] it was going to sleep there we go so doing live demos things can always go wrong and then Martin said why don't you come up and demo a technical preview and I'm like oh that sounds like really fun let's see what happens so flutter for Webb is in technical preview and I'm gonna undo my changes here because what I have done is I have hacked on this code a little bit and I have ported it to flutter for Webb's I'm going to do some get stuff here and you can say well why why do you have two different versions well we're in technical preview so we have a lot of things implemented for the web and there's a couple of things not quite there yet I've taken out the animations to start with and I've also disabled the internationalisation for the moment because we're still working and getting the material pieces of internalisation for those widgets in as well but the rest of it is pretty unchanged so we don't need you running anymore as you can see over here like the code is pretty much the same I've tweaked a couple of things but it's still pretty much the same codebase so how do you actually get this compiling and running on the web well ultimately you're going to use the flutter tool it's gonna do everything for you at the moment technical preview we have given people a web server web dev and that will go through the whole compilation process and then start to serve if I'm lucky my application locally so at the moment it's just going through the build process what else are we gonna need what we're gonna need a web browser what I'm gonna do here is I am going to switch on developer just so we have the console and I also want to show this as it would look like in a phone because I did no optimization for landscape it looks terrible but it looks okay in portrait so we're gonna stick with that so let's take a look here it looks like it's still doing a little bit of building so it's going on there maybe I should have cashed this beforehand but because I was doing it live I thought it empty all the caches and there we go so this is now built essentially what you saw is the same map with a couple of differences you'll see now that I now have a web folder and the web folder has index dot HTML and I could do a bunch of things here but basically all I'm doing is I'm serving up the app from JavaScript and then I have a new main and all this is doing is saying let's initialize the web component tree and then serve the app as usual so the only two things I've had to add to get this to work so I'm gonna truth let's go here and we're gonna go and fingers crossed still crossed there we go so here is the app remember the animations are switched off and I replace it with an icon but here is the app running in in in the web so I can tap here and you can see I have essentially the same styling you see we have the shading I haven't changed anything here I have my pop-up which is whether the second time around again go preview and you notice I've taken this out I'm gonna put us back into offline mode just to quickly demonstrate that this works I'll try it again at the end so I'll search for there and I chose this at random and we'll search for and and it just renders so without any real change of my code I have a web app which behaves thusly now you're like okay well that's all well and good you using cash data let's see what happens if you actually try to use the HTTP libraries and they synchronicity and everything else well I wouldn't try this if I didn't think it would work so let's switch off offline and let's go back here on this change err start to I came from the airport so let's put in airport there we go so that has pulled everything from the internet using the same code as we did in the app which i think is kind of cool and then for the last thing let's see if this works there we go and we have our route and destinations can anyone spot the bug it's not that was two hours ago somebody may kept this in UTC we're plus two I'll fix that I only noticed that last night and I'm like I'm not gonna break everything now so yeah my app has bugs so there we go very little work I stripped out some of the more sophisticated literally you can pull down master and there will be fixes on a daily there will be fixes in there on a daily basis of working hard on it so hopefully that's given you a flavor for flutter compiling to JavaScript and running on the web thank you cool Thanks about I want to close with something that you guys build with the community so we recently finished a comput test called flutter creates which challenge developers all over the world to build apps with flutter in under 5 kilobytes of dart code now most of you know what 5 kilobytes is it's less than half a second in an mp3 file it's absolutely very very minimal code so we want launch this we were curious to see how creative people can be so I'm actually going to show you a video we put together that demonstrates a lot of the submissions we received in over 60 different countries from this competition [Applause] this was awesome and here are some of the winning apps from the competition the piano on actually codelab their entire entry before it finished so you can see how they wrote everything I mean all these are actually open source so you can go to Florida EV slash create and check them all out but besides just the winners this competition was really not just for winning but it was to allow people to experiment with flutter and have fun with it so we got some really cool stories out of it – someone told me that their submission turned into a full-time job someone else said that their whole team asked for a week vacation just to work on it so it was really cool to see the impact that this hat so I want to thank you for being here we have a booth in Hall a please come talk to us we'll be here all of today and tomorrow again I mentioned the demos we did on stage there's the repo the link to it so if you want to check it out on github and our website is footer dev and come find us thank you very much